AndroidUI-约束布局ConstrainLayout

最新推荐文章于 2025-01-16 17:21:43 发布

原创最新推荐文章于 2025-01-16 17:21:43 发布 · 779 阅读

CC 4.0 BY-SA版权

本文详细介绍了Android中的约束布局ConstrainLayout，包括引入依赖、相对定位、角度定位、边距设置、居中与偏移、尺寸约束、链式布局、优化级别、屏障、分组、占位符和辅助线的使用，旨在帮助开发者更好地理解和运用ConstrainLayout，减少视图层级嵌套，提高布局效率。

参考资料[约束布局ConstraintLayout看这一篇就够了](https://www.jianshu.com/p/17ec9bd6ca8a)

约束布局ConstrainLayout

约束布局的出现主要是为了解决试图层级嵌套过多的情况，它可以在api9以上的版本使用。从2.3开始，官方的模板默认使用ConstrainLayout。

1.引入依赖

使用约束布局需要引入以下依赖：

    implementation 'com.android.support.constraint:constraint-layout:1.1.3'

2.相对定位

相对于其他控件的上下左右，以及基准线进行布局。

//本元素的 ?1 位置 与 目标元素 的 ?2 位置相对应
app:layout_constrain[?1]_to[?2]Of="@+id/目标元素Id"

3.角度定位

相对于其他控件的中心，以y轴为0度顺时针计算角度，配合距离进行布局。

//本元素以目标元素为圆心
app:layout_constraintCircle="@+id/目标元素Id"
//围绕圆心从y轴开始的旋转角度
app:layout_constraintCircleAngle="90"
//本元素中心距离目标元素中心的距离
app:layout_constraintCircleRadius="150dp"

4.边距

直接设置边距是不生效的，只有当控件被约束了位置之后，边距才有效。

//边距需大于等于0
app:layout_margin[?]="1dp"

goneMargin可以在目标元素gone隐藏时生效。

app:layout_goneMarginLeft="10dp"

5.居中与偏移

如果给元素的两个相反位置设置了约束，那么这个元素就会放置在两个约束的中间。

//竖直居中
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
//在设置约束之后可以设置margin也是有效的
//还可以使用bias属性进行偏移，值为0~1 0的时候在最顶部，1的时候在底部
app:layout_constraintVertical_bias="0.2"

6.尺寸约束

使用指定的尺寸
wrap_content
使用wrap_content的时候可以设置最大最小的高度或者宽度：
android:minWidth 最小的宽度
android:minHeight 最小的高度
android:maxWidth 最大的宽度
android:maxHeight 最大的高度
注意！当ConstraintLayout为1.1版本以下时，使用这些属性需要加上强制约束，如下所示：
app:constrainedWidth=”true”
app:constrainedHeight=”true”
0dp （官方不建议使用match_parent，应该使用0dp配合约束达成效果）
宽高比
当宽或高中至少有一个为0dp时，可以设置宽高比

//宽：高 = 1：1
app:layout_constraintDimensionRatio="1:1"

7.链

两个以上的控件通过相互约束结合在一起，就可以看作一条链，可以改变链的样式。

CHAIN_SPREAD 展开元素（控件之间，控件两端布局是平分的，默认）
CHAIN_SPREAD_INSIDE 展开元素（两端不留空间，控件之间平分）
CHAIN_PACKED —— 链的元素将被打包在一起。（之间不留空间）

将宽或高设置为0dp，还可以通过权重控制大小。

app:layout_constraintHorizontal_weight="1"

8.优化级别

有一个名为 layout_optimizationLevel 的新标签，用于配置优化级别。它可以设置为以下内容：

barriers：找出屏障所在，并用简单的约束取代它们
direct：优化那些直接连接到固定元素的元素，例如屏幕边缘或引导线，并继续优化直接连接到它们的任何元素。
standard：这是包含barriers 和 direct 的默认优化级别。
dimensions：目前处于实验阶段，并且可能会在某些布局上出现问题——它会通过计算维度来优化布局传递。
chains：目前正在实验阶段，并计算出如何布置固定尺寸的元素链。

9.屏障

在某控件需要位于多个控件的一侧时，由于无法预估多个控件的长度，不好设置约束，这个时候就需要屏障来完成效果。

<TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/TextView1" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="TextView1,TextView2" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/barrier" />

10.分组

通过分组，可以统一控制某几个控件的显示和隐藏。

 <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="TextView1,TextView3" />

11.占位符

使用占位符可以将某个控件转移至占位符位置，使用占位符的布局属性。

    <android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/textview"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

12.辅助线

可以定义虚拟的辅助线来辅助约束控件。

<android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="50dp" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />