このレッスンでは、縦や横にスクロールできる、カレンダーアプリ UI のつくり方を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
時間軸の構成要素の作成
ペーストボード上に長方形を描きます。線のチェックを外して塗りだけにして、幅に 61px、高さに 46px を指定します。
もう一つ長方形を描きます。こちらは、幅に 12px、高さに 1px を指定し、線のチェックを外し、塗りの色に薄いグレーを適用します。そして、最初に作成した長方形の上に配置して、右揃え縦中央を適用します。
続けてテキストエリアを作成し、「1:00」と入力します。フォントに DIN 2014 、font-size に 14px、文字列の配置に右揃えを指定します。このテキストを、最初に作成した白い長方形の中央に配置します。
3 つのパーツを全て選択してグループ化します。これで、時間軸を構築する部品ができました。
時間軸の作成
作成したグループをリピートグリッドに変換します。下方向に引き伸ばしてから、グリッドの間隔を 1px に調整し、リピートグリッドの高さを 1127px にします。
このレッスンのパート 1 で作成したスケジュール表のコンポーネントを、リピートグリッドの右側に移動します。時間軸に引かれているボーダーと、スケジュールのセルのボーダーが揃うことを確認します。
時間軸の背景の作成
最後に、時間軸の背景を用意します。
まず長方形を作成します。長方形の幅は時間軸に揃え、高さはスケジュール表に揃えます。線のチェックを外して塗りだけにして、時間軸の背面に移動します。
続けて、作成した長方形を複製して最前面に配置し、塗りの色に薄いグレーを、幅に 1px を指定します。
時間軸をコンポーネントに変換
2 つの長方形とリピートグリッドを選択して右揃えに整列し、コンポーネントに変換します。コンポーネント名は time__list とします。
時間軸内の時間を表すテキストを「1:00」から「24:00」まで書き換えたら完成です。