参考
App bars: top - Material Design
概要
現在のスクリーンに関連する情報やアクションを表示する
使い方
現在のスクリーンに関連する情報やアクションを表示する。 以下に使用される
- ブランディング
- 画面タイトル
- ナビゲーション
- アクション
指針
- Persistent
Top app barsはそれぞれの画面のトップに表示され、スクロールによって非表示になる
- Guiding
- アプリを通じてユーザーをガイドするための方法を提供する
- Conisstent
- 一貫性のある位置とコンテンツがあり、親しみやすくなる
スタイル
- Regular
- Contextual action bar
- 選択したアイテムへのアクションを提供する
- アクションが実行されるか却下されるまでアクティブのままでいる
構成
構成要素
- Container
- Navigation icon (optional)
- Title (optional)
- Action items (optional)
- Overflow menu (optional)
左→右への言語の推奨配置
- （左端）ナビゲーション
- タイトル
- アクション（Optional）
Overflow menu（Optional）
Bar
Barは様々な高さが利用可能である
- Regular
- Prominent
- Dense (desktop only)
- Prominent dense (desktop only)
Prominent
ProminentなTop app barsは以下の用途で利用される
- 長いタイトル
- 画像の格納
- Top app barsの存在感を高める
Dence
Top app barsはより密集したレイアウトに対応するために凝縮される場合がある
Prominent dense
ProminentとDenseを合わせた感じ
Images in bars
Barは画像を内包することが可能。Prominentは画像を使用することを推奨されている
Top app barsのテキストとアイコンが判別できるような画像を配置する必要がある
Navigation icon
Navigation iconはOptionalで左側に配置される。
以下のいずれかの形式を使用できる
- メニューアイコン: navigation drawerを開く
- 上矢印: アプリの回想をナビゲートする
- 戻る: 前のスクリーンに戻る
Title
以下を説明する - ユーザーの現在いる画面 - ユーザーが現在選択しているもの - 使用されてるアプリ
注意点
Top app barsのスタイルがregularの場合は改行してはいけないTop app barsのスタイルがregularの場合は文字列を省略してもいけないTop app barsのスタイルがregularの場合は文字列を小さくしてもいけない
要はProminent使えやってことか
Action items and overflow menu
- 最も使うアクションを左側に配置
- Overflow Menuは一番右に配置する
振る舞い
Scrolling
- 上スクロールで
Top app barsが非表示になる - 下スクロールで
Top app barsが表示される Top app barsは他のコンテンツよりも標高が高く表示される- 下スクロールによって
Top app barsを非表示にしないことも可能。その場合はTop app barsのelevationがコンテンツより上になる - Prominentの場合はスクロールによって
Top app barsがprominentからregularに変化する
Nesting actions
- 画面サイズを変更すると
Top app barsのサイズが変更され、アクションはOverflow Menuに統合される - アクションは右のものからOverflow Menuに統合されていく
- 優先度が高いものは左に配置しておけば消えにくくなる
Contextual action bar
使い方
Top app barsは選択されたアイテムにアクションを提供するContextual action barに変換できる
例
ユーザーがギャラリーから写真を選択するとTop app barsは選択した写真に関連するアクションを含むContextual action barに変わる
Top app bars → Contextual action barでの変化
- Barの色が変わる
- ナビゲーションアイコンが
closeに変わる - BarのTitleが変わる
- BarのActionが変わる
構成要素
- Close button (ナビゲーションアイコンの代わり)
- Contextual title
- Contextual actions
- Overflow menu (optional)
UIKitとの比較
- AppbarとNavigationbarってネーミングのコンテキストが異なる感じが面白い。
- ProminentはiOSでいうLarge title的なやつなのかな
所感
Contextual action barみたいなモードに即したComponentがあるのは便利- 同じことをiOSで実装するのは面倒
- 読んでいると
App bars bottomよりも優先してその画面に対するアクションを配置してほしそうに感じた。要素が多くてもoverflow menuとかもあるし。
