Layout 布局
UI元素是分層的领追，元素包含在其他元素中。 在Compose中响逢，您可以通過從其他可組合函數(shù)中調(diào)用可組合函數(shù)來構(gòu)建UI層次結(jié)構(gòu)蔓腐。
Column 布局
@Composable
fun NewStory(){
Column{
Text("起靈老師今天再發(fā)呆")
Text("靖哥哥今天在練字")
Text("阿朱今天在打游戲")
}
}
Modifier
給Column 添加Modifier,Modifier 更像開發(fā)Android之前xml的布局修飾，代碼里面也可以修飾龄句，將兩者結(jié)合的產(chǎn)物。用前端的Style來說明似乎更加合理散罕，接觸過前端css分歇，vue等，會(huì)有更加明顯的體會(huì)欧漱。
截屏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
應(yīng)用在圖形职抡，如圓角圖形
@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
第二個(gè)例子分析
底部導(dǎo)航
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,
"發(fā)現(xiàn)",
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
添加點(diǎn)擊事件
Jetpack前面部分基礎(chǔ)知識(shí)分享：
Jetpack(一)Lifecycle和LiveData
JetPacks之Lifecycles原理
JetPack之 LifeCycle LiveData
Jetpack(三) 之 Room 與 ViewModel
Jetpack 之 ViewModel 原理
Jetpack (四) 之 Navigation
Jetpack Navigation 原理淺析
