2022.9.5 Compose-Material Design

2022-09-05

Material Design

Compose旨在支持Meterial Design原则。它的许多界面都原生支持Material Design。Material Design是围绕三大要素构建的:颜色、排版、形状。

1.启用深色主题

由于支持Material Design,Jetpack Compose默认能够处理深色主题。使用Material颜色、文本和背景时,系统会自动适应深色背景。

首先把内容写进JetpackComposeTestTheme中

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeTestTheme {
                MessageCard(msg = Message("Kurogi", "哲学"))
            }
        }
    }
}

查看Theme.kt,自定义深色和浅色主题的background,把深色主题的background设为灰色,浅色主题的background设为白色。

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200,
    background = Color.Gray
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200,
    background = Color.White
)

再返回到MainActivity.kt,修改MessageCard的修饰符

@Composable
fun MessageCard(msg: Message){
    Row(modifier = Modifier.padding(all = 8.dp)
        .background(MaterialTheme.colors.background)
    ){
        Image(painter = painterResource(id = R.drawable.img_1),
            contentDescription = null,
            modifier = Modifier
                .clip(CircleShape)      //把图片显示方式变成圆形
                .size(40.dp)        //修改图片大小
        )
        Column{
            Text(text = msg.author)
            Spacer(modifier = Modifier.height(4.dp))    //修改间距
            Text(text = msg.body)
        }
    }
}

2.列表与状态

Compose可以轻松创建列表并添加有趣的动画效果

①创建消息列表

②再展开消息时显示动画效果

案例:制作一个消息列表

先准备一个消息列表,作为列表的内容。

object SampleData {
    val conversationSample = listOf<Message>(
        Message("kurogi","南南,南南"),
        Message("大鳄鱼","一条猫,一条猫"),
        Message("周美彤","嘿嘿原神我的原神")
    )
}

回到MainActivity.kt再写一个Composable,作为列表

@Composable
fun Conversation(messages: List<Message>){
    //带缓冲的列表
    LazyColumn{
        items(messages){ messages ->
            MessageCard(msg = messages)
        }
    }
}

再修改onCreate( )

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeTestTheme {
                Conversation(SampleData.conversationSample)
            }
        }
    }
}

显示效果:

对界面进行美化工作,为图片和文字设置间距,author修改颜色,body设置字体等

@Composable
fun MessageCard(msg: Message){
    Row(modifier = Modifier
        .padding(all = 8.dp)
        .background(MaterialTheme.colors.background)
    ){
        Image(painter = painterResource(id = R.drawable.img_1),
            contentDescription = null,
            modifier = Modifier
                .clip(CircleShape)      //把图片显示方式变成圆形
                .size(40.dp)        //修改图片大小
        )

        Spacer(modifier = Modifier.width(8.dp)) //添加间距

        Column{
            Text(text = msg.author,
            color = MaterialTheme.colors.secondaryVariant   //修改颜色
            )

            Spacer(modifier = Modifier.height(4.dp))    //修改间距

            Text(text = msg.body,
                modifier = Modifier.padding(4.dp),
                style = MaterialTheme.typography.body2, //设置字体
                maxLines = 1
            )
        }
    }
}

显示效果:

如果需要点击可以显示消息全部内容

需要使用remember保存一个状态值

1	var isExpanded by remember{ mutableStateOf(false)}

如果isExpanded为true,则展示全部内容,为false展示一行内容

Text(text = msg.body,
    modifier = Modifier.padding(4.dp),
    style = MaterialTheme.typography.body2, //设置字体
    maxLines = if(isExpanded) Int.MAX_VALUE else 1
)

点击消息改变isExpanded的状态

Text(text = msg.body,
    modifier = Modifier.padding(4.dp)
        .clickable { isExpanded = !isExpanded },
    style = MaterialTheme.typography.body2, //设置字体
    maxLines = if(isExpanded) Int.MAX_VALUE else 1
)

初始状态:

点击后:

3.动画

设置一个surfaceColor变量用于控制颜色的切换

1
2
3

val surfaceColor: androidx.compose.ui.graphics.Color by animateColorAsState(
    if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface
)

再使用Surface包裹内容所在的Text,令Surface的color = surfaceColor

Surface(color = surfaceColor) {
    Text(text = msg.body,
        modifier = Modifier
            .padding(4.dp)
            .clickable { isExpanded = !isExpanded },
        style = MaterialTheme.typography.body2, //设置字体
        maxLines = if(isExpanded) Int.MAX_VALUE else 1
    )
}

点击效果:

继续美化,修改消息框为圆角,设置慢慢展开的动画效果,消息框底部设置阴影

Surface(color = surfaceColor,
shape = MaterialTheme.shapes.medium,    //设置形状为圆角
elevation = 1.dp,
modifier = Modifier.animateContentSize()
    .padding(1.dp)) {
    Text(text = msg.body,
        modifier = Modifier
            .padding(4.dp)
            .clickable { isExpanded = !isExpanded },
        style = MaterialTheme.typography.body2, //设置字体
        maxLines = if(isExpanded) Int.MAX_VALUE else 1
    )
}

完整代码已上传我的GitHub仓库:leiteorz/First-try-Compose: 第一次尝试使用Compose,简单的做了一个列表和一点点动画 (github.com)