トップ アプリバーを表示する

TopAppBar コンポーザブルを使用して、ユーザーがアプリ内の機能に移動してアクセスできるように、トップ アプリバーを作成します。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

トップ アプリバー用のコンポーザブルを作成する

ユーザーがコンテンツ領域を下にスクロールすると閉じ、ユーザーがコンテンツの上部までスクロールすると開く MediumTopAppBar コンポーザブルを使用して、上部のアプリバーを作成します。

コードに関する主なポイント

  • TopBar が設定された外側の Scaffold
  • 単一の Text 要素で構成されるタイトル。
  • 1 つのアクションが定義されたトップバー。
  • アクションを実行する onClick ラムダを含む IconButton アクション。
  • アイコン画像とコンテンツの説明テキストを含む Icon を含む IconButton
  • Scaffold の内部コンテンツのスクロール動作は enterAlwaysScrollBehavior() として定義されます。これにより、ユーザーが内部コンテンツを上にスワイプするとアプリバーが閉じ、ユーザーが内部コンテンツを下にスワイプするとアプリバーが開きます。
  • タイトルを含む MediumTopBar に加えて、次のものも使用できます。
    • TopAppBar: 多くのナビゲーションやアクションを必要としない画面に使用します。
    • CenterAlignedTopAppBar: プライマリ アクションが 1 つの画面に使用します。タイトルはコンポーネント内に中央揃えされます。
    • MediumTopAppBar: 適度な量のナビゲーションとアクションを必要とする画面に使用します。
    • LargeTopAppBar: 多くのナビゲーションとアクションを必要とする画面に使用します。MediumTopAppBar よりも多くのパディングを使用し、追加のアイコンの下にタイトルを配置します。

結果

図 1. 中程度のトップ アプリバー

このガイドを含むコレクション

このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

標準化されたプラットフォームを使用して複雑なユーザー インターフェースを作成する方法を学びます。スキャフォールドは UI のさまざまな部分をまとめ、アプリに統一感のある外観と操作感を与えます。
コンポーズ可能な関数を使用して、マテリアル デザインのデザイン システムに基づいて美しい UI コンポーネントを簡単に作成する方法を学びます。

ご質問やご意見がある場合

よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。