Layout 布局
UI元素是分层的，元素包含在其他元素中。 在Compose中，您可以通过从其他可组合函数中调用可组合函数来构建UI层次结构。
Column 布局
@Composable
fun NewStory(){
Column{
Text("起灵老师今天再发呆")
Text("靖哥哥今天在练字")
Text("阿朱今天在打游戏")
}
}
Modifier
给Column 添加Modifier,Modifier 更像开发Android之前xml的布局修饰，代码里面也可以修饰，将两者结合的产物。用前端的Style来说明似乎更加合理，接触过前端css，vue等，会有更加明显的体会。
截屏2021-02-17 18.33.57.png
添加图片
@Preview(showBackground = true)
@Composable
fun NewsStoryImagePreview() {
Column(
modifier = Modifier.padding(16.dp)
) {
Image(imageVector = vectorResource(id = R.drawable.avatar_1),
contentDescription = "avatar")
Text("A day in Shark Fin Cove")
Text("Davenport, California")
Text("December 2018")
}
}
截屏2021-02-17 18.42.16.png
@Preview(showBackground = true)
@Composable
fun NewsStoryImagePreview2() {
val image = imageResource(id = R.drawable.avatar_2)
Column(
modifier = Modifier.padding(16.dp)
) {
val imageModifier = Modifier
.preferredHeight(180.dp)
.fillMaxWidth()
Image(
bitmap = image,
contentDescription = "avatar",
modifier = imageModifier,
contentScale = ContentScale.Crop)
Text("A day in Shark Fin Cove")
Text("Davenport, California")
Text("December 2018")
}
}
Material design
应用在图形，如圆角图形
@Composable
fun NewsStoryShape() {
val image = imageResource(R.drawable.ic_launcher_background)
Column(
modifier = Modifier.padding(16.dp)
) {
val imageModifier = Modifier
.preferredHeight(180.dp)
.fillMaxWidth()
.clip(shape = RoundedCornerShape(4.dp))
Image(image,
"avatar",
modifier = imageModifier,
contentScale = ContentScale.Crop)
Spacer(Modifier.preferredHeight(16.dp))
Text("A day in Shark Fin Cove")
Text("Davenport, California")
Text("December 2018")
}
}
给Text 添加Style
@Preview(showBackground = true)
@Composable
fun NewsStoryStyleText() {
// val image = imageResource(R.drawable.ic_launcher_background)
MaterialTheme {
val typography = MaterialTheme.typography
Column(
modifier = Modifier.padding(16.dp)
) {
val imageModifier = Modifier
.preferredHeight(180.dp)
.fillMaxWidth()
.clip(shape = RoundedCornerShape(4.dp))
Image(
vectorResource(id = R.drawable.avatar_6),
"avatar",
modifier = imageModifier,
contentScale = ContentScale.Crop
)
Spacer(Modifier.preferredHeight(16.dp))
Text(
"A day wandering through the sandhills " +
"in Shark Fin Cove, and a few of the " +
"sights I saw",
style = typography.h6,
maxLines = 2,
overflow = TextOverflow.Ellipsis)
Text("Davenport, California",
style = typography.body2)
Text("December 2018",
style = typography.body2)
}
}
}
截屏2021-02-17 19.45.18.png
第二个例子分析
底部导航
package top.zcwfeng.compose.mydemo.ui
import androidx.annotation.DrawableRes
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.viewinterop.viewModel
import top.zcwfeng.compose.mydemo.R
import top.zcwfeng.compose.mydemo.WeViewModel
import top.zcwfeng.compose.mydemo.ui.theme.MyDemoTheme
import top.zcwfeng.compose.mydemo.ui.theme.WeTheme
@Composable
fun WeBottomBar(selected: Int) {
val viewModel: WeViewModel = viewModel()
Row(Modifier.background(WeTheme.colors.bottomBar)) {
TabItem(if (selected == 0) R.drawable.ic_chat_filled else R.drawable.ic_chat_outlined,
"聊天",
if (selected == 0) WeTheme.colors.iconCurrent else WeTheme.colors.icon,
Modifier
.clickable {
viewModel.selectedTab = 0
}
.weight(1f))
TabItem(if (selected == 1) R.drawable.ic_contacts_filled else R.drawable.ic_contacts_outlined,
"通讯录",
if (selected == 1) WeTheme.colors.iconCurrent else WeTheme.colors.icon,
Modifier
.clickable {
viewModel.selectedTab = 1
}
.weight(1f))
TabItem(if (selected == 2) R.drawable.ic_discover_filled else R.drawable.ic_discover_outlined,
"发现",
if (selected == 2) WeTheme.colors.iconCurrent else WeTheme.colors.icon,
Modifier
.clickable {
viewModel.selectedTab = 2
}
.weight(1f))
TabItem(if (selected == 3) R.drawable.ic_me_filled else R.drawable.ic_me_outlined,
"我",
if (selected == 3) WeTheme.colors.iconCurrent else WeTheme.colors.icon,
Modifier
.clickable {
viewModel.selectedTab = 3
}
.weight(1f))
}
}
@Composable
private fun TabItem(@DrawableRes iconId: Int, title: String, color: Color, modifier: Modifier = Modifier) {
Column(modifier.padding(vertical = 8.dp), horizontalAlignment = Alignment.CenterHorizontally)
{
Icon(vectorResource(iconId), title,Modifier/*.unread(true)*/.size(24.dp), tint = color)
Text(title, fontSize = 11.sp, color = color)
}
}
@Preview(showBackground = true)
@Composable
fun TabItemPreview() {
TabItem(iconId = R.drawable.ic_chat_filled, title = "我的", WeTheme.colors.icon)
}
@Preview(showBackground = true)
@Composable
fun WeBottomBarPreView() {
MyDemoTheme {
WeBottomBar(selected = 0)
}
}
@Preview(showBackground = true)
@Composable
fun WeBottomBarPreViewDark() {
MyDemoTheme(WeTheme.Theme.Dark) {
WeBottomBar(selected = 0)
}
}
@Preview(showBackground = true)
@Composable
fun WeBottomBarPreViewNewYear() {
MyDemoTheme(WeTheme.Theme.NewYear) {
WeBottomBar(selected = 1)
}
}
Modifier .clickable
添加点击事件
Jetpack前面部分基础知识分享：
Jetpack(一)Lifecycle和LiveData
JetPacks之Lifecycles原理
JetPack之 LifeCycle LiveData
Jetpack(三) 之 Room 与 ViewModel
Jetpack 之 ViewModel 原理
