ConstraintLayout的使用

最新推荐文章于 2023-10-01 00:53:35 发布

chocozhao

最新推荐文章于 2023-10-01 00:53:35 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_37812606/article/details/80720843

版权

一、什么是ConstraintLayout

ConstraintLayout是Android中的一种布局，中文称约束布局，在2016年Google I/O大会时提出，2017年2月发布正式版，目前稳定版本为1.0.2。约束布局作为Google今后主推的布局样式，可以完全替代其他布局，降低页面布局层级，提升页面渲染性能。

二、为什么用ConstraintLayout

Google大佬提供了的布局有LinearLayout(线性布局)、RelativeLayout(相对布局)、FramLayout(帧布局)、百分比布局，那么多布局在android2.3(API级别9)以及更高的版本之后，创建布局时Google大佬竟然把ConstraintLayout设为默认布局，那么它的原因是什么？看一下这张图，是不是觉得很熟悉。传统布局的层次结构是这样的

<RelativeLayout>
     <ImageView />
     <ImageView />
     <RelativeLayout>
       <TextView />
       <LinearLayout>
        <TextView />
        <RelativeLayout>
           <EditText />
        </RelativeLayout>
        </LinearLayout>
        <LinearLayout>
          <TextView />
        <RelativeLayout>
          <EditText />
        </RelativeLayout>
       </LinearLayout>
        <TextView />
       </RelativeLayout>
     <LinearLayout >
      <Button />
      <Button />
     </LinearLayout>
</RelativeLayout>

而ConstraintLayout的层次结构是这样的

<android.support.constraint.ConstraintLayout>
  <ImageView />
  <ImageView />
  <TextView />
  <EditText />
  <TextView />
  <TextView />
  <EditText />
  <Button />
  <Button />
  <TextView />
</android.support.constraint.ConstraintLayout>

可以看出传统布局嵌套层次结构太多，从而性能造成负面影响，可以通过Systrace工具看出嵌套视图对界面性能造成的实际影响，而ConstraintLayout完全扁平的层次结构，允许你构建复杂的布局，避免不必要的嵌套View和ViewGroup元素。

三、怎么用ConstraintLayout

ConstraintLayout可在与Android 2.3（API级别9）及更高版本兼容的API库中提供。

在你项目中添加ConstraintLayout

1、确保您的模块级build.gradle文件中声明了maven.google.com存储库

repositories {
 maven {
     url 'https://maven.google.com'
    }
}

2、将该库作为依赖项添加到相同的build.gradle文件中：

dependencies {
 compile 'com.android.support.constraint:constraint-layout:1.0.2'
}

3、在工具栏或同步通知中，点击将项目与Gradle文件同步

建立约束

一般约束

基线约束

二张图简单介绍功能面板

表示固定大小：您可以在下面的文本框中指定特定的尺寸，或者在编辑器中调整视图尺寸

表示Weap Content：根据需要进行扩展以适应其内容

表示Match Constraints：尽可能扩展以满足各方的约束。

属性介绍

ConstraintLayout是一个ViewGroup，它允许您以灵活的方式定位和调整窗口小部件的大小

相对位置

水平方向：左边(left)、右边(right)、双方开始(start)和结束(end)

垂直方向：顶部(top)、底部(bottom)和文字基线(baseline)

约束列表如下：

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf

layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf

layout_constraintBaseline_toBaselineOf

layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

别看很多属性需要记，是你想太多，下面我们进行一下分类

constraintXXX：指定当前控件需要设置约束的属性部分。
toXXXOf：其指定的内容是作为当前控件设置约束需要依赖的控件或父容器（可以理解为设置约束的参照物）。

其中ConstraintLayout的相对位置布局比较灵活，相比于RelativeLayout，ConstraintLayout可以通过layoutconstraintBaselinetoBaselineOf设置两个控件之间的文字相对于baseline对齐。

比如一个例子：

<Button
    android:id="@+id/button5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintRight_toLeftOf="@+id/button3"/>

关键的一句app:layoutconstraintRighttoLeftOf="@+id/button3"：button5的right在button3的left，其他的属性也是大同小异。

边距

一般边距属性

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

GONE边距属性

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

居中位置

水平居中：相对一个控件或者父容器左右对齐

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

垂直居中：相对一个控件或者父容器上下对齐

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

循环位置

layoutconstraintCircle：引用另一个小部件的ID layoutconstraintCircleRadius:与其他小控件的中心距离 layout_constraintCircleAngle:与其他小控件的对应角度（度数，从0到360）

可见性

可见性这个属性大家应该很熟悉，但是约束布局的可见性属性和其它布局相比，存在以下区别：

当控件设为GONE时，被认为尺寸为0。可以理解为布局上的一个点。
若GONE的控件对其它控件有约束，则约束保留并生效，但所有的边距（margin）会清零。

尺寸限制

android:minWidth：设置最小宽度 android:minHeight：设置最小高度 android:maxWidth：设置最大宽度 android:maxHeight：设置最大高度

注意：当尺寸设置为WRAP_CONTENT时，ConstraintLayout将使用这些最小尺寸和最大尺寸。

链

说到链，没有链搞个菠萝咩？首先得创建一个链啦。

创建一个链，问题不大。

其次因为每一个链都需要一个链头来设置元素控制，问题也不大。

再其次就是链式，这个可能有点大问题了，不过不用担心，看一下这个你会发现问题也不大。

我们呢？可以通过设置属性的形式给链条添加第一个元素，可以添加layout_constraintHorizontal_chainStyle或者layout_constraintVertical_chainStyle来设置，而CHAIN_SPREAD是默认样式。

CHAIN_SPREAD ：元素被展开(默认样式)
Weighted chain：在CHAIN_SPREAD的模式下，和LinearLayout的weight权重的设置类似，例如：app:layout_constraintHorizontal_weight="1"
CHAIN_SPREAD_INSIDE：和CHAIN_SPREAD类似，不同点在与链条的端点不会给分散。
CHAIN_PACKED：链条的元素将被包装在一起。子类的水平或垂直偏向属性将影响打包元素的位置。
CHAIN_PACKED With Bias:意思是可以通过修改Bias来控制打包成一组的元素的位置，就是这样：