上面一篇记录学习篇-Compose(1)我们学习了什么是Compose并且写出了一个简单的Hello Android。
这篇我们来学习布局,并且能够学习到几个常用的控件,下面都是我自己看官方文档和自己看的一些别人文章学习的,如果有错误请指正,谢谢支持!
@Composable
fun MyLinearLayout(){
Column {
Text(text = "Hello")
Text(text = "Android")
}
}
查看效果
@Preview(showBackground = true)
@Composable
fun PreviewContent() {
ComposeTheme {
MyLinearLayout()
}
}
运行效果发现是自适应大小,如果我们需要显示
android:layout_width=“match_parent”
android:layout_height=“match_parent”
添加
@Composable
fun MyLinearLayout() {
Column(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight()
) {
Text(text = "Hello")
Text(text = "Android")
}
}
修改控件的样式都在modifier参数里面设置,我们可以查看它里面有很多方法
我下面列举几个常用的方法
还有对齐方式
@Composable
fun MyLinearLayout() {
Column(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Hello")
Text(text = "Android")
}
}
@Composable
fun MyLinearLayout() {
Row {
Text(text = "Hello")
Text(text = "Android")
}
}
需要添加依赖
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02"
@Composable
fun MyConstraintLayout() {
ConstraintLayout(
modifier = Modifier
.padding(vertical = 10.dp)
.fillMaxWidth()
) {
//创建参考,类似于id,唯一性
val (text, image) = createRefs()
Text(
text = "皮卡丘",
modifier = Modifier
//把参考值放入约束中
.constrainAs(text) {
//约束于屏幕的左侧
start.linkTo(parent.start)
//约束于屏幕的右侧
end.linkTo(parent.end)
//约束于[image]参考值下方10dp
top.linkTo(image.bottom, 10.dp)
}
)
Image(
painter = painterResource(R.drawable.default_poke),
contentDescription = "Pikachu",
modifier = Modifier
//把参考值放入约束中
.constrainAs(image) {
//约束于屏幕的左侧
start.linkTo(parent.start)
//约束于屏幕的右侧
end.linkTo(parent.end)
//约束于屏幕的上方5dp
top.linkTo(parent.top, 5.dp)
}
.size(100.dp)
)
}
}
其实用法也和ConstraintLayout大同小异,理解了这几个参数用法用起来就很简单。
纵向列表
data class Pokemon(val name: String, @DrawableRes val url: Int = R.drawable.default_poke)
val pokemonList by lazy {
val list = mutableListOf<Pokemon>()
(0..8).forEach {
list.add(Pokemon("皮卡丘$it"))
}
list
}
@Composable
fun MyList() {
LazyColumn {
items(pokemonList) {
MyConstraintLayout(it)
}
}
}
横向列表
@Composable
fun MyList() {
LazyRow {
items(pokemonList) {
MyConstraintLayout(it)
}
}
}
@ExperimentalFoundationApi
@Composable
fun MyList() {
LazyVerticalGrid(cells = GridCells.Fixed(2)) {
items(pokemonList) {
MyConstraintLayout(it)
}
}
}
是不是发现列表很简单,不用再去些那些复杂的adapter了。
这就是学习篇的(2)布局篇的内容了,之后我还会更新学习篇(3)。相信大家知道了怎么在和在.xml里面一样布局了,我们还学到了几个控件的简单使用Text(),Image()。
谢谢大家支持。