アプリ バーとヘッダー コンポーネントは、アプリ キャンバスの上部にある専用のバーで、ブランド化、トップレベルのナビゲーション、アプリ コントロールへのアクセスなど、アプリ関連の重要な機能を表示するようにカスタマイズできます。
一貫したアプリ バーとヘッダー レイアウトを使用して、アプリ内検索などの主要なコントロールを UI 全体の標準の場所に配置します。
解剖学
アプリバーとヘッダーにはさまざまな要素を含めることができます。以下のいずれかの方法で設定できます。
- アプリヘッダー：アプリヘッダーとして設定すると、コンポーネントにはオプションのテキスト用のスペースが確保され、アイコンとボタンは最小限に抑えられます。通常、画面タイトルと戻る矢印が含まれます。
- アプリバー:アプリバーとして設定すると、アイコン、タブ、ボタンなどが表示されます。一般的な要素としては、アプリアイコンとナビゲーションオプションなどがあります。
どちらのバージョンにも、アプリ内検索や設定などのアプリコントロールを含めることができます。
1. 戻る矢印
2. 画面タイトル
3. ボタン
4. アプリのコントロール
5. アプリアイコン
6. メインナビゲーション（タブ）
仕様 – アプリバー
プライマリナビゲーションを備えたアプリバー – 中央揃え
プライマリナビゲーションを備えたアプリバー – 左揃え
プライマリナビゲーションを備えたアプリバー – 折りたたまれた状態（タブの代わりにドロワー）
仕様 – アプリヘッダー
中央揃えのタイトルが付いたアプリのヘッダー
単一のアプリコントロールを備えたアプリヘッダー
複数のアプリ コントロールを含むアプリ ヘッダー
1 つのボタンがあるアプリ ヘッダー
複数のボタンがあるアプリヘッダー
テキストオーバーフローのあるアプリヘッダー
スタンドアロンのタブバーを備えたアプリヘッダー
カスタマイズ
アプリバーとヘッダーの外観を変更することで、ブランドイメージを表現できます。変更内容には以下のようなものがあります。
- カスタムアイコン
- カスタムフォント
- アクティブ、非アクティブ、無効なボタンの外観を設定する
- ボタンのサイズと配置を設定する
例
