Android ConstraintLayout的学习

最新推荐文章于 2025-10-18 17:11:19 发布

原创最新推荐文章于 2025-10-18 17:11:19 发布 · 500 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局控件

Android 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了Android ConstraintLayout的使用方法和技巧，包括减少布局嵌套、提高性能的优势，并讲解了常见属性如约束方向、宽高比例控制、Chain链、拉力控制及Guideline辅助线的应用。

优势:

减少布局嵌套
性能更好
功能更强大

参考博客:

Android ConstraintLayout 使用详解

ConstraintLayout 完全解析快来优化你的布局吧

ConstraintLayout可视化操作

ConstraintLayout的性能优势

引入步骤

 compile 'com.android.support.constraint:constraint-layout:1.0.2'

常见属性:

app:layout_constraintLeft_toLeftOf="xxx"
//控件的左侧和B控件的右侧对齐,以下以此类堆 xxx可以是控件的id也可以是parent(父容器)
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="parent"

app:layout_constraintBaseline_toBaselineOf="xxx"两控件的baseLine对齐

控制宽高比例

宽高设置为0dp,然后

app:layout_constraintDimensionRatio="16:6"
app:layout_constraintDimensionRatio="w,16:6"
app:layout_constraintDimensionRatio="h,16:6"

Chain 链

Chain 链比较难描述，它是一种特殊的约束，可以为多个通过 chain 链连接的 View 来分发剩余空间位置，类似于 LinearLayout 中的权重比 weight 属性，但 Chains 链要强大得多

链条分为水平链条和竖直链条两种，分别用 layout_constraintHorizontal_chainStyle 和 layout_constraintVertical_chainStyle 两个属性来设置

app:layout_constraintHorizontal_chainStyle有三个值: spread,spread_inside,packed 默认是spread

<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/tab1"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#ffce"
        android:gravity="center"
        android:text="TAB1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tab2"/>

    <TextView
        android:id="@+id/tab2"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#1c5bc2"
        android:gravity="center"
        android:text="TAB2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tab1"
        app:layout_constraintRight_toLeftOf="@+id/tab3"/>

    <TextView
        android:id="@+id/tab3"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#ba1b98"
        android:gravity="center"
        android:text="TAB3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tab2"
        app:layout_constraintRight_toRightOf="parent"/>


</android.support.constraint.ConstraintLayout>

宽度非0,style为spread时

android:layout_width="wrap_content"
app:layout_constraintHorizontal_chainStyle="spread"

宽度非0,style为packed时

        android:layout_width="wrap_content"
        app:layout_constraintHorizontal_chainStyle="packed"

宽度非0,style为spread_inside时

android:layout_width="wrap_content"
app:layout_constraintHorizontal_chainStyle="spread_inside"

控制拉力

app:layout_constraintHorizontal_bias
app:layout_constraintVertical_bias

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#cc850e"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.9"/>

Guideline

不显示的线,用来定位

layout_constraintGuide_begin
layout_constraintGuide_end
layout_constraintGuide_percent

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

end=30dp，即为距离底部。
percent=0.8即为距离顶部80%。

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

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

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#e60303"
        android:textColor="#fff"
        android:gravity="center"
        android:text="Guideline Demo"
        app:layout_constraintLeft_toRightOf="@+id/gl_v"
        app:layout_constraintTop_toBottomOf="@+id/gl_h"/>

总代码及效果图

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="demo.ad.com.design.MainActivity">
    <!--控制宽高比例
        1.宽高设置为0dp
        2.设置app:layout_constraintDimensionRatio属性
        app:layout_constraintDimensionRatio="16:6"
        app:layout_constraintDimensionRatio="w,16:6"
        app:layout_constraintDimensionRatio="h,16:6"
    -->
    <TextView
        android:id="@+id/banner"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#e69310"
        android:gravity="center"
        android:text="Banner"
        android:textColor="#ffffff"
        app:layout_constraintDimensionRatio="h,16:6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
    <!--与RL的区别
        ConstrainLayout不支持match_parent,
        通过设置MATCH_CONSTRAINT(即设置宽或高为0dp),
        配合约束实现类似于match_parent的效果
    -->
    <Button
        android:id="@+id/bu1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        app:layout_constraintTop_toBottomOf="@+id/banner"/>

    <Button
        android:id="@+id/bu2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        app:layout_constraintLeft_toRightOf="@+id/bu1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/banner"/>
    <!--实现match_parent的效果-->
    <Button
        android:id="@+id/bu3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3"
        app:layout_constraintTop_toBottomOf="@+id/bu1"/>

    <Button
        android:id="@+id/bu4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="按钮4"
        app:layout_constraintLeft_toRightOf="@+id/bu1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/bu1"/>

    <!--均分
        类似LinearLayout中的weight
        链条分为水平链条和竖直链条两种，
        app:layout_constraintHorizontal_weight 设置均分比例
        layout_constraintHorizontal_chainStyle 设置style
        分别用 layout_constraintHorizontal_chainStyle 和 layout_constraintVertical_chainStyle 两个属性来设置
        chainStyle有三个值:
        1.spread
        2.spread_inside
        3.packed
        默认是spread
        实现三等分效果:宽高属性设置为0dp(weight默认为1),指定chainStyle="spread"
    -->
    <TextView
        android:id="@+id/tab1"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#ffce"
        android:gravity="center"
        android:text="TAB1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tab2"/>

    <TextView
        android:id="@+id/tab2"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#1c5bc2"
        android:gravity="center"
        android:text="TAB2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/tab1"
        app:layout_constraintRight_toLeftOf="@+id/tab3"/>

    <TextView
        android:id="@+id/tab3"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#ba1b98"
        android:gravity="center"
        android:text="TAB3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/tab2"
        app:layout_constraintRight_toRightOf="parent"/>
    <!--bias
        没加这个属性时,控件两侧的拉力是相同的,通过设置这个属性来控制两侧的拉力
        layout_constraintHorizontal_bias
        layout_constraintVertical_bias
    -->
    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#cc850e"
        android:gravity="center"
        android:text="Bias Demo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.9"/>
    <!--Guideline
        通过辅助线,确定控件位置,该辅助线不会显示在页面
        1.layout_constraintGuide_begin
        2.layout_constraintGuide_end
        3.layout_constraintGuide_percent
       可以通过上面3个属性其中之一来确定属性值位置。
       begin=30dp，即可认为距离顶部30dp的地方有个辅助线，根据orientation来决定是横向还是纵向。
       end=30dp，即为距离底部。
       percent=0.8即为距离顶部80%。
    -->
    <android.support.constraint.Guideline
        android:id="@+id/gl_h"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

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

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#e60303"
        android:gravity="center"
        android:text="Guideline Demo"
        android:textColor="#fff"
        app:layout_constraintLeft_toRightOf="@+id/gl_v"
        app:layout_constraintTop_toBottomOf="@+id/gl_h"/>
</android.support.constraint.ConstraintLayout>