在上篇《Jetpack Compose技術快速上手》一文中簡單介紹了Compose，那么這邊我們就來學習下Compose的布局。由于布局這塊涉及內容較多，會分開寫。
布局主要包括：布局基礎知識、Material組件和布局、自定義布局、Compose中使用ConstraintLayout。
本文重點講解布局基礎知識。
主要涉及：可組合函數、標準布局元素、基本組件、布局模型、修飾符、槽位布局。如下圖：
可組合函數
可組合函數是 Compose 的基本構建塊，返回值是 Unit 的函數，用于描述界面中的某一部分，該函數可接收參數。
組合函數中可包含多個界面元素。
其基本格式為：
@Composable
fun xxx():Unit{
....
}
標準布局元素
在Compose中標準的布局元素有三個：Box、Column、Row。
Box
重疊布局，類似Android View系統(tǒng)中的FramLayout布局，元素會重疊顯示，其原型定義如下：
@Composable
inline fun Box(
modifier: Modifier = Modifier, //修飾符
contentAlignment: Alignment = Alignment.TopStart,//內容的位置
propagateMinConstraints: Boolean = false, //是否應將傳入的最小約束傳遞給內容
content: @Composable BoxScope.() -> Unit //內容，即界面元素
) {
......
}
例子
/**
* 標準布局 - Box
*/
@Composable
fun BoxExample(){
Box (
modifier = Modifier.size(width = 230.dp,height = 100.dp),
contentAlignment = Alignment.Center
){ //對應content參數 lambda表達上
Text(text = "Text 1")
Text(text = "Text 2")
}
}
Column
垂直布局，在界面元素垂直方向依次排列。源碼中定義如下：
@Composable
inline fun Column(
modifier: Modifier = Modifier, //修飾符
verticalArrangement: Arrangement.Vertical = Arrangement.Top, //內容元素垂直方向分布方式
horizontalAlignment: Alignment.Horizontal = Alignment.Start, //內容元素水平方向分布方式
content: @Composable ColumnScope.() -> Unit //內部元素
) {
......
}
實例
/**
* 標準布局 - Column
*/
@Composable
fun ColumnExample(){
Column (
modifier = Modifier.size(width = 230.dp,height = 100.dp),
verticalArrangement = Arrangement.Center,//垂直方向居中
horizontalAlignment = Alignment.End //水平方向靠右
){ //對應content參數 lambda表達上
Text(text = "Text 111")
Text(text = "Text 666666")
}
}
Row
元素水平方向分布，源碼中定義：
@Composable
inline fun Row(
modifier: Modifier = Modifier, //修飾符
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,//水平方向排列方式
verticalAlignment: Alignment.Vertical = Alignment.Top, //垂直方向元素排列方式
content: @Composable RowScope.() -> Unit //內部子元素
) {
......
}
示例
/**
* 標準布局 - Row
*/
@Composable
fun RowExample(){
Row (
modifier = Modifier.size(width = 230.dp,height = 100.dp),
horizontalArrangement = Arrangement.SpaceAround,
verticalAlignment = Alignment.Bottom
){ //對應content參數 lambda表達上
Text(text = "Text 111")
Text(text = "Text 666666")
}
}
基本組件
Jetpack Compose中組件庫包括：compose-ui和material。很多常用基本組件都是在material庫中，Compose-ui中組件很少：Image、BasicTextField（輸入框）。
示例：
//添加一個圖片
Image(
//填充內容
painter = painterResource(id = message.iconId),
contentDescription = "logo",
//尺寸及形狀
modifier= Modifier
.padding(top = 2.dp)
.size(40.dp) //圖像尺寸
.clip(CircleShape) //形狀
.border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)//邊框樣式
)
布局模型
在對標準布局元素和組件有了一定了解后，我們來看下Compose的布局流程。
首先Compose布局是一個界面樹，從樹的根節(jié)點開始依次要求其子節(jié)點對自身進行測量，然后遞歸完成所有子節(jié)點的測量，并將約束條件沿著樹向下傳遞給子節(jié)點，并將測量的尺寸和放置指令依次向根節(jié)點傳遞。
以下面可組合函數為示例：
@Composable
fun SearchResult(...) {
Row(...) {
Image(...)
Column(...) {
Text(...)
Text(..)
}
}
}
其布局過程如下圖示：
修飾符
在Compose布局中修飾符至關重要，您可以使用修飾符來修飾或擴充可組合項。常用的修飾符如下：
-
background可組合元素的背景色； -
clickable使可組合項響應用戶點擊，并顯示波紋效果； -
padding設置元素周圍留出空間； -
size可組合元素的尺寸； -
clip可組合元素的形狀； -
border可組合元素的邊框及形狀； -
fillMaxSize可組合元素尺寸按父布局的最大尺寸顯示； -
fillMaxWidth可組合元素寬度按父布局的最大寬度顯示； -
fillMaxHeight可組合元素高度按父布局的最大高度顯示；
除以上外，還有width、height、wrapConentHeight等，用到的時候可以嘗試看看效果。
下面展示一個圓形圖像的示例
/**
* 修飾符使用示例
*/
@Composable
fun ModifierExample(){
//添加一個圖片
Image(
//填充內容
painter = painterResource(id = R.mipmap.ic_girl),
contentDescription = "logo",
//尺寸及形狀
modifier= Modifier
.padding(top = 2.dp)
.background(Color.Blue)//設置藍色背景
.size(40.dp) //圖像尺寸
.clip(CircleShape) //圓形形狀
.border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)//邊框樣式
)
}
修飾符擴展
除了使用Compose提供的修飾符外，我們也可以擴展函數自定義修飾符，具體方式可以參考Jetpack Compose布局（三）一文中講的擴展布局修飾符。
強調：修飾符的使用是有順序的
強調：修飾符的使用是有順序的
強調：修飾符的使用是有順序的
例如，將上例的background和padding順序調換下，就會如下圖效果，仔細看兩圖的頂部邊距，會發(fā)現區(qū)別
槽位布局
Compose中提供了固定槽位的可組合項，以簡化界面元素，這些主要在androidx.compose.material:material庫中,如：Drawer、FloatingActionButton、TopAppBar等。
Material 組件大量使用槽位 API，這是 Compose 引入的一種模式，它在可組合項之上帶來一層自定義設置。這種方法使組件變得更加靈活，因為它們接受可以自行配置的子元素，而不必公開子元素的每個配置參數。槽位會在界面中留出空白區(qū)域，讓開發(fā)者按照自己的意愿來填充。如下圖TopAppBar的槽位。
關于槽位內容會在Jetpack Compose布局（二）中做詳細講解，本篇就不進行深入討論了。
歡迎留言，一起學習，共同進步！
