优势:
- 减少布局嵌套
- 性能更好
- 功能更强大
参考博客:
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>