このレッスンでは、縦や横にスクロールできる、カレンダーアプリ UI のつくり方を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
カレンダーアプリの外観を作成
このレッスンのパート 1 ～ 3 で作成したスケジュール表、時間軸、日付軸を、アードボード calendar01 の上に移動します。その際、ヘッダー用のスペースを確保するため、Y座標 80px より上は空白になるように配置します。
次に、アセットのコンポーネント内にある navigation と system-bar を、アートボード上部の空白の領域に重ねて配置します。
そのまま、アートボードの高さを 1308px に変更します。以上で、カレンダーアプリの外観は完成です。
ヘッダーの位置を固定する
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックし、プレビューウィンドウを開きます。すると、縦にスクロールしたときに、ヘッダーも一緒に移動することがわかります。
これを解消するために、アートボード上の navigation、system-bar、date__list を選択し、「スクロール時に位置を固定」をチェックします。再度デスクトッププレビューで確認すると、スクロール時に、日付軸から上の要素が固定されることがわかります。
横にドラッグした時の動きを作成
カレンダーを横にもドラッグできるようにします。まず、アートボード calendar01 を複製します。複製したアートボードの名前を calendar02 にします。
calendar02 の date__list 内にある日付のグループを選択し、Shiftキーを押しながら、左方向へ一週間分移動します。schedule__body も同じだけ左方向へ移動します。これがドラッグした後の見た目になります。
プロトタイプモードに切り替えて、calendar01 の日付のグループを選択します。青い矢印を calendar02 のアートボードまで引き伸ばし、その上で離してワイヤーを接続します。トリガーに「ドラッグ」を設定します。
次に、calendar02 の日付のグループを選択し、青い矢印を calendar01 のアートボードに接続します。トリガーに「ドラッグ」を設定します。
これで、日付軸を横にドラッグするインタラクションの設定は完了です。
スケジュール欄も横にドラックできるようにするために、 calendar01 と calendar02 の schedule__body にも同様の設定をします。
プレビューして動きを確認
最後に、デスクトッププレビューを使って、横にドラッグした時の挙動を確認します。
日付や、スケジュールの登録部分を左にドラッグすると、表記を一週間分切り替えられます。また、右にドラッグすると、元の表示に戻せます。
以上で、スクロールできるカレンダーアプリの UI デザインの完成です。