Compose学习(3) - 传统布局的compose平替

前言

上一篇文章聊到了compose的最简单的示例代码结构，也分析了compose中通过函数的参数设置对界面组件进行动态的调整控制，并且拿Text()文字控件为例子对其进行了参数的解析，这一篇文章我想对比传统xml模式下写界面常用的控件在compose中对标的组件进行一个介绍，拿着这些常见控件，就可以开始实践了。

常见布局

依稀还记得最早入门Android的时候，就需要了解清楚Android的常见布局FrameLayout、RelativeLayout、LinearLayout这三板斧，在没有推出ConstraintLayout之前，Android的界面布局都是在这三个控件的协调下进行，那就先说一下这三个布局的替代方案

• FrameLayout/RelativeLayout -> Box()

在三个传统的xml布局中，除了LinearLayout会协调内部的子控件彼此不想交的连续排列，另外两个布局之间的控件都会有重叠，FrameLayout就是简单以坐标系的左上角把布局进行重叠，RelativeLayout相对可以在子布局间协调相互位置关系，这两个布局的功能在compose中可以通过Box()函数进行实现

在不设置额外的参数的情况下，Box()就是跟FrameLayout一样将内部的布局函数从左上角为起点重叠排布

Box对标FrameLayout.png

如果要模拟出RelativeLayout的的效果，则需要借助compose中的Modifier对象进行调整，简单的通过一个例子就能理解其中的用法

Box中相对位置关系.png

通过设置Box()内部元素的Alignment,可以类似RelativeLayout设置子控件在父控件的相对位置，Modifier.align(Alignment.XXX)这个函数是Box的专属扩展，通过查看源码可以发现这个方法是作用在BoxScope中，并且matchParentSize也是Box的专属扩展，类似在传统模式下的match_parent

@LayoutScopeMarker
@Immutable
interface BoxScope {
 @Stable
 fun Modifier.align(alignment: Alignment): Modifier

 @Stable
 fun Modifier.matchParentSize(): Modifier
}

• LinearLayout -> Row()/Column()

在传统模式下，使用LinearLayout可以通过设置orientation控制内部子组件是纵向还是横向排列，在compose中，将可以纵向和横向排列子布局使用了两个布局函数，Row()和Column()，从命名上就可以很明确的知道布局时横向还是纵向排列，先看一下默认使用

Row():横向排列

Row.png

Column():垂直排列

Column.png

这两个布局在使用上就是方向不一样，看源码参数，可以控制内部布局的排布规则，以Row()为例子，默认是从左到右依次排列，通过设置horizontalArrangement参数，可以让子布局调整方向居中或者从右向左

对齐方式.png

除了控制方向之外，这个属性还可以实现在ConstraintLayout布局中对于子布局均匀等分排布，使用过的都知道，在ConstraintLayout中需要把控件的左右相对依赖关系什么声明清楚，通过layout_constraintHorizontal_chainStyle属性设置排布方向，在compose中，我个人感觉更加方便

spacearound.png

在传统的xml布局下，按照经验我们还会按照权重去协调内部子控件的占比宽度，同样的在compose中，通过Modifier提供的weight()方法，可以达到对应的效果

加权布局.png

值得注意的是，在使用Row()进行加权布局时，传统的xml方式中必须把控件的layout_width和layout_heigth属性赋值，在compose中没有这个限制，则在Row中仅会对水平方向上的剩余空间进行按加权分配，垂直高度没有设置的控件是看不见的，所以上面的例子中是看不见第三个蓝色的Box()组件

• ConstraintLayout -> ConstraintLayout

在传统布局模式中，ConstraintLayout就是jetpack新推出的布局方式，解决了再传统xml布局下由于View层级嵌套太多导致的子View被多次测量的的问题，compose也是jetpack套装里面的ui体系，当然对于ConstraintLayout的支持也基本是一样的

在compose中，有没有没有设置组件的id，在使用约束布局的时候，布局之间的相互关系需要通过方法进行声明,先看一下示例效果

ConstraintLayout.png

通过createRefs()方法设置几个约束的id,然后通过constrainAs()把相应的id参数赋值进去，跟上面的Modifier方法不一样的是，使用constrainAs()不仅要传入参数，还需要一个函数体，在函数体内通过linkTo方法实现控件间的相互约束

在使用ConstraintLayout时经常用到的按比例位置的guideLine,或者多组件边缘对齐先Barrier,还有上面提到的多控件排列方式chain，在compose中都有对应的用法

@Composable
fun DefaultPreview() {
    ConstraintLayout(Modifier.fillMaxWidth()) {
        //创建相互约束的组件的ID
        val (box1, box2, box3) = createRefs()
        //guideline的用法，可以从四个方向更加灵活
        val startGuideLine = createGuidelineFromStart(0.7f)
        Box(
            modifier = Modifier
                .size(20.dp)
                .background(Color.Yellow)
                .constrainAs(box1) {
                    top.linkTo(parent.top, margin = 10.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
        )
        Box(
            modifier = Modifier
                .size(40.dp)
                .background(Color.Red)
                .constrainAs(box2) {
                    top.linkTo(box1.bottom)
                    //约束条件可以直接使用参考线，红色的方块在参考线右侧
                    start.linkTo(startGuideLine)
                }
        )
        //通过createStartBarrier方法创建一个屏障，一般对于有都不定长的Text与其他组件组合时使用确定边界
        val startBarrier = createStartBarrier(box1, box2)
        Box(
            modifier = Modifier
                .size(60.dp)
                .background(Color.Green)
                .constrainAs(box3) {
                    top.linkTo(box2.bottom)
                    //创建的参考线和屏障都可以直接引用
                    end.linkTo(startBarrier)
                }
        )

       //Chain功能使用示例
        val boxStart = createRef()
        val boxMid = createRef()
        val boxEnd = createRef()
        //通过createHorizontalChain方法就建立了Chain的约束，设置不同的chainStyle达到不同的效果
        val horizontalChain =
            createHorizontalChain(boxStart, boxMid, boxEnd, chainStyle = ChainStyle.Packed)
        Box(modifier = Modifier
            .size(20.dp)
            .background(Color.Blue)
            .constrainAs(boxStart) {
                start.linkTo(parent.start)
                end.linkTo(boxMid.start)
                top.linkTo(box3.bottom)
            })
        Box(modifier = Modifier
            .size(20.dp)
            .background(Color.Blue)
            .constrainAs(boxMid) {
                start.linkTo(boxStart.end)
                end.linkTo(boxEnd.start)
                top.linkTo(boxStart.top)
            })
        Box(modifier = Modifier
            .size(20.dp)
            .background(Color.Blue)
            .constrainAs(boxEnd) {
                start.linkTo(boxMid.end)
                end.linkTo(parent.end)
                top.linkTo(boxStart.top)
            })
    }
}

上面针对常用的方法约束方法进行了一个简单的示例，具体的更详细的使用或者介绍，还是建议网上找一篇深度解析对应控件的文章，我写文章就是记录自己学习也给想入门compose的朋友一个扫盲，从浅到深，从使用到原理的对compose进行学习理解,上面的演示效果可以参考下图

chain.png

小结

这篇文章介绍了传统xml布局模式下的常见布局的compose替代控件，通过熟悉这部分，可以针对开发中常见的静态布局实现，单纯的从重叠，相互位置关系进行了分析，下一篇文章，我会对传统模式下的滑动控件，ViewPager和RecyclerView在compose的替代对象进行记录学习。

题外话

写文章还是很难，尤其是坚持记录写文章，这个号被我开了好多条支线，每条支线都是随缘记录，如果觉得写的文章对你有帮助，麻烦路过的可以点赞支持一下，我也在不断的学习之中，如果文章有错误或者有待提高的点，路过的大佬有心情给我指点一下就再好不过了，十万分感谢！