新的金丝雀AS可以直接创建Compose项目,就照谷歌给的教程一步一步看着来
1. 可组合函数
如需创建可组合函数,只需将 @Composable
注释添加到函数名称中即可。
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
}
}
添加文本,setContent
块用于填充布局,里面调用一个Text
组件显示内容
setContent {
Text("Hello World!")
}
试着把刚刚的内容改写为可组合函数
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name")
}
函数内部是刚刚那个组件,函数开头加上 @Composable
,然后在setContent
中调用
setContent {
Greeting(name = "Minos")
}
如果需要预览组件的效果,使用@Preview
注解(但是对应的函数不能含有参数列表)
@Preview
@Composable
fun previewGreeting() {
Greeting(name = "Android")
}
默认给个值,让需要预览的组件函数调用
重新build,可以预览对应的函数
2. 布局
界面采用多层级嵌套的结构
@Composable
fun NewStory() {
Text(text = "A day in Shark Fin Cove")
Text(text = "Davenport, California")
Text(text = "December 2018")
}
三个文本会叠在一起
@Preview
@Composable
fun DefaultPreview() {
NewStory()
}
使用默认的预览函数进行函数的预览(自己写的),单独定义一个专门用于预览的函数也有利于提高性能
Column
Column
函数发挥的作用就是将内部的元素垂直排列
可以看到三个文本垂直方向紧紧挨着,自上而下排列
Column
的起始位置是从左上方开始的,与许多绘制布局的坐标系一样
@Composable
fun NewStory() {
Column(modifier = Modifier.padding(16.dp)) {
Text(text = "A day in Shark Fin Cove")
Text(text = "Davenport, California")
Text(text = "December 2018")
}
}
进行一点样式的修改
添加的padding显示在四周,Column
向四周辐射了一些厚度,自己就像是嵌在其中
@Composable
fun NewStory() {
Column(modifier = Modifier.background(Color.Green).padding(16.dp)) {
Text(text = "A day in Shark Fin Cove")
Text(text = "Davenport, California")
Text(text = "December 2018")
}
}
填充了背景色,更好理解,padding就是Column
的内边距
添加图片
Image(
painter = painterResource(id = R.drawable.header),
contentDescription = null
)
放到Column
中
在此基础上,通过modifier
调整尺寸
Image(
painter = painterResource(id = R.drawable.header),
contentDescription = null,
modifier = Modifier
.height(180.dp)
.fillMaxWidth(),
contentScale = ContentScale.Crop
)
图片与文字挨得太近,添加一个占位组件隔开一段距离
Spacer(Modifier.height(16.dp))
Material Design
采用形状
根据传统Material Design
的设计风格,整体显得比较圆润,使用clip()
为图片磨平棱角
.clip(RoundedCornerShape(4.dp))
在原来modifier的调用链后面追加一个调用,进一步进行样式调整
可以看到边缘处有一丝圆角,弧度设置大一些会更明显
就像是将对应的图形(传入的shape)内切于原来的图片中,盖在上面,然后拿剪刀沿着形状的边剪下来,这就是这个函数的作用了
为文本应用样式
使用Material Theme
块包裹之前创建的组件,为其应用上对应的主体风格
MaterialTheme {
Column(modifier = Modifier.padding(16.dp)) {
Image(
painter = painterResource(id = R.drawable.header),
contentDescription = null,
modifier = Modifier
.height(180.dp)
.fillMaxWidth()
.clip(RoundedCornerShape(4.dp)),
contentScale = ContentScale.Crop
)
Spacer(Modifier.height(16.dp))
Text(text = "A day in Shark Fin Cove")
Text(text = "Davenport, California")
Text(text = "December 2018")
}
}
变化比较微弱,但是确实是产生了效果的
接下来,继续为不同的内容设置不同的显示样式,就有点像word或者markdown的那种排版
Text(text = "A day in Shark Fin Cove", style = typography.h6)
Text(text = "Davenport, California", style = typography.body2)
Text(text = "December 2018", style = typography.body2)
其中Text
的第二个参数设置对应的样式,关于这里字体的样式选择,也可以点进typography
的源码中查看,其中对于字体样式的选择有相应的建议
如果面临文字比较多的情况,可以进行省略
Text(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(text = "Davenport, California", style = typography.body2)
Text(text = "December 2018", style = typography.body2)
添加了最大行数限制,并且设置省略
超出2行部分显示为…