Compose のスタイル

Style API は、Jetpack Compose の要素とコンポーネントをカスタマイズまたは「スタイル設定」するための新しいパラダイムです。これまで、この処理は修飾子を使用して行われてきました。より簡単で詳細なカスタマイズを実現するように設計されています。

Styles API は、フォームファクタ間の柔軟性を向上させ、パフォーマンスを改善し、カスタムのデザインシステムの作成を容易にします。カスタム コンポーネントが必要ない場合でも、Styles API はデザインシステムに多くのメリットをもたらします。

重要な違いは、スタイルは修飾子の代わりにはならないものの、パディングや色などのスタイル設定パラメータの代わりになることです。 柔軟性とパフォーマンスを向上させるために、パラメータではなくスタイルを使用することをおすすめします。

スタイルのメリット

  • 状態ベースのスタイル設定を簡素化: この API は、さまざまな状態（ホバー、フォーカス、押下など）に基づいて変化するスタイルをより簡潔かつ宣言的に定義する方法を提供します。修飾子システムと比較して、ボイラープレート コードが大幅に削減されます。
  • アニメーションによる状態遷移を改善: Style API を使用すると、理想的なパフォーマンス特性で状態間のスタイル プロパティを組み込みアニメーション化できます。現在の animateColorAsState アプローチで発生する再コンポーズを回避できます。
  • コンポーネント API を効率化: カスタマイズ用の単一のスタイル パラメータを導入することで、コンポーネント API が大幅に簡素化され、柔軟性が向上します。
  • 再コンポーズが減り、修飾子よりもパフォーマンスが向上: スタイルは Compose の描画フェーズとレイアウト フェーズで実行され、コンポジション フェーズはスキップされます。
  • API の標準化されたセット: スタイルのプロパティの標準セットにより、任意のコンポーネントをスタイル設定できます。

基本コンセプト

コンセプト 説明
Style スタイル設定可能なプロパティの標準セットを使用して、UI 要素の外観を定義するインターフェース。CSS スタイルに似ており、ローカルまたはテーマを使用してカスタマイズできます。スタイルは相互に上書きされます。プロパティを 2 回設定すると（background() など）、最終的な値は 1 つになります。
StyleScope スタイル内の applyStyle() 関数のレシーバー スコープ。視覚プロパティ（パディング、背景、ボーダーなど）を定義し、現在の StyleState にアクセスする関数を提供します。
StyleState スタイル内で使用して条件付きスタイル設定を定義できる状態（isEnabled、isPressed、isChecked、カスタム状態など）を提供します。

はじめに: 依存関係を追加する

独自のプロジェクトで API を使用するには、Jetpack Compose Foundation の最新のアルファ版を使用していることを確認してください。settings.gradle.kts ファイルで、使用するリポジトリのリストにスナップショット Maven リポジトリを追加します。

libs.versions.toml または app/build.gradle.kts ファイルで、Compose のバージョンを 1.11.0-alpha06 に設定します。

compose = "1.11.0-alpha06"

androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }