この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
CX事業本部の平内（SIN）です。
APLドキュメントで、mainTemplateに各種のアイテムを配置する際に、パートごとにアイテムの配置を定義する事ができるConteinerは、非常に便利です。
しかし、Containerによる配置は、動作を理解していないと、画面設計の作業が、ちょっと混乱してしまうことになるでしょう。
今回は、Containerのプロパティの中で、内部に包括するアイテムの配置に比較的重要なものを、個人的な忘備録として纏めさせて頂きました。
2 動作確認用のTextコンポーネント
はじめに、動作確認のために、基準となるTextコンポーネントを作成しました。
オーサリングツールで、「最初から作成」を選択し、mainTemplateのしたに、Containerを置き、その中に、Textコンポーネントを配置しました。
この後の確認作業で、認識しやすいように、取り合えずtextAlignと、textAlignVerticalを、両方Centerにしています。
同じ要領で、３つのTextコンポーネントを配置して準備完了です。
jsonは、以下のとおりです。
{
"type": "APL",
"version": "1.1",
"settings": {},
"theme": "dark",
"import": [],
"resources": [],
"styles": {},
"onMount": [],
"graphics": {},
"commands": {},
"layouts": {},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"items": [
{
"type": "Text",
"textAlign": "center",
"textAlignVertical": "center",
"text": "Test001"
},
{
"type": "Text",
"textAlign": "center",
"textAlignVertical": "center",
"text": "Test002"
},
{
"type": "Text",
"textAlign": "center",
"textAlignVertical": "center",
"text": "Test003"
}
]
}
]
}
}3 Container
それでは、Containerのプロパティの確認を進めます。
(1) direction
子コンポーネントを配置する方向です。これにより、Container内の主軸と交差軸が決定します。
- column 主軸（配置の方向）が縦 (デフォルト)
- row 主軸（配置の方向）が横
column (デフォルト)
row
(2) alignItems
交差軸方向で、子を配置する方法です。
- stretch (デフォルト)
- center
- start
- end
- baseline
stretch (デフォルト) / center
start / baseline
end
(3) justifyContent
子を配置し終わった後、主軸方向にスペースが余っている場合に、そのスペースを何処にもっていくかの指定です 。
- start (デフォルト)
- end
- center
- spaceBetween
- spaceAround
start (デフォルト)
end
center
spaceBetween
spaceAround
(4) Width / minWidth / maxWidth
Container自身の横幅の指定です。
下記は、widthを100に設定したため、含まれてTextが折り返している様子です。
(5) Height / minHeight / maxHeight
Container自身の縦幅の指定です。
下記は、heightを130に設定したため、含まれてTextが、一部見切れている様子です。
4 最後に
簡単ですが、Containerで、含まれるアイテムの配置に比較的重要なものを列挙しました。
Containerの中に、Containerを入れたり、Frameを挿入することで、APLのドキュメントは、どんどん複雑にはなりますが、1つ1つのContainerを分けて考えることで、少しは、アイテムの配置作業が、やりやすくなるかも知れません。
0
