ConstraintLayout常用且好用的特性总结

2020-10-22 本文已影响0人岁月神偷_4676

宽高比
当ConstraintLayout布局中某个控件的宽或高中的一个被严格约束（所谓严格约束即指大小可被推断）则另一个可通过layout_constraintDimensionRatio属性来设置大小为与另一边有指定的比率。属性的值即为宽与高的比例值，可以是一个浮点数，也可以是x:y的形式。可以通过在比例值前面添加'w'或者‘h’并用逗号隔开，来分别指定是宽还是高是按照另一边的比例求出的。代码如下：

<Button android:layout_width="0dp"
                   android:layout_height="0dp"
                   app:layout_constraintDimensionRatio="H,16:9"
                   app:layout_constraintBottom_toBottomOf="parent"
                   app:layout_constraintTop_toTopOf="parent"/>

以上代码实现了按钮的高度与宽度的比为16:9,宽度与父控件同宽

按百分比定义控件的宽或高
按照百分比定义控件的宽高步骤如下：
- 将布局中某个控件的宽或者高设置为0或者MATCH_CONSTRAINT (0dp)
- 设置app:layout_constraintWidth_default="percent"
- 设置layout_constraintWidth_percent 或layout_constraintHeight_percent属性的值为（0，1]之间的某个小数
链
ConstraintLayout本身就是基于依赖的布局，当几个控件之间在水平方向或垂直方向相互依赖时，就形成了链。如下图所示：

包含3个元素的链

实现上图所示布局的代码如下：

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

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent" />

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

链头及样式
链有链头，水平链的最左端元素或者垂直链的最上端元素成为链头。在链头中可以通过layout_constraintHorizontal_chainStyle属性定义链的样式（Style）。chains提供了3种样式，分别是：

CHAIN_SPREAD —— 展开元素 (默认)；
CHAIN_SPREAD_INSIDE —— 展开元素，但链的两端贴近parent；
CHAIN_PACKED —— 链的元素将被打包在一起。
权重链
可以通过将链中某个元素的宽（水平链）或高（垂直链）设置为0或者MATCH_CONSTRAINT，然后通过layout_constraintHorizontal_weight属性给控件设置权重，权重越大所占的空间越大。代码如下：

<TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2"
        app:layout_constraintHorizontal_weight="2" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="3" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="4" />

不同样式的链及权重链的示意图如下：

不同样式的链

屏障(Barrier)
假如有这样一个需求，有A，B，C 3个控件，A,B的宽度不固定，现在要求无论A,B的宽度如何变化控件C始终在A和B的右侧。那么就可以通过Barrier轻松实现。只要通过Barrier将A,B与C控件分割开，让A，B在Barrier的左侧，C在Barrier的右侧即可，代码如下：

<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" />

实现的效果如下图所示

分组(Group)
可以将几个控件归为一组，这样做的一个好处是可以很方便的控制这些控件的可见性。同一控件可以属于多个分组，它的可见性由最后一个分组决定。代码如下：

<androidx.constraintlayout.widget.Group
              android:id="@+id/group"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:visibility="visible"
              app:constraint_referenced_ids="button4,button9" />

辅助线(Guideline）
Guileline在布局中并不可见，但是它可以为布置其他控件提供约束，作为其他控件的位置参考。Guideline有水平和垂直之分，通过android:orientation属性设置。水平Guideline高度为0，宽度为它的父控件宽度，垂直Guideline宽度为0，高度为它的父控件高度。可以通过3个属性来确定Guideline在布局中的位置
- layout_constraintGuide_begin 指定Guideline距父控件左或上的距离
- layout_constraintGuide_end 指定Guideline距父控件右或下的距离
- layout_constraintGuide_percent 指定Guideline距父控件左或上的百分比

以下代码将一个Button控件约束到一个垂直Guideline

<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            app:layout_constraintGuide_begin="100dp"
            android:orientation="vertical"/>

    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

以上便是ConstraintLayout比较常见且较为有用的特性。合理使用这些特性将会起到事半功倍的效果。

ConstraintLayout常用且好用的特性总结

猜你喜欢

热点阅读