はじめに
(Mac環境の記事ですが、Windows環境も同じ手順になります。環境依存の部分は読み替えてお試しください。)
この記事を最後まで読むと、次のことができるようになります。
- Kony AppPlatformのAuto Layoutについて理解する(Swift-storyboardの考え方に近い)
- 画面サイズ(縦/横/タブレット)に依存せずにレイアウトを配置する
アプリのイメージ画像
| iPhone X | iPhone SE |
|---|---|
 |
 |
関連する記事
- Kony AppPlatformを使ってiOS/Androidアプリを作成する
- Kony AppPlatformで作成したiOS/AndroidアプリとSalesforceをデータ連携する
- Kony AppPlatformで作成したiOS/Androidアプリのコーディングについて学ぶ
実行環境
| 環境 | Ver. |
|---|---|
| macOS Mojave | 10.14.1 |
| Kony Visualizer | 8.3.10 |
ソースコード
実際に実装内容やソースコードを追いながら読むとより理解が深まるかと思います。是非ご活用ください。
Auto Layoutとは
部品/Widgetに制約(X軸の中央揃えなど)を付ける事により、画面サイズが変わっても影響を受けないように自動調整する機能。
Auto Layoutを使わなかった場合
| プロパティ | 設定値 |
|---|---|
| Width | 150 DP |
| Height | 150 DP |
| Left | 115 DP |
| Top | 275 DP |
| iPhone X | iPhone SE |
|---|---|
 |
 |
Auto Layoutを使った場合
| プロパティ | 設定値 |
|---|---|
| Width | 150 DP |
| Height | 150 DP |
| Center X | 50 % |
| Center Y | 50 % |
| iPhone X | iPhone SE |
|---|---|
 |
 |
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 |
|---|---|
 |
 |
相対座標指定
-
%比率
座標位置を%比率で指定します。
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 -
垂直/水平
座標位置を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 
-
上下左右隣接
- シナリオ
- box1から
50 Dp右にbox2を配置する - box3から
50 Dp下にbox4を配置する
- box1から
FlexContainerでグループ化して座標位置指定します。FlexContainerの上端/左端が0座標となります。
box1とbox2を選択して右クリック - > Group Into Flex ->
Flex Containerをクリックします。box3とbox4も同じ手順でグループ化します。box1とbox2のFlexContainerをflx1、box3とbox4のFlexContainerをflx2とします。
FlexContainerに制約を付与します。
flx1に水平、flx2の垂直を設定します。flx1をクリック -> Properties ->
FlexContainerをクリックします。項目名 設定値 Layout Type Flow Horizontal Child Widget Align Left to Right 
同じ手順でflx2を設定します。
項目名 設定値 Layout Type Flow Vertical Child Widget Align Top to Bottom 
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 
- シナリオ