Android约束布局ConstraintLayout的使用-六虎

开启生长之旅！这是我参加「日新计划 2 月更文应战」的第 6 天，点击检查活动概况

Android引入束缚布局的目的是为了削减布局层级的嵌套，从而提升渲染功用。束缚布局归纳线性布局、相对布局、帧布局的部分功用，缺陷也很明显，便是可能要多写几行代码。所以束缚布局运用时，还得归纳考虑代码量。提升功用也并不一定非得运用束缚布局，也能够在ViewGroup上dispatchDraw。你需要依据事务的具体状况挑选最合适的完成方法。我知道很多人一开始很不习惯运用束缚布局，但已然你诚心诚意问我怎么运用了？于是我就大发慈悲告知你怎么运用呗。

链式束缚

用得最多的非链式束缚莫属了。这看起来是不是类似于相对布局？那么有人问了，已然相对布局写法这么简洁，都不用强制你写另一个方向的占满屏幕的束缚，为什么还要运用束缚布局呢？束缚布局它仍是有它过布局之处的，比如以下一些功用，相对布局是做不到的。

<?xml version="1.0" encoding="utf-8"?>
<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">
    <ImageView
        android:id="@+id/iv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#F0F"
        app:layout_constraintVertical_chainStyle="spread"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/iv2"/>
    <ImageView
        android:id="@+id/iv2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FF0"
        app:layout_constraintBottom_toTopOf="@id/iv3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv1"/>
    <ImageView
        android:id="@+id/iv3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#0FF"
        app:layout_constraintBottom_toTopOf="@id/iv4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv2"/>
    <ImageView
        android:id="@+id/iv4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#0F0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv3"/>
</androidx.constraintlayout.widget.ConstraintLayout>

咱们能够在链首的控件添加一个layout_constraintVertical_chainStyle特点为spread，翻译成展开，在我看来便是排队，要保持间隔一样，并且边缘不能站，默认不写也是指定的spread。

假如你改成spread_inside，就会变成能够靠墙的状况。

那假如你改成packed，就会贴在一同了。

运用Group分组进行显现和躲藏

而假如你添加以下代码在布局中，就会将id为iv1和iv3点色块去掉，这样iv2和iv4就贴在一同了。

<androidx.constraintlayout.widget.Group
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:constraint_referenced_ids="iv1,iv3" />

Guideline引导线

<androidx.constraintlayout.widget.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5"/>

运用引导线，能够在预览布局的时分看到，在运行时是看不到的，能够作为布局的参考线。

切换到Design的选项卡你就能看到了。引导线的另外两个特点是layout_constraintGuide_begin和layout_constraintGuide_end，一看就知道这个是运用边距定位的。

视点束缚

视点束缚的以下三个特点是一同运用的。

layout_constraintCircle
layout_constraintCircleAngle
layout_constraintCircleRadius

<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">
    <ImageView
        android:id="@+id/iv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FFC0C0"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
    <ImageView
        android:id="@+id/iv2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FF0"
        app:layout_constraintCircle="@id/iv1" 
        app:layout_constraintCircleAngle="30"
        app:layout_constraintCircleRadius="150dp"/>
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>

知道你们喜欢粉嫩的，所以特别把色块的颜色换了一下。旋转角是以垂直向上为0度角，顺时针旋转30度。间隔则是核算两控件重心的连线。在矩形区域中，重心就在对角线的交叉点。

位置百分比偏移

<?xml version="1.0" encoding="utf-8"?>
<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">
    <ImageView
        android:id="@+id/iv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FFC0C0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/iv2"/>
    <ImageView
        android:id="@+id/iv2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FF0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv1"/>
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>

这儿需要留意，不是只运用layout_constraintHorizontal_bias就能够了，原有该方向的束缚也不能少。

运用goneMargin设置被依靠的控件gone时，依靠控件的边距

goneMargin有以下特点：

layout_goneMarginStart
layout_goneMarginEnd  
layout_goneMarginTop  
layout_goneMarginBottom

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">
    <ImageView
        android:id="@+id/iv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FFC0C0"
        android:visibility="gone"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/iv2"/>
    <ImageView
        android:id="@+id/iv2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FF0"
        app:layout_goneMarginTop="10dp"
        app:layout_constraintTop_toBottomOf="@+id/iv1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="10dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

束缚宽高比

<?xml version="1.0" encoding="utf-8"?>
<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">
    <ImageView
        android:id="@+id/iv1"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintDimensionRatio="1:1"
        android:background="#FFC0C0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/iv2"/>
    <ImageView
        android:id="@+id/iv2"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="#FF0"
        app:layout_constraintDimensionRatio="H,3:2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/iv1"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

咱们能够将宽高的其间一个设置为0dp，然后这个宽或高依据相对于另一个的份额来。假如高度为0dp，需要依据宽度来确认高度，你能够直接赋值为3:2，也能够赋值为H,3:2，这也是引荐的写法，我一般省掉W和H。假如高度为0dp，你本应该写H，而你写成了W，那就要把份额反过来看宽高比。

权重束缚

这个类似于线性布局的权重功用。

<?xml version="1.0" encoding="utf-8"?>
<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">
    <ImageView
        android:id="@+id/iv1"
        android:layout_width="100dp"
        android:layout_height="0dp"
        app:layout_constraintVertical_weight="1"
        android:background="#FFC0C0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/iv2"/>
    <ImageView
        android:id="@+id/iv2"
        android:layout_width="100dp"
        android:layout_height="0dp"
        app:layout_constraintVertical_weight="2"
        android:background="#FF0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/iv1"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Android约束布局ConstraintLayout的使用

链式束缚

运用Group分组进行显现和躲藏

Guideline引导线

视点束缚

位置百分比偏移

运用goneMargin设置被依靠的控件gone时，依靠控件的边距

束缚宽高比

权重束缚

相关文章

特征匹配（Feature Matching）

Qt Creator中，针对Quick项目的“设计”按钮显示为灰色

图像处理实验：噪声、滤波与直方图

Nginx 安装配置

作者信息