Jetpack Compose 第 3 课：Material Design

点击查看：Jetpack Compose 教程

点击查看：Composetutorial 代码

简介

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API，可以帮助您简化并加快 Android 界面开发。

在本教程中，您将使用声明性的函数构建一个简单的界面组件。您无需修改任何 XML 布局，也不需要使用布局编辑器。相反，您只需调用可组合函数来定义所需的元素，Compose 编译器即会完成后面的所有工作。

Material Design

Compose 旨在支持 Material Design 原则。它的许多界面元素都原生支持 Material Design。在本课中，您将使用 Material Design widget 来设置应用的样式。

效果图

使用 Material Design

您的消息设计现在已有布局（Jetpack Compose 第 2 课：布局），但看上去还不是特别理想。

Jetpack Compose 原生提供 Material Design 3 及其界面元素的实现。您将使用 Material Design 样式改进 MessageCard 可组合项的外观。

首先，使用在您的项目中创建的 Material 主题 ComposeTutorialTheme 和 Surface 来封装 MessageCard 函数。 在 @Preview 和 setContent 函数中都需要执行此操作。这样一来，可组合项即可沿用应用主题中定义的样式，从而在整个应用中确保一致性。

Material Design 是围绕 Color、Typography、Shape 这三大要素构建的。您将逐一添加这些要素。

注意： Empty Compose Activity 模板会为您的项目生成默认主题，使您能够自定义 MaterialTheme。 如果您为项目指定的名称不是 ComposeTutorial，可以在 ui.theme 子软件包的 Theme.kt 文件中找到您的自定义主题。

颜色

通过 MaterialTheme.colorScheme，使用已封装主题中的颜色来设置样式。您可以在需要颜色的任何位置使用主题中的这些值。此示例使用了动态主题颜色（由设备偏好设置定义）。若要更改此设置，您可以在 MaterialTheme.kt 文件中将 dynamicColor 设为 false。
设置标题样式，并为图片添加边框：

Typography（排版）

MaterialTheme 中提供了 Material Typography 样式，只需将其添加到 Text 可组合项中即可。

Shape（形状）

通过 Shape，我们可以添加最后的“点睛之笔”。首先，将消息正文封装在 Surface 可组合项中。这样即可自定义消息正文的形状和高度。此外，还要为消息添加内边距，以改进布局。

启用深色主题

您可以启用深色主题（或夜间模式），以避免显示屏过亮（尤其是在夜间），或者只是节省设备电量。由于支持 Material Design，Jetpack Compose 默认能够处理深色主题。使用 Material Design 颜色、文本和背景时，系统会自动适应深色背景。

您可以在文件中以单独函数的形式创建多个预览，也可以向同一个函数中添加多个注解。

添加新的预览注解并启用夜间模式。

浅色和深色主题的颜色选项是在由 IDE 生成的 Theme.kt 文件中定义的。
到目前为止，您已创建了一个消息界面元素，它会以不同样式显示一张图片和两项文本，并且在浅色和深色主题下都有良好的视觉效果！

Color.kt代码

package com.example.composetutorial.ui.theme

import androidx.compose.ui.graphics.Color

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)

Shape.kt代码

package com.example.composetutorial.ui.theme

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Shapes
import androidx.compose.ui.unit.dp

val Shapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(4.dp),
    large = RoundedCornerShape(0.dp)
)

Theme.kt

package com.example.composetutorial.ui.theme

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

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200

    /* Other default colors to override
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
    */
)

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

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

Type.kt代码

package com.example.composetutorial.ui.theme

import androidx.compose.material.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

// Set of Material typography styles to start with
val Typography = Typography(
    body1 = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    )
    /* Other default text styles to override
    button = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.W500,
        fontSize = 14.sp
    ),
    caption = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 12.sp
    )
    */
)

Base03.kt代码

package com.example.composetutorial.activity

import android.content.res.Configuration
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composetutorial.R
import com.example.composetutorial.ui.theme.ComposeTutorialTheme

/*
https://developer.android.google.cn/jetpack/compose/tutorial
第 3 课：Material Design
Compose 旨在支持 Material Design 原则。它的许多界面元素都原生支持 Material Design。在本课中，您将使用 Material Design 微件来设置应用的样式。

使用 Material Design
您的消息设计现在已有布局，但看上去还不是特别理想。

Jetpack Compose 原生提供 Material Design 及其界面元素的实现。您将使用 Material Design 样式改进 MessageCard 可组合项的外观。

首先，使用在您的项目中创建的 Material 主题 ComposeTutorialTheme 封装 MessageCard 函数。 要同时在 @Preview 和 setContent 函数中执行此操作。这样一来，可组合项即可集成应用主题中定义的样式，从而在整个应用中确保一致性。

Material Design 是围绕三大要素构建的：Color、Typography、Shape。您将逐一添加这些要素。

注意：Empty Compose Activity 模板会为您的项目生成默认主题，支持您自定义 MaterialTheme。 如果您为项目指定的名称不是 ComposeTutorial，可以在 ui.theme 子软件包的 Theme.kt 文件中找到您的自定义主题。



启用深色主题
您可以启用深色主题（或夜间模式），以避免显示屏过亮（尤其是在夜间），或者只是节省设备电量。由于支持 Material Design，Jetpack Compose 默认能够处理深色主题。使用 Material Design 颜色、文本和背景时，系统会自动适应深色背景。

您可以在文件中以单独函数的形式创建多个预览，也可以向同一个函数中添加多个注解。

添加新的预览注解并启用夜间模式。

浅色和深色主题的颜色选项是在由 IDE 生成的 Theme.kt 文件中定义的。

目前为止，您已创建了一个消息界面元素，它会以不同样式显示一张图片和两项文本，并且在浅色和深色主题下都有良好的视觉效果！

 */
class Base03 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTutorialTheme {
                MessageCard(msg = Message3("android", "jetpack component Material Design"))
            }
        }
    }
}

data class Message3(val author: String, val body: String)


@Composable
fun MessageCard(msg: Message3) {

    Row(modifier = Modifier.padding(all = 8.dp)) {

        Image(
            painter = painterResource(id = R.mipmap.icon_nav_mine),
            contentDescription = "我的",
            modifier = Modifier
                .size(50.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
        )

        Spacer(modifier = Modifier.width(8.dp))//水平方向间隔

        Column {
            Text(
                text = msg.author,

                //Color
                //通过 MaterialTheme.colors 使用已封装主题中的颜色设置样式。您可以在需要颜色的任意位置使用主题中的这些值。
                //设置标题样式，并为图片添加边框：
                color = MaterialTheme.colors.secondaryVariant,

                //Typography
                //MaterialTheme 中提供了 Material Typography 样式，只需将其添加到 Text 可组合项中即可。
                style = MaterialTheme.typography.subtitle2
            )

            Spacer(modifier = Modifier.height(4.dp))//垂直间隔

            //Shape
            //通过 Shape，我们可以添加最后的“点睛之笔”。首先，将消息正文封装在 Surface 可组合项中。这样即可自定义消息正文的形状和高度。此外，还要为消息添加内边距，以改进布局。
            Surface(shape = MaterialTheme.shapes.medium, elevation = 1.dp) {
                Text(
                    text = msg.body,
                    style = MaterialTheme.typography.body2
                )
            }
        }
    }
}


@Preview(name = "Light Mode")
@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    //showBackground = true,
    name = "Dark Mode"
)
@Composable
fun PreviewMessageCard03() {
    ComposeTutorialTheme {
        MessageCard(
            msg = Message3("Colleague", "Hey, take a look at Jetpack Compose, it's great!")
        )
    }
}