稀有猿诉

十年磨一剑,历炼出锋芒,说话千百句,不如码二行。

Android ConstraintLayout使用攻略

ConstraintLayout是新一代的布局,它汲取了众家之长,把布局的概念进行了大统一,灵活且强大,基本上可以干掉以前所有的常用布局(LinearLayout, RelativeLayout和FrameLayout)。自从Android Studio 2.3(大约在2017年)后,它就变成了Android Studio的默认模板的布局控件,可以看出谷歌对它的钟爱程度。今天就来学习一下如何使用这个新布局神器。

简述

ConstraintLayout)与RelativeLayout有些类似,是一个布局管理器(ViewGroup),但要强大许多,它可以以各种方式排列子View,以及按比例伸缩。最重要的改变就是它对于『Drag and drop』拖拽式制作GUI页面支持的相当的好。当然了这个取决于个人喜好,很多人仍然喜欢用写代码的方式直接去写xml文件,包括我在内。拖拽式虽然直观,但是不方便精准控制,对于一般性的布局来说尚可,但稍复杂了后,以及有了一些可滑动的view时,就不是那么的方便了。对于喜欢拖拽的同学可以查看官方的一个教程,以及郭大婶的一篇文章,这两篇专注于拖拽式,且讲的都比较详细。

添加依赖

因为ConstraintLayout并不是在标准的SDK中,而是被放在了support SDK中,现在统一叫androidx了,所以要单独添加依赖:

1
2
3
 dependencies {
      implementation 'com.android.support.constraint:constraint-layout:2.1.0'
 }

概念与术语

ContraintLayout中把一切有关布局的参数都称之为Constraint(约束),长和宽,对齐,居中,margin和padding都是constraint。布局中的属性均以”layout_constraint”为前缀。 约束(Constrain)的意思是指用另外一个View(包括父布局即ContraintLayout)对当前View的某一布局参数施加影响。具体的影响叫做Constraint,另外一个View称作约束对象(Constraining Object),当前View称作被约束对象(Constrainted Object)。

1
2
3
     <Button android:id="@+id/buttonA" ... />
         <Button android:id="@+id/buttonB" ...
                 app:layout_constraintLeft_toRightOf="@id/buttonA" />

排列方式

对子View的排列方式是一个ViewGroup的最基础的功能,它也体现了不同的布局管理器的作用,如线性布局(LinearLayout)是以水平或者垂直方向平铺方式来排列子View的。ConstraintLayout是以类似RelativeLayout的方式,需要针对每个子View指定如何排列。

基础排列方式

最为基础的排列方式就是针对每个子View,指定它相对于另外一个View或者父布局(也就是ConstraintLayout本身)的相对位置,从而确定该View的具体方位。具体就是[left, top, right, bottom]四个关键的排列元素相对于另外一个View或者父布局的位置关系。

如,layout_constraintLeft_toLeftOf=“parent”,这就是左边与父布局左边对齐;layout_constraintTop_toBottomOf=”id/header”,这是把这个View放在id为header的下面。以此类推,因为与RelativeLayout的布局参数比较类似,就不细说了,详情可参阅文档。

还有一个非常实用的Constraint叫做baseline,它是专门针对TextView的,baseline也即文本的基线,可以简单理解为文字的底部,当有两个TextiView不一样大,文字大小也不一样时,却需要对齐文本,这个属于就相当的有用。

1
2
3
4
5
6
<TextView android:id="@+id/TextView1"/>

<TextView
    android:id="@+id/TextView2"
    app:layout_constraintLeft_toRightOf="@+id/TextView1"
    app:layout_constraintBaseline_toBaselineOf="@+id/TextView1"/>

margin

常规使用与其他布局是一样的,通过layout_margin[Start,End,Left,Right,Bottom,Top]来指定与约束对象之间的margin,这个不细说了。

需要说一下,ConstraintLayout有一个goneMargin,可以用于当一个约束对象的Visibility被设置为GONE时,使用。用layout_goneMargin[Start,End,Left,Top,Right,Bottom]来设置。

比如A约束B,B在A的右边,它俩挨着,但如果A的Visibility设置为GONE时,正常情况下B就会挨到原来A的左边了,跑到了左边界上,这时可能就会变得比较丑了,如果使用margin,比如在A和B中间加一个margin,可以解决问题,但是也会影响当A可见的时候。而用goneMargin就可以完美的解决此种场景。layout_goneMarginStart=“10dip”,那么这个margin只有当约束对象A的Visibility被置为GONE时,才会生效,这时B虽然跑到了左边界上,但是还有margin,就不会那么丑了。(其实goneMargin应用的场景也比较有限,前面说的case,也可以用A和B的父布局的leftPadding来解决)

相当骚气的环状排列方式

除了常规的行列式排列以外,这货还非常骚气的可以环状排列,以约束对象为圆心,通过角度和半径来约束位置:

  • layout_constraintCircle 用以指定作为圆心的约束对象(其他view的id)
  • layout_constraintCircleRadius 被约束对象与圆心的距离
  • layout_constraintCircleAngle 被约束对象与横轴的角度(0~360度之间)

1
2
3
4
5
  <Button android:id="@+id/buttonA" ... />
  <Button android:id="@+id/buttonB" ...
      app:layout_constraintCircle="@+id/buttonA"
      app:layout_constraintCircleRadius="100dp"
      app:layout_constraintCircleAngle="45" />

环状排列实例

环状排列虽然骚气,但是现实中似乎应用场景不多。

居中与对齐

对齐不是大问题,前面讲的如何排列其实就是对齐,选定一个约束对象后,其他对象都受其约束,就自然对齐了。

比较常见的问题,以及大部分时候比较麻烦的是居中,平衡与中庸中符合绝大多数审美的,因此布局时,绝大多数情况下都是需要居中的。居中的实现的方式就是两边都约束于父布局(也即ConstraintLayout),如:

1
2
3
4
5
     <androidx.constraintlayout.widget.ConstraintLayout ...>
         <Button android:id="@+id/button" ...
             app:layout_constraintLeft_toLeftOf="parent"
             app:layout_constraintRight_toRightOf="parent"/>
     </>

居中,其实就是两边的约束边距各占空余空间的50%,扩展开来,想要实现不完全居中,两边边距呈一定比例关系,也是可以办到的。比如说黄金比例0.618就比居中好看,这也好办:

1
2
3
4
5
6
   <androidx.constraintlayout.widget.ConstraintLayout ...>
         <Button android:id="@+id/button" ...
             app:layout_constraintHorizontal_bias="0.382"
             app:layout_constraintLeft_toLeftOf="parent"
             app:layout_constraintRight_toRightOf="parent"/>
  </>

这个比例控制叫bias,可以有Horizontal和Vertical两个方向。

尺寸

尺寸也就是针对子View的宽与高的约束,其实大部分时候一些具体的子View的宽与高要么指定大小,要么是WRAP_CONTENT的,但有些时候可能就是需要更加的灵活一些,这时就可以考虑用ConstraintLayout里面的一些特性。宽与高设置为固定大小或者WRAP_CONTENT时与其他ViewGroup是一样的,不用多说,要想特别一点的就是设置为『0dip』或者MATCH_CONSTRAINT时,就会用其他约束来决定该View的宽或者高。后面重点讨论有约束的情况。

默认行为

如果子View的宽或者高设置为了MATCH_CONSTRAINT(或者『0dip』)时,默认的行为是它会占满剩余的可用空间。

Max与Min

还可以加上最大最小的限制:

  • layout_constraintWidth_min and layout_constraintHeight_min : will set the minimum size for this dimension
  • layout_constraintWidth_max and layout_constraintHeight_max : will set the maximum size for this dimension
  • layout_constraintWidth_percent and layout_constraintHeight_percent : will set the size of this dimension as a percentage of the parent

按约束对象的比例来设置(Percent)

前面的默认行为或者最大最小还算不上啥,其他ViewGroup也有类似参数。最为变态与强大的是可以按约束对象的比例来作为此View的宽或者高:

  • The dimension should be set to MATCH_CONSTRAINT (0dp)
  • The default should be set to percent app:layout_constraintWidth_default=“percent” or app:layout_constraintHeight_default=“percent”
  • Then set the layout_constraintWidth_percent or layout_constraintHeight_percent attributes to a value between 0 and 1

自身宽高比(Ratio)

这个是最变态的约束方式,可以设置一个自身的宽高比,以确定子View的尺寸,当然了具体的宽或者高还要以其他约束方式确定具体尺寸,然后再按照设置的宽高比对另外一个进行约束。比如,实现一个方形的按扭,宽是其自身要求的宽度值(WRAP_CONTENT),设置的宽高比是1:1,所以高度也会跟宽度一样,就是一个方形的按扭了:

1
2
3
    <Button android:layout_width="wrap_content"
               android:layout_height="0dp"
               app:layout_constraintDimensionRatio="1:1" />

高级特性

前面讲的是一些基础使用方式,但是这货远不止这些,还有一些非常强大的功能,下面简单介绍两个。

链(Chains)

在某一个方向上(横着或者竖着)有着相互约束的一组子View,会被视为一个链,第一个称作头部(Head),可以应用一些样式以对整个链内的子View都产生影响。

这里的相互约束的意思是,比如有上面A,B,C三个子View,那么它们要相互约束,也即:

1
2
3
4
5
6
7
8
  <ConstraintLayout>
      <A layout_constraintLeft_toLeftOf="parent"
           layout_constraintRight_toRightOf="B" />
      <B layout_constraintLeft_toLeftOf="A"
           layout_constraintRight_toRightOf="C" />
      <C layout_constraintLeft_toLeftOf="B"
           layout_constraintRight_toRightOf="parent" />
  </ConstraintLayout>

就可以,对头部子View A进行样式(Chain style),通过layout_constraintHorizontal_chainStyle来设置:

  • CHAIN_SPREAD – the elements will be spread out (default style) Weighted chain – in CHAIN_SPREAD mode, if some widgets are set to MATCH_CONSTRAINT, they will split the available space CHAIN_SPREAD_INSIDE – similar, but the endpoints of the chain will not be spread out* CHAIN_PACKED – the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements

链中的权重(Weighted chains)

默认情况下,子View会均分并占满可用的空间。可以用权重来按比例分配,给子View加上layout_constraintHorizontal_weight后,就会按比例分配,这个与LinearLayout的layoutWeight用法是一样的。

组(Groups)

为了View的渲染性能,各路大神告诉我们要尽可能的让布局扁平化,但是,如果太扁平了,全都放在一个ViewGroup下面,就会混乱,特别是像RelativeLayout和ConstraintLayout,子View的排列方式会产生相互依赖,会有牵一发动全身的情况出现。为了避免这种情况,就需要对子View进行分组,对页面进行区域划分,把紧密相关的视为一个组。以往,会用一个子ViewGroup把一个组包起来,虽然会加深View的层次,但这样能避免牵一发动全身。

而对于ConstraintLayout来说,有更先进的方式了,它有一个类叫Group,就是专门用来干这件事儿的,但Group对象并不是一个真的子View,这里的意思是它并不会在View tree中进行渲染,它是专门用于管理属于它的子View的,比如方便对整个组进行Visibility的设置。

神器要如何使用

前面的介绍就差不多了,ConstraintLayout还是相当的强大的,如有可能还是尽可能的多用它吧。它的实现上面确实挺复杂的,毕竟功能比较强大,但它的效率并不差。对于常用的几大布局都可以直接用它来替代。

当线性布局使用(as LinearLayout)

线性布局最大的优势就在于可以用weight的方式来按比例排放,而这个用前面提到的Chain就可以完美的解决。所以,LinearLayout可以完全放弃。

当层叠布局使用(as FrameLayout)

FrameLayout的全用场景一般是作为整个应用的根布局,特别是HomeActivity+Fragment这种架构。从纯的功能角度来讲,ConstraintLayout可以完全实现FrameLayout的所有功能,所以,FrameLayout也可以放弃。

但从简单方便角度来讲,假如是HomeActivity的根布局,子View都是MATCH_PARENT的Fragement的话,也没有必要换成ConstraintLayout,这种场景FrameLayout完全够用,而且非常适合它。换成ConstraintLayout反倒有些浪费,有些杀鸡用牛刀。

当相对布局使用(as RelativeLayout)

从前面的讲述可以看出,ConstraintLayout几乎就是RelativeLayout的加强版。所以,凡是用到RelativeLayout的地方都应该换成ConstaintLayout

参考资料

Comments