UI をまとめるスキャフォールド コンポーネントを作成する

マテリアル デザインでは、スキャフォールドは複雑なユーザー インターフェースに標準化されたプラットフォームを提供する基本的な構造です。アプリバーやフローティング アクション ボタンなど、UI のさまざまな部分をまとめ、アプリに統一感のある外観と操作性をもたらします。

バージョンの互換性

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

依存関係

スキャフォールドを作成する

次の例は、Scaffold を実装する方法の完全な例を示しています。トップ アプリバー、ボトム アプリバー、Scaffold の内部状態とやり取りするフローティング アクション ボタンが含まれています。

結果

シンプルなトップ アプリバーとボトム アプリバー、カウンタを反復処理するフローティング アクション ボタンを含むスキャフォールドの実装。スキャフォールドの内部コンテンツは、コンポーネントを説明する単純なテキストです。
図 1. スキャフォールドの実装。

要点

Scaffold コンポーザブルは、マテリアル デザインのガイドラインに沿ってアプリの構造をすばやく組み立てることができる簡単な API を提供します。Scaffold は、複数のコンポーザブルをパラメータとして受け取ります。たとえば以下のような多くの利点があります。

  • topBar: 画面上部のアプリバー。
  • bottomBar: 画面下部にあるアプリバー。
  • floatingActionButton: 画面の右下隅にホバーするボタン。主要なアクションを表示するために使用できます。

上部と下部のアプリバーの両方を実装する方法の詳細な例については、アプリバーのページをご覧ください。

他のコンテナと同様に Scaffold コンテンツを渡すこともできます。innerPadding 値を content ラムダに渡します。この値は、子コンポーザブルで使用できます。

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

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

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

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

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