Kony AppPlatformで作成したiOS/AndroidアプリのAuto Layoutについて学ぶ

# はじめに

*(Mac環境の記事ですが、Windows環境も同じ手順になります。環境依存の部分は読み替えてお試しください。)*

この記事を最後まで読むと、次のことができるようになります。

- Kony AppPlatformのAuto Layoutについて理解する(Swift-storyboardの考え方に近い)
- 画面サイズ(縦/横/タブレット)に依存せずにレイアウトを配置する

`アプリのイメージ画像`

| iPhone X                                                                                                                                                              | iPhone SE                                                                                                                                                             |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| <img width="300" alt="スクリーンショット 2018-12-21 17.31.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/87bf1763-8f3f-a06b-5806-c24016eafc41.png"> | <img width="300" alt="スクリーンショット 2018-12-21 17.31.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/423a98db-f935-7925-0281-80027ad0cef0.png"> |

# 関連する記事

- [Kony AppPlatformを使ってiOS/Androidアプリを作成する](https://qiita.com/nsuhara/items/c28d838492512850520c)
- [Kony AppPlatformで作成したiOS/AndroidアプリとSalesforceをデータ連携する](https://qiita.com/nsuhara/items/756120f1bddc6f8fe78b)
- [Kony AppPlatformで作成したiOS/Androidアプリのコーディングについて学ぶ](https://qiita.com/nsuhara/items/bf0e8884a7efc3c55176)

# 実行環境

|       環境      |   Ver.  |
|-----------------|---------|
| macOS Mojave    | 10.14.1 |
| Kony Visualizer | 8.3.10  |

# ソースコード

実際に実装内容やソースコードを追いながら読むとより理解が深まるかと思います。是非ご活用ください。

[GitHub](https://github.com/nsuhara/kony-AutoLayout.git)

# Auto Layoutとは

部品/Widgetに制約(X軸の中央揃えなど)を付ける事により、画面サイズが変わっても影響を受けないように自動調整する機能。

### Auto Layoutを使わなかった場合

| プロパティ | 設定値 |
|------------|--------|
| Width      | 150 DP |
| Height     | 150 DP |
| Left       | 115 DP |
| Top        | 275 DP |

| iPhone X                                                                                                                                                             | iPhone SE                                                                                                                                                            |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| <img width="300" alt="スクリーンショット 2018-12-21 0.14.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/358fc438-e2a6-ddf6-8dd9-610ff0b51862.png"> | <img width="300" alt="スクリーンショット 2018-12-21 0.15.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/6ab9431f-e170-2cd2-c01d-916a3f805672.png"> |

### Auto Layoutを使った場合

| プロパティ | 設定値 |
|------------|--------|
| Width      | 150 DP |
| Height     | 150 DP |
| Center X   | 50 %   |
| Center Y   | 50 %   |

| iPhone X                                                                                                                                                             | iPhone SE                                                                                                                                                                                      |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| <img width="300" alt="スクリーンショット 2018-12-21 0.20.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/e7102a1b-6509-5a75-ea70-0ffec04a4275.png"> | <img width="300" alt="スクリーンショット 2018-12-21 0.19.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/77ed6292-d346-500e-e6c1-c5ae41608af0.png">                           |

# Auto Layoutの実装

### Flexプロパティの説明

| プロパティ |             説明             |   | プロパティ |             説明             |
|------------|------------------------------|---|------------|------------------------------|
| Left       | 部品から左端距離             |   | Right      | 部品から右端距離             |
| Top        | 部品から上端距離             |   | Bottom     | 部品から下端距離             |
| Width      | 部品幅                       |   | Height     | 部品高さ                     |
| Min Width  | 部品幅が空の場合の最小幅     |   | Max Width  | 部品幅が空の場合の最大幅     |
| Min Height | 部品高さが空の場合の最小高さ |   | Max Height | 部品高さが空の場合の最大高さ |
| Center X   | 部品から左端の水平距離       |   | Center Y   | 部品から上端の垂直距離       |
| Z Index    | 部品が重なった場合の表示順番 |   |            |                              |

|   単位  |                                     説明                                     |
|---------|------------------------------------------------------------------------------|
| Dp      | Density Independent Pixels(密度非依存ピクセル)の略。解像度による影響はない。 |
| Px      | Pixelsの略。解像度が部品サイズに影響する。                                   |
| %       | パーセント。100が部品サイズの最大値となる。                                  |
| Default | FlexContainerのDefault Unit。                                                |

### 絶対座標指定

座標位置を実数値で指定します。

|          |  box1  |  box2  |  box3  |  box4  |
|----------|--------|--------|--------|--------|
| Left     | 0 Dp   | 0 Dp   | 150 Dp | 0 Dp   |
| Right    |        |        |        |        |
| Top      | 0 Dp   | 150 Dp | 0 Dp   | 300 Dp |
| Bottom   |        |        |        |        |
| Width    | 150 Dp | 150 Dp | 225 Dp | 375 Dp |
| Height   | 150 Dp | 150 Dp | 300 Dp | 150 Dp |
| Center X |        |        |        |        |
| Center Y |        |        |        |        |

| iPhone X                                                                                                                                                              | iPhone SE                                                                                                                                                             |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| <img width="300" alt="スクリーンショット 2018-12-21 17.30.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/b1c420fc-82fe-ee1d-13f8-da23fde00537.png"> | <img width="300" alt="スクリーンショット 2018-12-21 17.30.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/edf43fe3-5eca-abef-0029-d66fb3f5a714.png"> |

### 相対座標指定

1. %比率

    座標位置を%比率で指定します。

    |          | box1 | box2 | box3 |  box4 |
    |----------|------|------|------|-------|
    | Left     | 0 %  | 0 %  | 40 % | 0 %   |
    | Right    |      |      |      |       |
    | Top      | 0 %  | 20 % | 0 %  | 40 %  |
    | Bottom   |      |      |      |       |
    | Width    | 40 % | 40 % | 60 % | 100 % |
    | Height   | 20 % | 20 % | 40 % | 60 %  |
    | Center X |      |      |      |       |
    | Center Y |      |      |      |       |

    | iPhone X                                                                                                                                                              | iPhone SE                                                                                                                                                             |
    | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
    | <img width="300" alt="スクリーンショット 2018-12-21 17.31.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/87bf1763-8f3f-a06b-5806-c24016eafc41.png"> | <img width="300" alt="スクリーンショット 2018-12-21 17.31.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/423a98db-f935-7925-0281-80027ad0cef0.png"> |

1. 垂直/水平

    座標位置をCenter X/Center Yで指定します。

    |          |  box1  |  box2  |  box3  |  box4  |
    |----------|--------|--------|--------|--------|
    | Left     |        |        |        |        |
    | Right    |        |        |        |        |
    | Top      |        |        |        |        |
    | Bottom   |        |        |        |        |
    | Width    | 100 Dp | 150 Dp | 150 Dp | 100 Dp |
    | Height   | 100 Dp | 150 Dp | 150 Dp | 100 Dp |
    | Center X | 25 %   | 75 %   | 25 %   | 75 %   |
    | Center Y | 25 %   | 25 %   | 75 %   | 75 %   |

    | iPhone X                                                                                                                                                              | iPhone SE                                                                                                                                                             |
    | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
    | <img width="300" alt="スクリーンショット 2018-12-21 18.01.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/9acffa55-a0c6-5c9b-1f80-e0df22239ce8.png"> | <img width="300" alt="スクリーンショット 2018-12-21 18.01.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/bbd45364-5996-370c-514f-004da4b76324.png"> |

1. 上下左右隣接

    1. シナリオ
        - box1から`50 Dp`右にbox2を配置する
        - box3から`50 Dp`下にbox4を配置する

    *FlexContainerでグループ化して座標位置指定します。FlexContainerの上端/左端が0座標となります。*

    box1とbox2を選択して右クリック - > Group Into Flex -> `Flex Container`をクリックします。box3とbox4も同じ手順でグループ化します。box1とbox2のFlexContainerを`flx1`、box3とbox4のFlexContainerを`flx2`とします。

    <img width="500" alt="スクリーンショット 2018-12-21 18.18.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/eccd8c0b-426c-877f-e4d1-2d2555761560.png">

    FlexContainerに制約を付与します。`flx1`に水平、`flx2`の垂直を設定します。

    flx1をクリック -> Properties -> `FlexContainer`をクリックします。

    |       項目名       |     設定値      |
    |--------------------|-----------------|
    | Layout Type        | Flow Horizontal |
    | Child Widget Align | Left to Right   |

    <img width="300" alt="スクリーンショット 2018-12-21 18.43.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/f3e064e3-0088-553d-ff79-939b73f44fe6.png">

    同じ手順でflx2を設定します。

    |       項目名       |    設定値     |
    |--------------------|---------------|
    | Layout Type        | Flow Vertical |
    | Child Widget Align | Top to Bottom |

    <img width="300" alt="スクリーンショット 2018-12-21 18.43.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/b3a5ea5c-18e0-e238-5f56-d4ce0a97ebc4.png">

    box1から`50 Dp`右にbox2を配置する。box3から`50 Dp`下にbox4を配置する。

    |          | flx1 |  box1  |  box2  | flx2 |  box3  |  box4  |
    |----------|------|--------|--------|------|--------|--------|
    | Left     |      | 0 Dp   | 50 Dp  |      |        |        |
    | Right    |      |        |        |      |        |        |
    | Top      | 0 Dp |        |        |      | 0 Dp   | 50 Dp  |
    | Bottom   |      |        |        | 0 DP |        |        |
    | Width    | 80 % | 100 Dp | 100 Dp | 80 % | 100 Dp | 100 Dp |
    | Height   | 40 % | 100 Dp | 100 Dp | 60 % | 100 Dp | 100 Dp |
    | Center X | 50 % |        |        | 50 % | 50 %   | 50 %   |
    | Center Y |      | 50 %   | 50 %   |      |        |        |

    | iPhone X                                                                                                                                                              | iPhone SE                                                                                                                                                             |
    | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
    | <img width="500" alt="スクリーンショット 2018-12-22 21.05.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/2e243ecd-1f26-0258-6521-e298a45aee87.png"> | <img width="500" alt="スクリーンショット 2018-12-22 21.05.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/326996/3f0ec3c2-5620-d97f-b45b-97b6be9a6573.png"> |