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 スタイル内で条件付きスタイルを定義するために使用できる状態（isEnabled、isPressed、isChecked、カスタム状態など）を提供します。

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

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

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

compose = "1.12.0-alpha03"

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" }
次へ
スタイルの基礎