Jetpack Compose的Layouts

一：简介

您将学习如何使用Compose的最高层次的UI抽象，Material Design，以及低级的可组合工具，如Layout，它允许您测量并在屏幕上放置元素。

 

二：Modifier

1：设置文本的透明度

CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Text("3 minutes ago", style = MaterialTheme.typography.body2)
        }

 

2：指明Surface等控件的大小

 modifier = Modifier.size(50.dp)

 

3：Modifiers 和 XML attribute的区别

Modifiers和XML attribute类似，但是Modifiers具有作用域的类型安全检查，一些无效的modifiers不能在一些layouts上使用

 

4：设置一个modifier在形参的一号位

If you're creating your own composable, consider having a modifier as a parameter, default it to Modifier (i.e. empty modifier that doesn't do anything) and apply it to the root composable of your function. In this case:

@Composable
fun PhotographerCard(modifier: Modifier = Modifier) {
    Row(modifier) { ... }
}

Note: By convention, the modifier is specified as the first optional parameter of a function. This enables you to specify a modifier on a composable without having to name all parameters.

 

5：Modifier的顺序有影响

看一个例子：

Surface (color = if (color_state.value == 1) Color.Green else Color.Blue){
            Column(modifier = Modifier
                .padding(5.dp)
                .clickable { color_state.value = -color_state.value }
                .align(Alignment.CenterVertically)) {

                ...
                }
            }
        }

column先在周围创建了空隙padding，再创建了点击事件clickable，这个时候clickable在padding之间是无效的。但是，clickable放在padding前面就可以把padding的范围也包括进去。

 

6：背景的圆角

想要把背景设置成圆角，看来有两种方案：

1:
Row(modifier = Modifier
        .padding(8.dp)
        .clip(RoundedCornerShape(4.dp))
        .background(MaterialTheme.colors.surface)
        .padding(16.dp)) {
...
}

2:
Row(modifier = Modifier
        .padding(8.dp)
        .background(MaterialTheme.colors.surface, Shapes.medium)
        .padding(16.dp)) {

第一种先裁剪，在设置背景；第二种设置一个裁剪后的背景。

 

 

三：Scaffold

scaffold是一个布局结构的模板，具有很多slot(插槽)，可以放置自己的组件上去。比如说，topBar, bottomBar...

 

Scaffold(topBar = { MyBar() }, bottomBar = {...}) { padding ->
        BodyContent(Modifier.padding(padding))------------这里
    }

 

它的最后一个参数是一个lambda，自己定义放置什么内容，不过，它会传递一个padding给我们，而我们需要把这个padding应用到我们内容content的根modifier上：

@Composable
fun BodyContent(modifier: Modifier = Modifier) {
    Column(modifier = modifier) {--------------设置为root modifier
        Text(text = "Hi there!")
        Text(text = "Thanks for going through the Layouts codelab")
    }
}

 

 

四：TopAppBar

在上一个代码中，我们设置了scaffold的topBar为一个TopAppBar的实例：

TopAppBar(title = { Text(text = "Here Title") },
        actions = {
            IconButton(onClick = { Log.d("MainActivity", "i click the button") }) {
                Icon(imageVector = Icons.Filled.Favorite, contentDescription = null)
            }
        })

TopAppBar也是一个具有很多slot的composable function。

@Composable
fun TopAppBar(
    title: @Composable () -> Unit, 设置中间的文字
    modifier: Modifier = Modifier,
    navigationIcon: @Composable (() -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {}, 
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation
) {
...
}

具体的parameter的含义查看文档可知。

(底部的导航可使用BottomNavigation)

bottomBar = {
        var selectedItem by remember { mutableStateOf(0) }
        val items = listOf("Songs", "Artists", "Playlists")
        BottomNavigation {
            items.forEachIndexed { index, item ->
                BottomNavigationItem(
                    icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
                    label = { Text(item) },
                    selected = selectedItem == index,
                    onClick = { selectedItem = index }
                )
            }
        }
    }

 

 

 

 

五：操作列表

可以使用Column或Row来轻松地展示list，但也有lazy的版本only composes and lays out the currently visible items.

普通的column无法scroll滚动：

//val scrollState = rememberScrollState()
    Column(/*modifier = Modifier.verticalScroll(scrollState)*/) {
        repeat(1000){
            Text("this is No $it")
        }
    }

只有加上被注释掉的那部分才可以滚动。

但是上面的代码也有缺点，就是屏幕外不可见的元素也会一次性加载出来，当item很多的时候，是一个性能隐患。这时候考虑使用LazyColumn。

note：LazyColumn in Jetpack Compose is the equivalent of RecyclerView in Android Views.

 

    LazyColumn() {
        items(100){
            Text(text = "No $it")
        }
    }

用items表示多个项，用item表示一个项。有多个重载，可以接受list作为items的参数，这里是接受一个size。

 

 

六：展示图片

Image(
            painter = rememberImagePainter(
                data = "https://developer.android.com/images/brand/Android_Robot.png"
            ),
            contentDescription = "Android Logo",
            modifier = Modifier.size(50.dp)
        )

rememberImagePainter是Coil包中一个很好用的展示图片的函数。

这是这个项目的github主页：https://github.com/coil-kt/coil

 

 

 七：创建自定义布局 custom layouts:

1. 在view的体系中， 创建custom layout需要继承ViewGroup, 在Compose中只需要使用Layout函数。

 

 

八：测量控件

对于一个可组合对象，你可以要求它的intrinsicWidth或intrinsicHeight:

• (min|max)IntrinsicWidth:给定这个高度，你可以正确绘制内容的最小/最大宽度是多少
• (min|max)IntrinsicHeight:给定这个宽度，你可以正确地绘制内容的最小/最大高度是多少

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
    Row(modifier = modifier.height(IntrinsicSize.Min)) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1
        )

        Divider(color = Color.Black, modifier = Modifier.fillMaxHeight().width(1.dp))
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),
            text = text2
        )
    }
}

@Preview
@Composable
fun TwoTextsPreview() {
    LayoutsCodelabTheme {
        Surface {
            TwoTexts(text1 = "Hi", text2 = "there")
        }
    }
}

 

Row的minIntrinsicHeight将是其子行的最大minIntrinsicHeight。Divider的minIntrinsicHeight为0，因为如果没有给定约束，它不会占用空间;Text的minIntrinsicHeight将是给定特定宽度的文本的高度。因此，Row的高度约束将是text的最大minIntrinsicHeight。然后，Divider将其高度扩展到由Row给出的高度约束。