Compose のスタイル

Style API は、Jetpack Compose の要素とコンポーネントをカスタマイズ（スタイル設定）するための新しいパラダイムです。従来は、修飾子を使用していました。より簡単で高度なカスタマイズを実現するように設計されています。

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

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

スタイルのメリット

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

基本コンセプト

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