初识 Jetpack Compose【05】

优化你的 UI

现在我们的布局有正确的结构，但是元素之间没有很好的间隔，而且左边的图片太大了，为了修饰和配置一个 Composable, Compose 使用了 modifiers，它们允许你改变 Composable 的尺寸、布局、外观或添加高级交互，比如可以让一个元素变得可以点击。你可以把它们连接起来，用来创建更丰富的 Composables，接下来就让我们使用其中一些修饰符来改善布局。

@file:Suppress("PreviewAnnotationInFunctionWithParameters")
​
package com.example.composestudy
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
​
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import java.nio.file.Files.size
​
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard(
                msg = Message("Jetpack Compose 之旅", "坚果开始更新啦")
            )
        }
    }
}
data class Message(val author: String, val body: String)
@Composable
fun MessageCard(msg: Message) {
    Row(
        modifier = Modifier.padding(all = 8.dp) // 在我们的 Card 周围添加 padding
    ) {
        Image(
            painterResource(id = R.mipmap.ic_launcher),
            contentDescription = "profile picture",
            modifier = Modifier
                .size(50.dp) // 改变 Image 元素的大小
                .clip(CircleShape) // 将图片裁剪成圆形
        )
        Spacer(Modifier.padding(horizontal = 8.dp)) // 添加一个空的控件用来填充水平间距，设置 padding 为 8.dp
        Column {
            Text(text = msg.author)
            Spacer(Modifier.padding(vertical = 4.dp))
            Text(text = msg.body)
        }
    }
}
@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard(
        msg = Message("Jetpack Compose 之旅", "坚果开始更新啦")
    )
}

3. 第三步：Material design

Compose 是为支持 Material design 原则而建立的。它的许多 UI 元素都是开箱即用的。在这一步中，你将用 Material 小部件来设计你的应用程序。

使用 Material Design

我们的 MessageCard 现在有了一个布局，但它看起来还不是太好,

Jetpack Compose 提供了 Material Design 的实现，我们将使用 Material Design 的风格来改善我们的 MessageCard。

首先，我们使用在你的项目中创建的 Material 主题来包装我们的 MessageCard 函数，在我们的例子中是 ComposestudyTheme。在 @Preview 和 setContent 中都添加它。

Material Design 是围绕三个元素建立的。颜色（Color）、排版（Typography）、形状（Shape）。让我们一个一个地添加它们。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        ComposestudyTheme {
            MessageCard(Message("Jetpack Compose 博物馆", "我们开始更新啦"))
        }
    }
}
​
@Preview
@Composable
fun PreviewMessageCard() {
    ComposestudyTheme {
        MessageCard(
            msg = Message("Jetpack Compose 博物馆", "我们开始更新啦")
        )
    }
}

注意

一个 Empty Compose Activity 已经自动为你的项目生成了一个默认的主题，允许你自定义 MaterialTheme。如果你给你的项目命名与 ComposestudyTheme 不同，你可以在 ui.theme 包中找到你的自定义主题。

颜色（Color）

使用包装好的主题中的颜色进行修饰很容易，你可以在任何需要颜色的地方使用主题中的值。

让我们对标题进行修饰，并为图片添加边框。

Row(
    modifier = Modifier.padding(all = 8.dp)
) {
    Image(
        painterResource(id = R.drawable.profile_picture),
        contentDescription = "profile picture",
        modifier = Modifier
            .size(50.dp)
            .clip(CircleShape)
            .border(1.5.dp, MaterialTheme.colors.secondary, shape = CircleShape) // 添加边框
    )
    Spacer(Modifier.padding(horizontal = 8.dp))
    Column {
        Text(
            text = msg.author,
            color = MaterialTheme.colors.secondaryVariant // 添加颜色
        )
        Spacer(Modifier.padding(vertical = 4.dp))
        Text(text = msg.body)
    }
}

排版（Typography）

Material Typography 风格在 MaterialTheme 中是可用的，只要把它们添加到 Text composables 中。

Column {
    Text(
        text = msg.author,
        color = MaterialTheme.colors.secondaryVariant,
        style = MaterialTheme.typography.subtitle2 // 添加 style
    )
    Spacer(Modifier.padding(vertical = 4.dp))
    Text(
        text = msg.body,
        style = MaterialTheme.typography.body2 // 添加 style
    )
}

形状（Shape）

有了形状，我们可以添加最后的修饰。我们为整个 MessageCard 实现了一个卡片式的设计

@file:Suppress("PreviewAnnotationInFunctionWithParameters")
​
package com.example.composestudy
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.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
​
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import com.example.composestudy.ui.theme.ComposestudyTheme
import java.nio.file.Files.size
​
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposestudyTheme{MessageCard(
                msg = Message("Jetpack Compose 之旅", "坚果开始更新啦")
            )}
        }
    }
}
data class Message(val author: String, val body: String)
@Composable
fun MessageCard(msg: Message) {
    Surface(
        shape = MaterialTheme.shapes.medium, // 使用 MaterialTheme 自带的形状
        elevation = 5.dp,
        modifier = Modifier.padding(all = 8.dp)
    ) {
        Row(
            modifier = Modifier.padding(all = 8.dp)
        ) {
            Image(
                painterResource(id = R.mipmap.ic_launcher),
                contentDescription = "profile picture",
                modifier = Modifier
                    .size(50.dp)
                    .clip(CircleShape)
                    .border(1.5.dp, MaterialTheme.colors.secondary, shape = CircleShape)
            )
            Spacer(Modifier.padding(horizontal = 8.dp))
            Column {
                Text(
                    text = msg.author,
                    color = MaterialTheme.colors.secondaryVariant,
                    style = MaterialTheme.typography.subtitle2
                )
                Spacer(Modifier.padding(vertical = 4.dp))
                Text(
                    text = msg.body,
                    style = MaterialTheme.typography.body2
                )
            }
        }
    }
}
@Preview
@Composable
fun PreviewMessageCard() {
    ComposestudyTheme{
        MessageCard(
            msg = Message("Jetpack Compose 之旅", "坚果开始更新啦")
        )
    }
​
​
​
}