ConstraintLayout使用详解

作者: darren_he | 来源:发表于2017-10-26 16:59 被阅读2585次

ConstraintLayout 是 Android Studio 2.2 中主要的新增功能之一，也是 Google 在2016 年的 I/O 大会上重点宣传的一个功能。ConstraintLayout 是使用约束的方式来指定各个控件的位置和关系的，相比 RelativeLayout 和 LineatLayout 具有更强的特性，可以减少布局之间的嵌套。

1. 添加 ConstraintLayout

在工程app目录下的 build.gradle 添加如下：

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

2. 相对位置属性

layout_constraint[自身控件位置]_[目标控件位置]="[目标控件ID]"，如果id是父布局的id，可以使用parent

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

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

3. Margin属性

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

4. goneMargin属性

goneMargin属性是指目标控件GONE掉之后，自身控件可以设置个margin值。不过margin的方向需要和控件的相对位置的方向保持一致。

假设我们有这样一个需求：A设置为gone后，B需要距离父布局的左侧200dp，怎么办？这时候，goneMargin属性就派上用场啦，只要设置B的layout_goneMarginLeft=200dp即可。这样，A为gone时，B距离父布局左侧200dp。

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

5. Bias属性

bias属性是指在对齐父容器后，设置水平与竖直的比例。bias支持的属性如下：

layout_constraintHorizontal_bias
layout_constraintVertical_bias

<android.support.constraint.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintHorizontal_bias="0.3"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent/>
         </>

6. Ratio属性

layout_constraintDimensionRatio，通过该属性可以设置View的高宽比。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--指定高度，宽度随着宽高比自适应 -->
    <!--app:layout_constraintDimensionRatio="16:9"  W: 默认，表示宽高比-->
    <TextView
        android:id="@+id/text_01"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="#B0E46E"
        android:text="text_01"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintLeft_toLeftOf="parent" />

    <!--指定高度，宽度随着宽高比自适应 -->
    <!--app:layout_constraintDimensionRatio="H,16:9"  H: 表示高宽比-->
    <TextView
        android:id="@+id/text_02"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="#AA4727"
        android:text="text_02"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_01" />

    <!--指定宽度，按照宽度来计算高宽比，默认是宽高比 -->
    <TextView
        android:id="@+id/text_03"
        android:layout_width="60dp"
        android:layout_height="0dp"
        android:background="#F6BE4F"
        android:text="text_03"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_02" />

    <!--指定宽度，按照宽度来计算高宽比  W:表示高宽比 -->
    <TextView
        android:id="@+id/text_04"
        android:layout_width="60dp"
        android:layout_height="0dp"
        android:background="#CA4B45"
        android:text="text_04"
        app:layout_constraintDimensionRatio="W,16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_03" />

    <!--android:layout_width="0dp"  0dp表示充满父控件或说是充满其余空间-->
    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#CFDEF9"
        android:text="text_05"
        app:layout_constraintDimensionRatio="3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_04" />

</android.support.constraint.ConstraintLayout>

运行图，如下：

7. Chains 链状结构

如下图：

要想Chain Style生效，必须设置当前链方向的边为wrap_content，比如上面的水平链，宽设为wrap_content。还有就是控件要相互引用，比如A的右边依赖B的左边，B的左边依赖A的右边。

Chain Style 设置在第一个控件上。

属性有两个：

layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle

支持的值有三个：

CHAIN_SPREAD：均匀分布控件。
CHAIN_SPREAD_INSIDE，同上，但是边上的控件不均匀分布。
CHAIN_PACKED：控件紧挨在一起，还可以通过bias属性设置偏移量。

Weighted chains：

app:layout_constraintHorizontal_weight
app:layout_constraintVertical_weight

跟线性布局的weight差不多，layout_constraintHorizontal_weight需要设置width=0dp，控件的大小根据设置的weight比例进行设置。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_bottom_01"
        android:layout_width="0dp"
        android:layout_height="56dp"
        android:background="#F67"
        android:gravity="center"
        android:text="首页"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_bottom_02" />

    <TextView
        android:id="@+id/tv_bottom_02"
        android:layout_width="0dp"
        android:layout_height="56dp"
        android:background="#A67"
        android:gravity="center"
        android:text="圈子"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/tv_bottom_01"
        app:layout_constraintRight_toLeftOf="@+id/tv_bottom_03" />

    <TextView
        android:id="@+id/tv_bottom_03"
        android:layout_width="0dp"
        android:layout_height="56dp"
        android:background="#767"
        android:gravity="center"
        android:text="我的"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/tv_bottom_02"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

运行图，如下：

8. Guideline

android.support.constraint.Guideline 该类比较简单，主要用于辅助布局，即类似为辅助线，横向的、纵向的。该布局是不会显示到界面上的。

所以其有个属性为：

android:orientation="vertical"
android:orientation="horizontal"

除此以外，还差个属性，决定该辅助线的位置：

layout_constraintGuide_begin
layout_constraintGuide_end
layout_constraintGuide_percent

可以通过上面3个属性其中之一来确定属性值位置。

begin=30dp，即可认为距离顶部30dp的地方有个辅助线，根据orientation来决定是横向还是纵向。
end=30dp，即为距离底部。
percent=0.8即为距离顶部80%。

比如：有个按钮，决定通过两根辅助线来定位，一根横向距离底部80%，一个纵向距离顶部80%，按钮就定位在他们交叉的地方。

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.Guideline
        android:id="@+id/guideline_h"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8" />

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

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#612"
        app:layout_constraintLeft_toRightOf="@id/guideline_w"
        app:layout_constraintTop_toBottomOf="@id/guideline_h" />

</android.support.constraint.ConstraintLayout>

运行图，如下：

注意ConstraintLayout不支持match_parent属性，要用0dp代替，在加上设置特性的约束属性，即可实现match_parent的效果。

ConstraintLayout官方文档

网友评论

本文标题：ConstraintLayout使用详解

本文链接：https://www.haomeiwen.com/subject/ckckpxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

ConstraintLayout使用详解

1. 添加 ConstraintLayout

2. 相对位置属性

3. Margin属性

4. goneMargin属性

5. Bias属性

6. Ratio属性

7. Chains 链状结构

8. Guideline

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android 学习

android