ConstraintLayout的使用介绍

浅浅的花香味﹌ 2022-06-12 03:26 278阅读 0赞

## ConstraintLayout的使用介绍 ##

#### ConstraintLayout的介绍和依赖 ####

在2016年的Google的I/O大会上，出来一个新的布局ConstraintLayout(约束性布局)。在Android Studio2.2版本后自动依赖使用ConstraintLayout布局。

ConstraintLayout的依赖

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

ConstraintLayout约束布局的含义

根据布局中的其他元素或视图，确定View在屏幕中的位置， 受到三类约束，即其他视图，父容器(parent)， 基准线(Guideline)。

ConstraintLayout的优势

ConstraintLayout的相比RelativeLayout和LineatLayout具有更强的特性，可以减少布局之间的嵌套。

--------------------

#### ConstraintLayout的相对位置的设置 ####

*  相对位置属性
    
    相对位置属性：`layout_constraint[自身控件位置]_[目标控件位置]="[目标控件ID]"`，如果id是父布局的id，可以使用parent。如：
    
     *  layout\_constraintLeft\_toLeftOf=”@id/…”：控件自身的左边和目标控件的左边对齐。
     *  layout\_constraintLeft\_toRightOf=”@id/…”：控件自身的左边和目标控件的右边对齐。
     *  layout\_constraintRight\_toRightOf=”@id/…”：控件自身的右边和目标控件的右边对齐。
     *  layout\_constraintRight\_toLeftOf=”@id/…”：控件自身的右边和目标控件的左边对齐。
     *  app:layout\_constraintStart\_toStartOf=”@id/…”：和上面意思差不多，就不解释了
     *  app:layout\_constraintStart\_toEndOf=”@id/…”：
     *  app:layout\_constraintEnd\_toEndOf=”@id/…”：
     *  app:layout\_constraintEnd\_toStartOf=”@id/…”：
     *  layout\_constraintTop\_toTopOf=”@id/…”：控件自身的上边和目标控件的上边对齐。
     *  layout\_constraintTop\_toBottomOf=”@id/…”：控件自身的上边和目标控件的下边对齐。
     *  layout\_constraintBottom\_toBottomOf=”@id/…”：控件自身的下边和目标控件的下边对齐。
     *  layout\_constraintBottom\_toTopOf=”@id/…”：控件自身的下边和目标控件的上边对齐。
    
    eg:
    
        <?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">
        
            <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
        
            <Button android:id="@+id/btn_1" android:layout_width="100dp" android:layout_height="100dp" android:text="Button2" app:layout_constraintBottom_toTopOf="@id/btn" />
        
        </android.support.constraint.ConstraintLayout>
    
    效果图：
    
    ![image][]
    
     *  app:layout\_constraintBaseline\_toBaselineOf=”@id/btn”：文字的底部线对齐
    
    eg:
    
        <?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">
        
            <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
        
            <Button android:id="@+id/btn_1" android:layout_width="100dp" android:layout_height="100dp" android:text="Button2" app:layout_constraintBaseline_toBaselineOf="@id/btn" />
        
        </android.support.constraint.ConstraintLayout>
    
    效果图：
    
    ![image][image 1]

--------------------

*  goneMargin属性
    
    goneMargin属性是指目标控件GONE掉之后，自身控件可以设置个margin值。不过margin的方向需要和控件的相对位置的方向保持一致（下面的实例会说）。
    
     *  layout\_goneMarginLeft=”xxdp”：当目标控件GONE时，自身控件距离左边的边距xxdp（当约束的方向左右方向时有效）。
     *  layout\_goneMarginStart=”xxdp”：
     *  layout\_goneMarginRight=”xxdp”：
     *  layout\_goneMarginEnd=”xxdp”：
     *  layout\_goneMarginTop=”xxdp”：
     *  layout\_goneMarginBottom=”xxdp”：
    
    eg:
    
        <?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">
        
            <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" android:visibility="visible" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
        
            <Button android:id="@+id/btn_1" android:layout_width="100dp" android:layout_height="100dp" android:text="Button2" app:layout_constraintBottom_toTopOf="@id/btn" app:layout_goneMarginBottom="200dp" />
        
        </android.support.constraint.ConstraintLayout>
    
    效果图：
    
    ![image][image 2]

--------------------

*  bias属性
    
    bias属性是指在对齐父容器后，设置水平与竖直的比例。
    
     *  app:layout\_constraintHorizontal\_bias=”0.2”：设置相对父控件距离的长度的为父控件的宽度0.2倍的位置
     *  layout\_constraintVertical\_bias=”0.2”:设置相对父控件距离的长度的为父控件的长度0.2倍的位置
    
    eg:
    
        <?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">
        
            <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHorizontal_bias="0.2" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.2" />
        </android.support.constraint.ConstraintLayout>
    
    效果图：
    
    ![image][image 3]

--------------------

#### ConstraintLayout设置高宽比例 ####

*  layout\_constraintDimensionRatio=”2:1”：通过该属性可以设置View的高宽比。这样可以很好的做手机屏幕的适配了。

eg:

<?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:id="@+id/parent" android:layout_width="match_parent" android:layout_height="match_parent">
    
        
        
        <ImageView android:id="@+id/image" android:layout_width="0dp" android:layout_height="100dp" android:src="@color/colorPrimary" app:layout_constraintDimensionRatio="16:9" app:layout_constraintLeft_toLeftOf="parent" />
    
        
        
        <ImageView android:layout_width="0dp" android:layout_height="100dp" android:src="@color/colorAccent" app:layout_constraintDimensionRatio="H,16:9" app:layout_constraintRight_toRightOf="parent" />
    
    
        
        <ImageView android:layout_width="100dp" android:layout_height="0dp" android:layout_marginTop="20dp" android:src="@color/colorPrimary" app:layout_constraintDimensionRatio="16:9" app:layout_constraintTop_toBottomOf="@id/image" />
    
        
        <ImageView android:layout_width="100dp" android:layout_height="0dp" android:layout_marginTop="20dp" android:src="@color/colorPrimary" app:layout_constraintDimensionRatio="W,16:9" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/image" />
    
        
        <ImageView android:layout_width="0dp" android:layout_height="0dp" android:src="@color/colorAccent" app:layout_constraintBottom_toBottomOf="@id/parent" app:layout_constraintDimensionRatio="2" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" />
    
    </android.support.constraint.ConstraintLayout>

效果图：

![image][image 4]

--------------------

#### ConstraintLayout设置基准线（Guideline） ####

Guideline是一条隐形的线，这条线可作为准线，根据此准线设置其他控件的位置。

Guideline是一个View(android.support.constraint.Guideline)，基准线的通过android:orientation设置方向。通过基准线来约束其他的view。

*  layout\_constraintGuide\_begin=”xxdp”：基准线开始方向xxdp
 *  layout\_constraintGuide\_end=”xxdp”：基准线结束方向xxdp
 *  layout\_constraintGuide\_percent=”0.3”：基准线开始方向距离的父控件大小的百分比。

eg:

效果图：

![image][image 5]

--------------------

#### ConstraintLayout设置链状结构（Chain Style） ####

Chain Style是使多个控件像链条一样显示，这个更能可以类似LinearLayout的weight属性。

要想chain style生效，控件要相互引用，比如A的右边依赖B的左边，B的左边依赖A的右边，都是设置。 如:水平方向的Chain Style.

![image][image 6]

Chain Style的分为水平和竖直方向，每种都有3中模式：

*  layout\_constraintHorizontal\_chainStyle=”spread”：均匀分布（包括边上控件左右的边距）
 *  layout\_constraintHorizontal\_chainStyle=”spread\_inside”：均匀分布，但是边上的控件不均匀分布（边上控件没有边距）
 *  layout\_constraintHorizontal\_chainStyle=”packed”：控件紧挨在一起。还可以通过bias属性设置偏移量。
 *  layout\_constraintHorizontal\_weight=”“：跟线性布局的weight差不多，width需要设置0dp，控件的大小根据设置的weight比例进行设置。
 *  layout\_constraintVertical\_chainStyle=”“:和上面一样，有三种模式spread，spread\_inside，packed。
 *  layout\_constraintVertical\_weight=”“：

如图：

![image][image 7]

eg：

效果图：

![image][image 8]

#### ConstraintLayout控件的其他属性 ####

*  layout\_constraintWidth\_min=”“：最小宽度
 *  layout\_constraintWidth\_max=”“：最大宽度
 *  layout\_constraintHeight\_min=”“：最小高度
 *  layout\_constraintHeight\_max=”“：最大高度

下面几个属性是 UI 编辑器所使用的，用了辅助拖拽布局的，在实际使用过程中，可以不用关心这些属性。

*  layout\_optimizationLevel
 *  layout\_editor\_absoluteX
 *  layout\_editor\_absoluteY
 *  layout\_constraintBaseline\_creator：
 *  layout\_constraintTop\_creator：
 *  layout\_constraintRight\_creator：
 *  layout\_constraintLeft\_creator：
 *  layout\_constraintBottom\_creator：

文章参考：

[Android ConstraintLayout详解][Android ConstraintLayout]

[ConstraintLayout 终极秘籍][ConstraintLayout]

[image]: http://oe9ggtbcb.bkt.clouddn.com/1499946197%281%29.png
[image 1]: http://oe9ggtbcb.bkt.clouddn.com/1499949042%281%29.png
[image 2]: http://oe9ggtbcb.bkt.clouddn.com/GIF3.gif
[image 3]: http://oe9ggtbcb.bkt.clouddn.com/1499948203%281%29.png
[image 4]: http://oe9ggtbcb.bkt.clouddn.com/1499956684%281%29.png
[image 5]: http://oe9ggtbcb.bkt.clouddn.com/1500000034%281%29.png
[image 6]: http://oe9ggtbcb.bkt.clouddn.com/1500002075%281%29.png
[image 7]: http://oe9ggtbcb.bkt.clouddn.com/20161028170236233.jpg
[image 8]: http://oe9ggtbcb.bkt.clouddn.com/1500002222%281%29.png
[Android ConstraintLayout]: http://blog.csdn.net/u013706904/article/details/52957946
[ConstraintLayout]: http://blog.chengyunfeng.com/?p=1030