Jetpack Compose を使用してアプリのスタイルとテーマを設定する方法

この記事では、Jetpack Compose でアプリケーションのスタイルとテーマを設定する方法を学習します。

Compose は、Android 用の新しい UI フレームワークです (ただし、デスクトップと Web のサポートは開発中です)。これは、古い XML ベースの View システムに取って代わります。

この記事を書いている時点ではまだベータ リリースですが、ライブラリのこの特定の部分が安定版リリースで大幅に変更されることはないと思います。

トピックは次のとおりです:

• XML アプローチの簡単な要約
• XML ベースの色、テーマ、タイポグラフィ (フォント) システムから移行する方法
• わずか数行のコードでアプリのライト テーマとダーク テーマを設定する方法
• 新しい Kotlin ベースのスタイル情報をコンポーザブルで使用する方法
• テキスト コンポーザブルを具体的にスタイル設定する方法

先に進む前に、コンポーザブルとは何かを理解することが重要です。この記事で既に説明したように、ここでその概念を説明することはしません。

XML リソースを使用して Android アプリのスタイルを設定する方法

いつものように、これらのトピックの背後にある動機と、その歴史について少しお話したいと思います。気にしない場合は、次のセクションにスキップして、実用的な内容に進んでください。

Android リソース

少なくとも私の意見では、Android アプリ リソース システムは、Android チームが高評価に値するものです。しかし、すべての設計上の決定と同様に、ある状況では機能が別の状況では欠陥になります。

具体的に言うと、プラットフォーム開発者とアプリケーション開発者の両方にとって最大の課題の 1 つは、私がローカライズされたリソースと呼ぶものを作成することです。 .これは、次のようなアプリを構築するという課題について言及しています。

• さまざまな言語とアルファベットでテキストとグラフィックを表示する
• さまざまなフォーム ファクタ (寸法、密度など) に対応するルック アンド フィール

これらは 2 つの一般的な例にすぎません。他にもたくさんあります。リソース システムは、プラットフォームがコンパイル時に選択できるローカライズされたリソースをアプリ開発者が提供できる場所を提供します。これにより、定型コードを自分で書く必要がなくなります。

機能または欠陥?

ローカライズされた文字列リソースに必要なボイラープレート コードを自分で管理したくはありませんが、XML を書くことを楽しんでいるわけではありません。

実際、XML でやりたいことはほとんどありません Kotlin や Swift などの現代的で慣用的でエレガントな言語で。個人的な好みはさておき、XML リソースが常に理想的であるとは限らない、より技術的な理由があります。

これは、プラットフォームの開発者/エンジニアを批判するものではないことに注意してください。これは、設計上の決定に常にメリットとコストが伴うことを観察したにすぎません。

XML ベースのリソースを JVM ベースのアプリケーション コードに統合するには、必ず翻訳レイヤーが必要です。 (編集) と プラットフォーム ブリッジ (API)。これは、プラットフォーム開発者とアプリケーション開発者の両方に困難をもたらす可能性があります。

私が遭遇した 2 つの一般的な問題は次のとおりです。

• リソースを提供するプラットフォーム API と密結合したくない場所でリソースにアクセスしたい
• View の外観を変更する (つまり、リソースのスタイルとテーマ内で定義されたものをオーバーライドする) ためだけに、ばかげたボイラープレート コードを書かなければなりません

根本的な問題 関係者全員が密結合 View システムと Android リソース システム (これら自体は密接に結合されています) に。

プラットフォーム開発者にとって、これは、巨大で古いコードベースの上に構築するか、それらを回避する必要があることを意味します。また、新しい機能を古い Android OS バージョンで動作させるようにしなければならず、それは非常に報われない仕事になることも付け加えてください。

多くの場合、私たちアプリケーション開発者は、多くのボイラープレート コードを作成します。 ハッキーな回避策 ワンライナーであるべきだと直感的に思えるもののために。これらのリソースを取得するためのメイン API は Context であることは言うまでもありません 、これは本当にメモリリークしたくないクラスです。

Jetpack Compose に入ります。

Jetpack Compose でテーマ、色、フォントを設定する方法

古いシステムのレビューは終わったので、Android アプリケーションのスタイルとテーマを設定する、よりきれいで簡単な方法を探ってみましょう。私はこれを実用的に保つと言いましたが、1つの点を許してください。

Kotlin でその作業を行うことになるため、これは 1 つの非常に重要なことを意味します。それは、私たちとプラットフォーム開発者の両方が、翻訳 (コンパイル) と API ブリッジ (Android の R クラスと Context ) XML と JVM の間。

簡単に言えば、これはボイラープレート コードがはるかに少ないことを意味します 、および実行時のより多くの制御 .

この記事の実際的な部分については、説明した順序でこのプロセスに従うことをお勧めします。新しいアプリでこのコードを記述するときに従う順序で構造化しました。

Colors.xml リソースを Kotlin Compose に置き換える方法

アプリケーションの配色をまだ決めていない場合は、Material Design の公式 Web サイトで入手できるさまざまなリソースを使用することをお勧めします。試してみてください:

• カラーパレット
• カラー ツール

明色および暗色のアプリ テーマをサポートする予定がある場合 (簡単に説明します)、白いテキストをサポートする配色と、黒いテキストをサポートする配色を選択してみてください。

Color.kt のような名前のファイルを作成し (名前は関係ありません)、不変の val で埋めます。 ues:

import androidx.compose.ui.graphics.Color

val primaryGreen = Color(0XFF00bc00)
val primaryCharcoal = Color(0xFF2b2b2b)
val accentAmber = Color(0xFFffe400)

val textColorLight = Color(0xDCFFFFFF)
val textColorDark = Color(0xFFf3f3f3)
val gridLineColorLight = Color.Black
//...

Color.Black のような定義済みの値を使用することもできます または、独自の ARGB Hex 値を指定してください。

ARGB Hex は、「0XFF00bc00 " は、翻訳させてください:

• 最初の 2 文字 0x これが 16 進数であることをコンパイラに伝える
• 2 番目の 2 文字、"FF " または "DC "、透明度/不透明度/A を表す 16 進数の lpha
• 残りの 6 文字のペアは R を表します エド、G リーンとB ルー
  

フォントを追加して fontFamily を置き換える方法 属性

タイポグラフィ（フォント）も非常に扱いやすいです。これは、Kotlin のデフォルト引数が非常に役立つ種類のものです。

Type.kt のような名前のファイルを作成し (名前は問題ありません)、Typography を作成します。 クラス...:

val typography = Typography(
    body1 = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    ),

    button = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Bold,
        fontSize = 32.sp
    ),

    caption = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 12.sp
    )
)
//...

...そしていくつかの TextStyle クラス:

//...
val mainTitle = TextStyle(
    fontFamily = FontFamily.Default,
    fontWeight = FontWeight.Light,
    fontSize = 48.sp,
    textAlign = TextAlign.Center
)

fun dropdownText(color: Color) = TextStyle(
    fontFamily = FontFamily.Default,
    fontWeight = FontWeight.Normal,
    fontSize = 32.sp,
    textAlign = TextAlign.Center,
    color = color
)
//...

public 関数または値を提供するかどうか (var を使用しないことをお勧めします) ここ) は、個々の好みと現在の要件次第です。

Jetpack Compose でアプリのテーマを作成する方法

コンポーザブルでテーマを使用する前に最後に構成する必要があるのは、MaterialTheme @Composable です。 . GraphSudokuTheme というファイルに明るいカラー パレットと暗いカラー パレットが含まれています。

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

private val LightColorPalette = lightColors(
    primary = primaryGreen,
    secondary = textColorLight,
    surface = lightGrey,
    primaryVariant = gridLineColorLight,
    onPrimary = accentAmber,
    onSurface = accentAmber
)

private val DarkColorPalette = darkColors(
    //main background color
    primary = primaryCharcoal,
    //used for text color
    secondary = textColorDark,
    //background of sudoku board
    surface = lightGreyAlpha,
    //grid lines of sudoku board
    primaryVariant = gridLineColorLight,
    onPrimary = accentAmber,

    onSurface = accentAmber

)

@Composable
fun GraphSudokuTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {

    MaterialTheme(
        colors = if (darkTheme) DarkColorPalette else LightColorPalette,
        typography = typography,
        shapes = shapes,
        content = content
    )
}

コンポーザブルとは何かについては既によく知っているはずなので (かなりの警告をしました)、ここで唯一新しいのは darkTheme: Boolean = isSystemInDarkTheme() です。 .

簡単に説明すると isSystemInDarkTheme() は、互換性のある Android デバイスに対して、明るいテーマまたは暗いテーマのユーザー設定を要求する呼び出しです。

ブール値を返します colors = if (darkTheme) DarkColorPalette else LightColorPalette などの三項 (条件付き) 代入式で使用できます .

それは実際にそれです。色、フォント、および 2 つのテーマを数分で定義します。

Compose でテーマを使用する方法

アプリでこのテーマを使用する時が来ました。 2 つの主要な画面しかないこのアプリでは、アクティビティを コンテナー として使用します。 コンポーザブルの場合:

class NewGameActivity : AppCompatActivity(), NewGameContainer {
	//...
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
		//...

        setContent {
            GraphSudokuTheme {
                NewGameScreen(
                    onEventHandler = logic::onEvent,
                    viewModel
                )
            }
        }
		//...
    }

setContent {} を呼び出しているところならどこでも 初心者向けの私の提案は、すぐにテーマのコンポーザブルをその中に配置することです。これにより、スタイル情報がネストされた各コンポーザブルにカスケード/継承します。 .

これで完了です。

スタイルとテーマをオーバーライドする方法

できることなら、明るいパレットと暗いパレットに必要な色を含めてみてください。このように、 MaterialTheme.colors.<Color> を呼び出すと 、システムは適切なパレットを選択するために必要な条件付きロジックを処理します:

@Composable
fun NewGameContent(
    onEventHandler: (NewGameEvent) -> Unit,
    viewModel: NewGameViewModel
) {
    Surface(
        Modifier
            .wrapContentHeight()
            .fillMaxWidth()
    ) {
        ConstraintLayout(Modifier.background(MaterialTheme.colors.primary)) { 
        	//...
        }
        //...
      }
}      
        

ただし、独自の条件付きロジックを作成する方が適切な場合もあります...または、怠惰になりました。幸いなことに、Compose はそのような構成の多くをプロパティとして利用できます:

@Composable
fun DoneIcon(onEventHandler: (NewGameEvent) -> Unit) {
    Icon(
        imageVector = Icons.Filled.Done,
        tint = if (MaterialTheme.colors.isLight) textColorLight 
        else textColorDark,
        contentDescription = null,
        modifier = Modifier
            .clickable(
            //...
            )
    )
}

MaterialTheme.Colors.isLight それらがどのモードにあるかを示すブール値を返し、そこから別の Ternary Assignment を使用できます。

テキスト コンポーザブルのスタイルを設定する方法

style を設定するだけです テキスト スタイルの 1 つに等しい引数 (MaterialTheme から来ているかどうか) または Type.kt 内のスタイルの 1 つ ):

Text(
    text = stat.toTime(),
    style = statsLabel.copy(
        color = if (isZero) Color.White
        else MaterialTheme.colors.onPrimary,
    fontWeight = FontWeight.Normal
    ),
    modifier = Modifier
        .wrapContentSize()
        .padding(end = 2.dp, bottom = 4.dp),
        textAlign = TextAlign.End
)

TextStyle 独自の copy を持っています 何かを上書きする必要がある場合に備えて、関数はすぐに使用できます。

以上です！ Jetpack Compose を使用してアプリケーションのスタイルとテーマを設定する方法を理解できました。読んでくれてありがとう:)

ソーシャル

Instagram はこちら、Twitter はこちらです。

私のチュートリアルとコースの一部です

https://youtube.com/wiseass https://www.freecodecamp.org/news/author/ryan-michael-kay/ https://skl.sh/35IdKsj (Android Studio による Android の紹介)