Barはアプリ下部にある主にアプリ内の各画面へ遷移することを目的に実装されたものです。Bar内のボタンを作成していきます。このレッスンで使うアイコンはこちらからコピーしてください。コピーしたアイコンは、プロジェクトファイルの「component」にペーストし、アイコンのカラースタイルを「D6D6D6」に変更します。49の透明のRectangleを作成し、その上にダウンロードを行ったアイコンの中の「lv1/icon/tab_home」を下記用のように配置します。上記の2つのオブジェクトを選択し、「lv2/btn/tab」にコンポーネント化をします。※わかりやすいようにグレーに変更を行っています。TabBar3Assetsもしくは、複製し「lv2/btn/tab」を5つ配置し、ボタンを全て選択し、Distributeを行います。このとき両端のマージンを16px開けてください。TabBar4配置を終えたら、プロパティパネルのinstanceから各アイコンを変更し、色をカラースタイルから変更します。TabBar5最後に上記で作成したオブジェクトをまとめて選択し、「lv3/bar/TabBar」にコンポーネント化します。TabBarの完成です。投稿用コンポーネント作成する投稿コンポーネントを作るhomeの中の投稿コンポーネントを作成していきます。初めにユーザーアイコン、ユーザーネームとオプションを表示する部分を作っていきます。54pxのRectangleを「FFFFFF」カラーで配置します。投稿コンポーネント1下記の図18のプロパティで、ユーザーアイコン、ユーザーネームラベル、オプションボタンを垂直中心に配置します。※両端マージンは16px、ユーザーアイコンとユーザーネームラベルのマージンは10pxです。作成したら、全てを選択し「lv2/cell/user」にコンポーネント化します。コンポーネントページに移り、Ellipseを「lv1/img/usericon」にコンポーネント化します。投稿コンポーネント2次に、サムネイルを作成していきます。250pxの3:2のRectangleオブジェクトを作成します。(図19)作成しましたら、Rectangleを「lv1/img/Post」にコンポーネント化します。投稿コンポーネント3文字やアイコンが表示されるベースを作っていきます。114pxで作成し、カラースタイルを「FFFFFF」に設定し配置します。投稿コンポーネント4サムネイルから10px下に、ハートアイコン、コメントアイコン、レシピアイコン、ブックマークアイコンを配置します。※アイコン同士のマージンは10pxにします。アイコンを全て選択し、「lv2/block/icon」にコンポーネント化します。投稿コンポーネント5「lv2/block/icon」の10px下に、テキストラベルを配置し、「lv1/txt/Post」にコンポーネント化を行います。次に、「lv1/txt/Post」の5px下に日付のテキストラベルを配置し、「lv1/txt/date」にコンポーネント化を行います。配置後、2つのテキストラベルを選択し、「lv2/detail/discription」にコンポーネント化を行います。最後に「lv1/line/border」をRectangle一番下に配置します。投稿コンポーネント6上記の作成したオブジェクトをまとめて選択し「lv3/home/Post」にコンポーネント化して、これで投稿コンポーネントの完成となります。投稿コンポーネント最後の工程です。投稿コンポーネントを複製、配置し、アイコン画像、サムネイルの写真を挿入したらホーム画面の完成です。