我们在上一章回中介绍了Jetpack相关的概念和主要内容,本章回中主要介绍 页面和布局。闲话休提,请我们一起Talk Android Jetpack吧
1. 概念介绍
我们在本章回中介绍的页面是指Activity
和Fragment,它们是App的重要组成部分,Jetpack
虽然引入了composeUI库,但是仍然使用使用它们当作页面,不过对它们进行了重新封装,让它们位于Jetpack库中。
布局就是界面中内容的排列方式,比如xml中的线性布局,不过Jetpack没有使用这些布局,而是引入了新的布局方式,毕竟xml都不使用了,留着这些布局还有什么用呢。本章回中将详细介绍页面与布局相关的内容。
2. 使用方法
2.1 页面
页面使用Activity和Fragment表示,它们是页面中各种UI的载体,我们需要掌握与它们相关的生命周期和与生命周期对应的回调方法,比如onCreate
()方法。我们在TalkAndoird专栏中介绍过这些内容,因此这里不再详细介绍。不过生命周期的内容会有一些变化,我们将在后续章回中介绍。
2.2 布局
布局包含三种:Column,Row和Box,详细内容如下:
- Column布局:把组件以列的方式进行排列;
- Row布局:把组件以行的方式进行排列;
- Box布局:把组件以叠加的方式进行排列;
如果大家不理解这些布局的话,可以查看下图,该图来自官方文档,它可以形象地表示各个布局的含义。
此外,还有一些约束布局和基于槽位的布局,比如Scaffold.我们在本章回中先不做介绍,后面遇到后再作详细的介绍。
3. 示例代码
介绍完页面和布局后,我们将通过具体的代码来演示它们的使用方法,详细如下:
@Composable
fun LayoutPage() {
val list = listOf("1-One","2-Tow","3-Three")
Column(
modifier = Modifier
.padding(top = 60.dp)
.fillMaxHeight(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Top
) {
for (item in list) {
//控制每个list选项的边距,长宽度,边框和背景颜色
Surface(
color = MaterialTheme.colorScheme.primary,
modifier = Modifier
.fillMaxWidth() //相当于match_parent,默认是wrap_content
.height(48.dp)
.padding(vertical = 8.dp, horizontal = 16.dp)
.border(width = 3.dp, color = Color.Yellow,)
) {
Row (
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.padding(start = 24.dp)
.align(alignment = Alignment.CenterHorizontally)
){
Text(text = item)
Button(onClick = { Log.d("ex001","button is clicked")}) {
Text(text = "Button")
}
}
}
}
}
}
在上面的代码中,我们把所有的布局封装成了一个可组合函数,将该函数放到页面的onCreate()方法中就可以运行,它将生成一个三行两列的布局,下面是程序的运行效果图,请大家参考。此外,我们建议大家参考示例代码自己动手实践一下,这样才能真正掌握布局相关的知识。
4. 内容总结
最后,我们对本章回的内容做一个总结:
- 本章回主要介绍页面和布局的内容;
- 界面仍然使用Activity表示;
- 常用的布局分为三种:Row,Column和Box;
看官们,关于Jetpack的基本内容就介绍这些,欢迎大家在评论区交流与讨论!