在上篇《Jetpack Compose技術(shù)快速上手》一文中簡單介紹了Compose，那么這邊我們就來學(xué)習(xí)下Compose的布局。由于布局這塊涉及內(nèi)容較多，會(huì)分開寫。
布局主要包括：布局基礎(chǔ)知識(shí)、Material組件和布局、自定義布局、Compose中使用ConstraintLayout。

image.png

本文重點(diǎn)講解布局基礎(chǔ)知識(shí)。
主要涉及：可組合函數(shù)、標(biāo)準(zhǔn)布局元素、基本組件、布局模型、修飾符、槽位布局。如下圖：

本文涉及主要知識(shí)點(diǎn)

可組合函數(shù)

可組合函數(shù)是 Compose 的基本構(gòu)建塊，返回值是 Unit 的函數(shù)，用于描述界面中的某一部分，該函數(shù)可接收參數(shù)。
組合函數(shù)中可包含多個(gè)界面元素。
其基本格式為：

@Composable
fun xxx():Unit{
....
}

標(biāo)準(zhǔn)布局元素

在Compose中標(biāo)準(zhǔn)的布局元素有三個(gè)：Box、Column、Row。

標(biāo)準(zhǔn)布局元素特性示意圖

Box
重疊布局，類似Android View系統(tǒng)中的FramLayout布局，元素會(huì)重疊顯示，其原型定義如下：

@Composable
inline fun Box(
    modifier: Modifier = Modifier,                   //修飾符
    contentAlignment: Alignment = Alignment.TopStart,//內(nèi)容的位置
    propagateMinConstraints: Boolean = false,       //是否應(yīng)將傳入的最小約束傳遞給內(nèi)容
    content: @Composable BoxScope.() -> Unit    //內(nèi)容，即界面元素
) {
    ......
}

例子

/**
 * 標(biāo)準(zhǔn)布局 - Box
 */
@Composable
fun BoxExample(){
    Box (
        modifier = Modifier.size(width = 230.dp,height = 100.dp),
        contentAlignment = Alignment.Center
    ){  //對應(yīng)content參數(shù) lambda表達(dá)上
        Text(text = "Text 1")
        Text(text = "Text 2")
    }
}

預(yù)覽結(jié)果

Column
垂直布局，在界面元素垂直方向依次排列。源碼中定義如下：

@Composable
inline fun Column(
    modifier: Modifier = Modifier,          //修飾符
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,  //內(nèi)容元素垂直方向分布方式
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,    //內(nèi)容元素水平方向分布方式
    content: @Composable ColumnScope.() -> Unit                      //內(nèi)部元素
) {
    ......
}

實(shí)例

/**
 * 標(biāo)準(zhǔn)布局 - Column
 */
@Composable
fun ColumnExample(){
    Column (
        modifier = Modifier.size(width = 230.dp,height = 100.dp),
        verticalArrangement = Arrangement.Center,//垂直方向居中
        horizontalAlignment = Alignment.End      //水平方向靠右
    ){  //對應(yīng)content參數(shù) lambda表達(dá)上
        Text(text = "Text 111")
        Text(text = "Text 666666")
    }
}

Column示例預(yù)覽結(jié)果

Row
元素水平方向分布，源碼中定義：

@Composable
inline fun Row(
    modifier: Modifier = Modifier,          //修飾符
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,//水平方向排列方式
    verticalAlignment: Alignment.Vertical = Alignment.Top,      //垂直方向元素排列方式
    content: @Composable RowScope.() -> Unit          //內(nèi)部子元素
) {
    ......
}

示例

/**
 * 標(biāo)準(zhǔn)布局 - Row
 */
@Composable
fun RowExample(){
    Row (
        modifier = Modifier.size(width = 230.dp,height = 100.dp),
        horizontalArrangement = Arrangement.SpaceAround,
        verticalAlignment = Alignment.Bottom
    ){  //對應(yīng)content參數(shù) lambda表達(dá)上
        Text(text = "Text 111")
        Text(text = "Text 666666")
    }
}

Row示例預(yù)覽

基本組件

Jetpack Compose中組件庫包括：compose-ui和material。很多常用基本組件都是在material庫中，Compose-ui中組件很少：Image、BasicTextField（輸入框）。
示例：

//添加一個(gè)圖片
Image(
      //填充內(nèi)容
      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)//邊框樣式
  )

布局模型

在對標(biāo)準(zhǔn)布局元素和組件有了一定了解后，我們來看下Compose的布局流程。
首先Compose布局是一個(gè)界面樹，從樹的根節(jié)點(diǎn)開始依次要求其子節(jié)點(diǎn)對自身進(jìn)行測量，然后遞歸完成所有子節(jié)點(diǎn)的測量，并將約束條件沿著樹向下傳遞給子節(jié)點(diǎn)，并將測量的尺寸和放置指令依次向根節(jié)點(diǎn)傳遞。

以下面可組合函數(shù)為示例：

@Composable
fun SearchResult(...) {
  Row(...) {
    Image(...)
    Column(...) {
      Text(...)
      Text(..)
    }
  }
}

其布局過程如下圖示：

image.png

修飾符

在Compose布局中修飾符至關(guān)重要，您可以使用修飾符來修飾或擴(kuò)充可組合項(xiàng)。常用的修飾符如下：

• background 可組合元素的背景色；
• clickable 使可組合項(xiàng)響應(yīng)用戶點(diǎn)擊，并顯示波紋效果；
• padding 設(shè)置元素周圍留出空間；
• size 可組合元素的尺寸；
• clip 可組合元素的形狀；
• border 可組合元素的邊框及形狀；
• fillMaxSize可組合元素尺寸按父布局的最大尺寸顯示；
• fillMaxWidth 可組合元素寬度按父布局的最大寬度顯示；
• fillMaxHeight 可組合元素高度按父布局的最大高度顯示；
  除以上外，還有width、height、wrapConentHeight等，用到的時(shí)候可以嘗試看看效果。
  下面展示一個(gè)圓形圖像的示例

/**
 * 修飾符使用示例
 */
@Composable
fun ModifierExample(){
    //添加一個(gè)圖片
    Image(
        //填充內(nèi)容
        painter = painterResource(id = R.mipmap.ic_girl),
        contentDescription = "logo",
        //尺寸及形狀
        modifier= Modifier
            .padding(top = 2.dp)
            .background(Color.Blue)//設(shè)置藍(lán)色背景
            .size(40.dp)             //圖像尺寸
            .clip(CircleShape)       //圓形形狀
            .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)//邊框樣式
    )
}

修飾符示例

修飾符擴(kuò)展
除了使用Compose提供的修飾符外，我們也可以擴(kuò)展函數(shù)自定義修飾符，具體方式可以參考Jetpack Compose布局（三）一文中講的擴(kuò)展布局修飾符。

強(qiáng)調(diào)：修飾符的使用是有順序的
強(qiáng)調(diào)：修飾符的使用是有順序的
強(qiáng)調(diào)：修飾符的使用是有順序的
例如，將上例的background和padding順序調(diào)換下，就會(huì)如下圖效果，仔細(xì)看兩圖的頂部邊距，會(huì)發(fā)現(xiàn)區(qū)別

調(diào)換background和padding順序的效果圖

槽位布局

Compose中提供了固定槽位的可組合項(xiàng)，以簡化界面元素，這些主要在androidx.compose.material:material庫中,如：Drawer、FloatingActionButton、TopAppBar等。
Material 組件大量使用槽位 API，這是 Compose 引入的一種模式，它在可組合項(xiàng)之上帶來一層自定義設(shè)置。這種方法使組件變得更加靈活，因?yàn)樗鼈兘邮芸梢宰孕信渲玫淖釉兀槐毓_子元素的每個(gè)配置參數(shù)。槽位會(huì)在界面中留出空白區(qū)域，讓開發(fā)者按照自己的意愿來填充。如下圖TopAppBar的槽位。

TopAppBar的槽位

關(guān)于槽位內(nèi)容會(huì)在Jetpack Compose布局（二）中做詳細(xì)講解，本篇就不進(jìn)行深入討論了。

歡迎留言，一起學(xué)習(xí)，共同進(jìn)步！

github - 示例源碼
gitee - 示例源碼