ConstraintLayout

来源：互联网发布：js刷新父页面的frame 编辑：程序博客网时间：2024/05/22 02:22

1. 使用方法

需要先在Module的build.gradle文件的dependencies中添加依赖库constraint-layout:

dependencies {    implementation fileTree(include: ['*.jar'], dir: 'libs')    implementation 'com.android.support:appcompat-v7:26.1.0'    implementation 'com.android.support:design:26.0.0'    //添加constraint-layout依赖库    implementation 'com.android.support.constraint:constraint-layout:1.0.2'}

然后就可以在xml文件中使用了。

<?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">    <TextView        android:id="@+id/id_tv1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#aabbcc"        android:padding="10dp"        android:text="Hello World!" />    <TextView        android:id="@+id/id_tv2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#ccbbaa"        app:layout_constraintLeft_toRightOf="@id/id_tv1"        app:layout_constraintBaseline_toBaselineOf="@id/id_tv1"        android:padding="5dp"        android:text="Hello World!" /></android.support.constraint.ConstraintLayout>

2. 常见属性

1. layout_constraintX_toXof系列

layout_constraintLeft_toLeftOf//左边对齐layout_constraintLeft_toRightOf//居右显示layout_constraintRight_toLeftOf//居左显示layout_constraintRight_toRightOf//右对齐layout_constraintTop_toTopOf//居上显示layout_constraintTop_toBottomOf//居下显示layout_constraintBottom_toTopOflayout_constraintBottom_toBottomOflayout_constraintBaseline_toBaselineOf//基线对齐layout_constraintStart_toEndOf//居右显示，和layout_constraintLeft_toRightOf效果一致layout_constraintStart_toStartOflayout_constraintEnd_toStartOflayout_constraintEnd_toEndOf

ConstraintLayout属性的名字都好长，配合着效果再来理解就容易多了。
我的理解方法是分段理解的，

比如 layout_constraintLeft_toLeftOf 这个属性可以分为3段，layout，constraintLeft和toLeftOf，
根据名字来理解，layoutConstraintLayout所有属性都有的字段，可以忽略。终点看后两段：

constraintLeft：表示当前控件的左边
toLeftOf：表示当前控件的某一条边在另外一个控件的左边

constraintLeft 和 toLeftOf 配合起来就表示：当前控件的左边在另外一个控件的左边。
ConstraintLayout的所有属性都表示的是一种相对位置的关系

居中显示:

根据我们的理解方式，想要居中显示，只需要让控件的左，上，右，下四条边分别在父布局的左，上，右，下即可.

<?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">    <TextView        android:id="@+id/id_tv1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#aabbcc"        android:padding="10dp"        android:text="Hello World!"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintBottom_toBottomOf="parent"/></android.support.constraint.ConstraintLayout>

相对于父布局居中

让黄色背景的TextView位于蓝色背景TextView的右边

<?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">    <!--居中显示-->    <TextView        android:id="@+id/id_tv1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#aabbcc"        android:padding="10dp"        android:text="Hello World!"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintBottom_toBottomOf="parent"/>    <!--位于id_tv1的右边-->    <TextView        android:id="@+id/id_tv2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:layout_constraintLeft_toRightOf="@id/id_tv1"        android:background="#ccbbaa"        android:padding="5dp"        android:text="Hello World!"/></android.support.constraint.ConstraintLayout>

这里写图片描述

如果想让两个黄色背景的View和蓝色背景的View水平显示，文字对齐 ,id_tv2 加一条属性即可

<TextView    android:id="@+id/id_tv2"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    app:layout_constraintLeft_toRightOf="@id/id_tv1"    app:layout_constraintBaseline_toBaselineOf="@id/id_tv1"    android:background="#ccbbaa"    android:padding="5dp"    android:text="Hello World!"/>

2. app:layout_goneMarginX和margin的区别

这系列表示的就是margin值，但是和margin表达的意思不太一样。
1. margin：表示的就是当前控件相对于指定控件的外边距
2. app:layout_goneMarginX：如果当前控件B添加了控件A的约束，控件B设置了goneMarginX属性，那么只有当控件A隐藏的时候goneMarginX的值才会起作用。

如图紫色的TextView添加了土黄色TextView的约束，并且土黄色TextView处于显示状态，而紫色View设置了marginLeft=”10dp” 和 goneMarginLeft=”20dp” ,可以看到只有margin生效了

这里写图片描述

<?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="com.hank.ok.bottomsheet.MainActivity">    <!--居中显示-->    <TextView        android:id="@+id/id_tv1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#aabbcc"        android:padding="10dp"        android:text="Hello World!"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintBottom_toBottomOf="parent"/>    <!--位于id_tv1的右边-->    <TextView        android:id="@+id/id_tv2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="10dp"        app:layout_constraintLeft_toRightOf="@id/id_tv1"        app:layout_constraintBaseline_toBaselineOf="@id/id_tv1"        android:background="#ccbbaa"        android:padding="5dp"        android:text="Hello World!"/>    <!--添加了layout_goneMarginLeft属性-->    <TextView        android:id="@+id/id_tv3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="10dp"        app:layout_goneMarginLeft="20dp"        app:layout_constraintLeft_toRightOf="@id/id_tv2"        app:layout_constraintBaseline_toBaselineOf="@id/id_tv1"        android:background="#bbaccc"        android:padding="5dp"        android:text="Hello World!"/></android.support.constraint.ConstraintLayout>

接下来把土黄色View设置为Gone,看下效果

这里写图片描述

明显可以看出goneMarginLeft生效了。

总结：margin和goneMargin可以同时设置，但是效果不会叠加，goneMargin只有在添加约束的View状态为Gone的时候，才起作用，而此时，margin是没有效果的。

3. layout_constraintHorizontal_bias 偏向

意思就是当前控件更偏向于哪边，值0~1,0表示靠左显示，值越大越靠右
这个属性值只在左右两侧都设置了约束的情况下起作用,否则不起作用

下图是设置了土黄色View的倾向值为0.5的结果，它就在蓝色和紫色View中间显示了，如果改成0.3，它会显示在蓝色和紫色View之间距离的1/3处

这里写图片描述

代码:

<?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">    <!--居中显示-->    <TextView        android:id="@+id/id_tv1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#aabbcc"        android:padding="10dp"        android:text="Hello World!"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintBottom_toBottomOf="parent"      />    <!--位于id_tv1的右边-->    <TextView        android:id="@+id/id_tv2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:layout_constraintBaseline_toBaselineOf="@id/id_tv1"        app:layout_constraintLeft_toRightOf="@id/id_tv1"        app:layout_constraintRight_toLeftOf="@+id/id_tv3"       app:layout_constraintHorizontal_bias="0.5"        android:background="#ccbbaa"        android:padding="5dp"        android:text="Hello World!"/>    <!--添加了layout_goneMarginLeft属性-->    <TextView        android:id="@+id/id_tv3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintBaseline_toBaselineOf="@id/id_tv1"        app:layout_constraintHorizontal_bias="0.5"        android:background="#bbaccc"        android:padding="5dp"        android:text="Hello World!"/></android.support.constraint.ConstraintLayout>

4. layout_constraintDimensionRatio 宽高比

用来设置控件的宽高比例

设置宽高3:1

  <TextView      android:id="@+id/id_tv2"       android:layout_width="0dp"       android:layout_height="30dp"       app:layout_constraintBaseline_toBaselineOf="@id/id_tv1"       app:layout_constraintLeft_toRightOf="@id/id_tv1"       app:layout_constraintRight_toLeftOf="@+id/id_tv3"       app:layout_constraintHorizontal_bias="0.5"       app:layout_constraintDimensionRatio="3:1"       android:background="#ccbbaa"       android:padding="5dp"       android:text="Hello World!"/>

这里写图片描述

5. Chain 链式

Chains提供在一个轴(横向或纵向)类似group的行为。其他轴可以独立约束
更详细的可以看 http://blog.csdn.net/zxt0601/article/details/72683379
创建一个链
如果一组组件通过双向连接连接在一起，我们就可以认为是他们是一个链,(如下图,显示最小链,由两个组件组成)。

链头 Chain heads
链是由属性集合的第一个元素控制(链的“头”):

链的样式

当链的第一个元素设置属性layout_constraintHorizontal_chainStyle 或layout_constraintVertical_chainStyle,链的行为会根据指定的样式改变(默认为CHAIN_SPREAD)。

CHAIN_SPREAD – 元素会被展开 (默认)
Weighted chain – 在CHAIN_SPREAD模式中,如果有些组件设置为MATCH_CONSTRAINT,他们将分开可用空间
CHAIN_SPREAD_INSIDE – 相似,但链的端点不会散开
CHAIN_PACKED – 链的元素将被打包在一起。子元素水平或垂直偏移（bias）属性将影响元素的定位

权重链

链的默认行为是元素伸展相同的可用空间。
如果一个或多个元素使用MATCH_CONSTRAINT,他们将利用剩余的空间(等分)。
属性layout_constraintHorizontal_weight，
layout_constraintVertical_weight将控制分布在空间的元素如何使用MATCH_CONSTRAINT。
例如，使用MATCH_CONSTRAINT链包含两个元素，
第一个元素使用的权重2，
第二个元素使用权重1，
占用的空间第一个元素将是第二个元素的两倍。

下边是一个双项链
土黄色View和紫色View的宽度layout_width=”0dp”，也就是match_contraint，
链头的 app:layout_constraintHorizontal_chainStyle=”spread”

效果如下图：
土黄色和紫色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"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent">    <!--居中显示-->    <TextView        android:id="@+id/id_tv1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#aabbcc"        app:layout_constraintRight_toLeftOf="@+id/id_tv2"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintHorizontal_chainStyle="spread"        app:layout_constraintHorizontal_weight="0.5"        android:padding="10dp"        android:text="Hello World!"/>    <!--位于id_tv1的右边-->    <TextView        android:id="@+id/id_tv2"        android:layout_width="0dp"        android:layout_height="wrap_content"        app:layout_constraintHorizontal_weight="0.5"        android:background="#ccbbaa"        android:padding="5dp"        app:layout_constraintLeft_toRightOf="@id/id_tv1"        app:layout_constraintRight_toLeftOf="@+id/id_tv3"        android:text="Hello World!"/>    <!--添加了layout_goneMarginLeft属性-->    <TextView        android:id="@+id/id_tv3"        android:layout_width="0dp"        android:layout_height="wrap_content"        app:layout_constraintLeft_toRightOf="@+id/id_tv2"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintHorizontal_weight="0.5"        android:background="#bbaccc"        android:padding="5dp"        android:text="Hello World!"/></android.support.constraint.ConstraintLayout>

阅读全文

0 0