0
Help us understand the problem. What are the problem?

posted at

updated at

Organization

Jetpack Compose 勉強記録その2 (Jetpack Compose チュートリアル レッスン:3)

Jetpack Compose 勉強記録その2です。

今回の内容

チュートリアルの続きをやっていきます。

今回はレッスン 3: マテリアル デザインをやっていきます

テーマを設定

MainActivity.kt
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialAppTheme{
                CardItem(Message("Android", "Jetpack Compose"))
            }        
        }
    }

MaterialAppThemeで囲うことによりテーマを設定することができます。

MaterialAppThemeはEmpty Compose Activity テンプレートで作成した場合はui.themeの中にあるTheme.ktの中にあります。

 Theme.kt
@Composable
fun MaterialAppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(colors = colors, typography = Typography, shapes = Shapes, content = content)
}

マテリアルデータに設定してある色の設定

MainActivity.kt
Image(
    painter = painterResource(R.drawable.ic_launcher_background),
    contentDescription = "picture",
    modifier = Modifier
        .size(50.dp)
        .clip(CircleShape)
        .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
)

Text(text = message.name, color = MaterialTheme.colors.secondaryVariant)

border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)

こちらを追加することでImageに円の枠を作ることができます。

color = MaterialTheme.colors.secondaryVariant

こちらを追加することでTextの色を設定できます。

styleの設定

MainActivity.kt
Column {
    Text(text = message.name,
        color = MaterialTheme.colors.secondaryVariant,
        style = MaterialTheme.typography.subtitle2)
    Spacer(modifier = Modifier.height(12.dp))
    Text(text = message.body,
        color = MaterialTheme.colors.secondaryVariant,
        style = MaterialTheme.typography.body2)
}

style = MaterialTheme.typography.subtitle2)style = MaterialTheme.typography.body2)でTextにstyleの設定をしてます。

マテリアルデザインなViewの設定

MainActivity.kt
Surface(shape = MaterialTheme.shapes.medium, elevation = 1.dp) {
    Text(
        text = message.body,
        color = MaterialTheme.colors.secondaryVariant,
        modifier = Modifier.padding(all = 4.dp),
        style = MaterialTheme.typography.body2
    )
}

Surfaceを追加することでTextViewを囲ったようなViewをつけることができました。角丸や影なども設定できるので使いやすいですね。
Screenshot_20220612_173613.png

ダークテーマを有効にする

Jetpack Compose はデフォルトでダークテーマを処理できます。マテリアル デザイン カラーを使用した場合、テキストと背景は暗い背景に合わせて自動的に調整されます。
デフォルトで設定されているみたいです。
ライトテーマとダークテーマの色の選択はTheme.kt ファイルで定義するみたいです。

MainActivity.kt
@Preview(name = "Light Mode")
@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    showBackground = true,
    name = "Dark Mode"
)
@Composable
fun PreviewMessageCard() {
    MaterialAppTheme {
        CardItem(message = Message("Colleague", "Take a look at Jetpack Compose, it's great!"))
    }
}

ダークモードのPreviewの表示方法です。
表示したい@Composableの上に設定をします。

以上です。

デザインがテーマで統一されているとかなり作りやすそうですね。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?