Android Compose（一）

新的金丝雀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行部分显示为…