Androidアプリで色を調べる

Jetpack composeを使用すると、画面の作成がはるかに簡単になりますが、独自の作業方法が付属しており、難しい場合があります。

私が苦労していたトピックの1つは、色です。

Jetpackの例によるとMaterialTheme、古い学校のXMLテーマではなく使用する必要があります。私もXMLテーマの専門家ではなかったので、マテリアルテーマを掘り下げることにしました。大きな話題なので、この記事では色だけを取り上げます。

ご存知かもしれませんが、アプリのJetpack作成機能を作成するたびに、プロジェクトによってテーマが自動的に追加されます。見てみましょう。

@Composable
fun MaterialTheme(
    colors: Colors = MaterialTheme.colors, // WILL BE FOCUSED
    typography: Typography = MaterialTheme.typography, // WILL BE COVERED LATER
    shapes: Shapes = MaterialTheme.shapes, // WILL BE COVERED LATER
    content: @Composable () -> Unit
)

しかし、これらの色はどういう意味ですか、アプリでの使用法は何ですか、そしてそれらをどのように使用する必要がありますか？マテリアルデザインのウェブサイトを見てみましょう：

原色は、アプリの画面とコンポーネントで最も頻繁に表示される色です。

二次色は、製品にアクセントを付けて区別するためのより多くの方法を提供します。

原色を使用して、アプリのカラーテーマを作成できます。これには、暗い原色と明るい原色のバリエーションが含まれます。

原色と同じように、二次色にも暗い色と明るい色を含めることができます。

表面の色は、コンポーネントの表面に影響を与えます。

背景色は、スクロール可能なコンテンツの背後に表示されます。

エラーの色は、コンポーネントのエラーを示します。

総括する：

一次および二次（オプション）の色はブランドを表します。

表面、背景、エラーの色は通常、ブランドを表すものではありません。

つまり、一次/二次色は目立ち、ブランドを代表するものでなければならず、残りはもっと目立たないものでなければなりません。

マテリアルテーマのデフォルトの色は、通常、ブランド以外の色では白と黒ですが、理解を深めるために、変数ごとに異なる色を使用します。

backgroundColorほとんどの場合、コンテンツの色は背景によって決定されるため、この記事で作業します。

UI要素に色を設定する

カードレイアウトをText（特定の色なしで）追加し、テーマの色を背景色として指定します。

コード：

結果：

それで、それはどのように機能しますか？ビューコンポーネントはどのように色を読み取り、内部コンポーネントに色の変更を適用しますか？それTextは私たちの場合の見解です。

カードレイアウト（またはいずれか）を実行すると、この拡張機能が表示されます。ほとんどの場合、コンテンツの色がどのように選択されるかがわかります。詳細はこちら

fun Colors.contentColorFor(backgroundColor: Color): Color {
    return when (backgroundColor) {
        primary -> onPrimary
        primaryVariant -> onPrimary
        secondary -> onSecondary
        secondaryVariant -> onSecondary
        background -> onBackground
        surface -> onSurface
        error -> onError
        else -> Color.Unspecified
    }
}

UIコンポーネントのデフォルトのテーマ

理想的には、すべてのUIの色を設定する必要はありません。一部のUIは、デフォルトでさまざまな色のセクションから読み取られますが、それらのいくつかに言及することをお勧めします。

理解を深めるために、これらのUIコンポーネントをそれぞれ追加し、すべての色をテーマから読み取ります。手動で色を追加することはありません。

それらを1つずつ見ていきましょう。

ステータスバー

• デフォルトの色：primaryVariant

画面にさまざまなレイアウトを表示するために使用されますegbottomSheetまたはフローティングアクションボタン。

• デフォルトの色：background
• コンテンツの色：onBackground

Scaffold(
    topBar = {
        /****/
    }
)

• デフォルトの色：primarySurface明るいテーマ：プライマリ/暗いテーマ：表面）
• コンテンツの色：onPrimary(L)/onSurface(D)

TopAppBar(
    title = {
        Text(text = "Toolbar text")
    },
    actions = {
        IconButton(onClick = { }) {
            Icon(Icons.Filled.Favorite, contentDescription = null)
        }
    }
)

       


       

• デフォルトの色：surface
• コンテンツの色：onSurface

Card(
    modifier = Modifier
        .padding(8.dp)
        .fillMaxWidth()
        .height(100.dp)
) {
    Text(text = "Card Default")
}

       

• デフォルトの色：surface
• コンテンツの色：onSurface

画面の主要なアクションを定義するために使用されます。

• デフォルトの色：secondary
• コンテンツの色：onSecondary

FloatingActionButton(onClick = { }) {
    Text(text = "FAB", textAlign = TextAlign.Center)
}

       

• 背景色：primary
• コンテンツの色：onPrimary

Button(onClick = { }) {
    Text(text = "Regular button")
}

       

• 背景色：transparent
• コンテンツの色：primary

TextButton(onClick = { }) {
    Text(text = "Text button")
}

       

• 背景色：surface
• コンテンツの色：primary

OutlinedButton(onClick = { }) {
    Text(text = "Outlined button")
}

       

• デフォルトの色（チェック済み）：secondaryVariant/secondaryVariantAlpha
• デフォルトの色（チェックなし）：surface/onSurface

Switch(checked = true, onCheckedChange = {})

Switch(checked = false, onCheckedChange = {})

       

• 背景色：onSurface.copy(alpha = BackgroundOpacity)
• テキストの色：onBackground
• 結論（通常）：onSurface.copy(alpha =
TextFieldDefaults.UnfocusedIndicatorLineOpacity)
• 結論（エラー）：onError

総括する：

• すべてのUIが続くわけではありませんcolor/<onColor>パターンに従うわけではありません。
• UI要素の実装を実行すると、デフォルトの色が設定されます。覚える必要はありません。ただし、基本を知っておくと便利です。

• 、、、、をそれぞれ背景色として設定onPrimaryしましょう。onSecondaryonErroronSurfaceonBackground

val Unspecified = Color(0f, 0f, 0f, 0f, ColorSpaces.Unspecified)

onBackground = Color(0xFF000000)

• テキストが実際にそこにあるため、UIテストに合格しますが、私たちはそれを認識しません。
• Color.Unspecified色は実際に適切に設定されており、そもそも誰が色について考えるのでしょうか。
• ユーザー変更のテーマ（明るい->暗い）では、ユーザーエクスペリエンスが最適ではなくなる可能性があります。

ダークテーマはどうですか？

ダークテーマのカラーパレットも常に考慮する必要があります。そうしないと、ユーザーはアプリで悪いエクスペリエンスを経験し、フラストレーションさえも感じてしまいます。最もよく無視される部分の1つは、ダークテーマを適用することでした—少なくとも私にとっては。マテリアルコンポーズを使用すると、実装が非常に簡単です。

まず、カラーパレットを決める必要があります。私は同じことに従い、すべてに異なる色を与えます。

それでは、テーマにパレットを入れてアプリを実行しましょう。

MaterialTheme(
    colors = if (isSystemInDarkTheme()) darkColors else lightColors,
    /***/
)

      

しかし、何分、なぜ私たちのメインの背景が白のままなのですか？これは私たちが望んでいることではありません。理由は次のとおりです。

• すべてのUIコンポーネントはColumn、テーマに従わない要素に追加されます。そのため、背景には実際には色がありません。

@Composable
fun Surfaces() {
    Column(modifier = Modifier.filllMaxSize()) {
        Cards()
    }
}

@Composable
fun Surfaces() {
    Surface {
        Column(modifier = Modifier.fillMaxSize()) {
             Cards()    
        }
    }
}

私のUI要素の1つは、他のアプリとは異なっている必要があります—私のテーマの色はどれも適切ではありません。しかし、私は問題に直面したくありません。

UI要素の色をオーバーライドできます。クラス表現はすべてのUI要素で異なりますが、実装は同じです。Buttonとを見てみましょうTextField。

ボタンには、ButtonDefaults.buttonColors()拡張とオーバーライドを使用します。

の場合と同様にTextField、TextFieldDefaults.textFieldColors()オーバーライドされます。

• ライト/ダークモードに異なるカラーパレットを提供することを検討する必要があることを覚えておくことが重要です。そうしないと、前述の問題が発生する可能性があります。（背景/テキストの色は同じ問題）

これらのトピックについて説明しました。

• マテリアルテーマでの色の適用方法（明るい色と暗い色の両方）
• UI要素のデフォルトの色
• よくある間違い
• UI要素のオーバーライドカラーパレット