このレッスンでは、縦や横にスクロールできる、カレンダーアプリ UI のつくり方を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
日付軸の構成要素の作成
ペーストボード上に長方形を描きます。線のチェックを外して塗りだけにして、幅に 44px、高さに 56px を指定します。
もう一つ長方形を描きます。こちらは、幅に 44px、高さに 2px を指定し、線のチェックを外し、塗りの色に緑色を適用します。そして、最初に作成した長方形の上辺に揃えて配置し、不透明度を 0% に変更します。
続けてテキストを 2 つ作成します。片方に「1」を、もう片方に火曜日を表す「火」を入力します。「1」のフォントに DIN 2014 を適用し、font-size に 18px、文字列の配置に中央揃えを指定します。続けて「火」の方に、フォントに源ノ角ゴシック、font-size に 12px、太さに Regular、文字列の配置に中央揃えを指定します。
2 つのテキストを、長方形の中央に配置します。そして、「1」は上のパディングが 10px に、「火」は下のパディングが 10px になるようそれぞれ調整します。
2 つの長方形と 2 つのテキストを選択して、コンポーネント化します。コンポーネント名は date__item にします。これで、日付の軸を構築する部品ができました。
日付の表示状態の作成
作成した date__item コンポーネントにステートを 2 つ追加して、当日を表す状態と、該当月でないことを表す状態を作成します。
まず date__item コンポーネントを選択してから、プロパティインスペクタの初期設定のステートの右横にある＋ボタンを 2 回クリックして、新規ステートを2つ追加します。 「ステート2」の名前を current に、「ステート3」の名前を disabled に変更します。
current ステートを選択し、ボーダーの不透明度を 0% から 100% にして表示された状態にします。次に、disabled ステートを選択し、テキストの不透明度を 40% に変更します。以上で、3種類の日付の状態をコンポーネントに用意できました。
日付軸の作成
最後に、date__item コンポーネントを並べて日付軸を作成します。
まず date__item コンポーネントのインスタンスを作成します。次に、インスタンスをグループ化して、スタックを有効にして、スタックの方向が横になっていることを確認します。その後、グループをダブルクリックしてインスタンスを選択し、13 回コピー & ペーストします。複製し終わったら、スタックの間隔に 1px を指定します。
1 番左のインスタンスのステートを disabled に切り替えて、テキストを「31 日月曜日」に変更します。また、左から 3 番目のインスタンスのステートを current に切り替えて、テキストを「2 日水曜日」に変更します。
日付軸の背景の作成
日付軸と同じ大きさの長方形を作成します。線のチェックを外して、日付軸の背面に配置し、日付軸と長方形をグループ化します。
さらに、日付軸と時間軸の角の空白を埋める大きさの長方形を作成し、線のチェックを外します。
日付軸をコンポーネントに変換
この長方形と日付軸を合わせてコンポーネント化し、名前を date__list とします。
日付軸のテキストを「3 日木曜日」以降も書き換えたら完成です。