TopAppBar
コンポーザブルを使用して、ユーザーがアプリ内の機能に移動してアクセスできるように、トップ アプリバーを作成します。
バージョンの互換性
この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。
依存関係
トップ アプリバー用のコンポーザブルを作成する
ユーザーがコンテンツ領域を下にスクロールすると閉じ、ユーザーがコンテンツの上部までスクロールすると開く MediumTopAppBar
コンポーザブルを使用して、上部のアプリバーを作成します。
コードに関する主なポイント
TopBar
が設定された外側のScaffold
。- 単一の
Text
要素で構成されるタイトル。 - 1 つのアクションが定義されたトップバー。
- アクションを実行する
onClick
ラムダを含むIconButton
アクション。 - アイコン画像とコンテンツの説明テキストを含む
Icon
を含むIconButton
。 - Scaffold の内部コンテンツのスクロール動作は
enterAlwaysScrollBehavior()
として定義されます。これにより、ユーザーが内部コンテンツを上にスワイプするとアプリバーが閉じ、ユーザーが内部コンテンツを下にスワイプするとアプリバーが開きます。 - タイトルを含む
MediumTopBar
に加えて、次のものも使用できます。TopAppBar
: 多くのナビゲーションやアクションを必要としない画面に使用します。CenterAlignedTopAppBar
: プライマリ アクションが 1 つの画面に使用します。タイトルはコンポーネント内に中央揃えされます。MediumTopAppBar
: 適度な量のナビゲーションとアクションを必要とする画面に使用します。LargeTopAppBar
: 多くのナビゲーションとアクションを必要とする画面に使用します。MediumTopAppBar
よりも多くのパディングを使用し、追加のアイコンの下にタイトルを配置します。
結果
このガイドを含むコレクション
このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=ja)
ホーム画面のスキャフォールドを作成する
標準化されたプラットフォームを使用して複雑なユーザー インターフェースを作成する方法を学びます。スキャフォールドは UI のさまざまな部分をまとめ、アプリに統一感のある外観と操作感を与えます。
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=ja)
インタラクティブなコンポーネントを表示する
コンポーズ可能な関数を使用して、マテリアル デザインのデザイン システムに基づいて美しい UI コンポーネントを簡単に作成する方法を学びます。
ご質問やご意見がある場合
よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。