Android之ConstraintLayout Demo（20190110）
参考文章：https://www.jianshu.com/p/a74557359882
基本用法
宽填充满父布局
<?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:layout_editor_absoluteY="81dp">
<!--宽填充满父布局-->
<Button
android:id="@+id/bt_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.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"
tools:layout_editor_absoluteY="81dp">
<!--居中-->
<Button
android:id="@+id/bt_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
bias偏移量
<?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:layout_editor_absoluteY="25dp">
<!--
bias：偏移量
layout_constraintHorizontal_bias: 垂直偏移比例
layout_constraintVertical_bias: 水平偏移比例
-->
<Button
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bias"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintVertical_bias="0.2" />
</android.support.constraint.ConstraintLayout>
chainStyle链式样式
<?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:layout_editor_absoluteY="25dp">
<!--
layout_constraintHorizontal_chainStyle:
spread: 间隔相等
spread_inside: 间隔相等，但只存在中间
packed: 打包
-->
<Button
android:id="@+id/bt_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintEnd_toStartOf="@id/bt_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/bt_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintEnd_toStartOf="@id/bt_3"
app:layout_constraintStart_toEndOf="@id/bt_1" />
<Button
android:id="@+id/bt_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/bt_2" />
</android.support.constraint.ConstraintLayout>
Circle圆形定位
<?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:layout_editor_absoluteY="81dp">
<Button
android:id="@+id/bt_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="圆心"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--
圆形定位 constraintCircle:
//引用的控件ID
app:layout_constraintCircle="@+id/btn_2"
//圆半径
app:layout_constraintCircleRadius="100dp"
//偏移圆角度 水平右方向为0逆时针方向旋转
app:layout_constraintCircleAngle="45"
-->
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Circle"
android:textAllCaps="false"
app:layout_constraintCircle="@id/bt_1"
app:layout_constraintCircleAngle="40"
app:layout_constraintCircleRadius="100dp" />
</android.support.constraint.ConstraintLayout>
DimensionRatio尺寸比例
<?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">
<!--
尺寸比例
layout_constraintDimensionRatio="H,16:9": W:H是16：9，H动态适配
layout_constraintDimensionRatio="W,16:9": W:H是16：9，W动态适配
-->
<ImageView
android:id="@+id/imageView2"
android:layout_width="0dp"
android:layout_height="140dp"
android:scaleType="fitXY"
android:src="@mipmap/ic_launcher"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="W,16:9" />
</android.support.constraint.ConstraintLayout>
goneMargin隐藏边距
<?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">
<!--
goneMargin: 依赖的View设置Gone以后才会生效的属性
当 bt_2 设置 android:visibility="gone" 后，
bt_1 的 app:layout_goneMarginEnd="80dp" 就会生效。
-->
<Button
android:id="@+id/bt_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/bt_2"
app:layout_goneMarginEnd="80dp" />
<Button
android:id="@+id/bt_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="B"
android:visibility="gone"
app:layout_constraintLeft_toRightOf="@+id/bt_1"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="25dp">
<!--
权重：
layout_constraintHorizontal_weight: 水平权重
layout_constraintVertical_weight: 垂直权重
-->
<Button
android:id="@+id/bt_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintEnd_toStartOf="@+id/bt_2"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/bt_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintEnd_toStartOf="@+id/bt_3"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toEndOf="@+id/bt_1" />
<Button
android:id="@+id/bt_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="C"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="3"
app:layout_constraintStart_toEndOf="@+id/bt_2" />
</android.support.constraint.ConstraintLayout>
constrainedWidth/constrainedHeight强制约束宽高
<?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:layout_editor_absoluteY="81dp">
<Button
android:id="@+id/bt_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintStart_toStartOf="parent"/>
<!--
layout_constrainedWidth: 强制约束宽高
控件的宽设置为 WRAP_CONTENT 时，
如果实际宽度超过了约束的最大宽度，那么约束会失效（高同理），
为了防止约束失效，增加了以下属性：
app:layout_constrainedWidth=”true” //默认false
app:layout_constrainedHeight=”true” //默认false
-->
<Button
android:id="@+id/bt_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"
app:layout_constraintStart_toEndOf="@id/bt_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constrainedWidth="true"
app:layout_constraintTop_toBottomOf="@id/bt_1"/>
</android.support.constraint.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"
tools:layout_editor_absoluteY="81dp">
<!--
需求:
A，B 两控件，B 在 A 的右侧，随着 A，B 宽度的增加，B 始终在 A 的右侧，
当 A ，B 控件的宽度之和大于父控件的宽度时，B 要求被完全显示，同时 A 被挤压。
app:layout_constrainedWidth="true" 强制限制宽度
app:layout_constraintHorizontal_bias="0" 水平偏移量为0
app:layout_constraintHorizontal_chainStyle="packed" 链式样式为 packed
-->
<Button
android:id="@+id/bt_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/bt_2"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/bt_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BBBBBBBBB"
app:layout_constrainedWidth="true"
app:layout_constraintLeft_toRightOf="@id/bt_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Width_max/Width_min/Height_max/Height_min
<?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">
<!--
设置控件的 "最大宽度/最小宽度/最大高度/最小高度"
layout_constraintWidth_max 最大宽度
layout_constraintWidth_min 最小宽度
layout_constraintHeight_max 最大高度
layout_constraintHeight_min 最下高度
-->
<Button
android:id="@+id/bt_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="ashoashoasashashoahsohsahshaoshoahsoshaoshoahsoahsohao"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_max="200dp" />
</android.support.constraint.ConstraintLayout>
percent宽高占父容器百分比
<?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:layout_editor_absoluteY="25dp">
<!--
percent：百分比
layout_constraintWidth_percent="0.6": 宽度百分比
layout_constraintHeight_percent="0.25": 高度百分比
开发中有这样一个需求，控件的宽高为父控件的一半，
那么我们可以这么去实现：
1. 首先设置布局的宽高为 0dp
2. app:layout_constraintWidth_percent="0.5"
app:layout_constraintHeight_percent="0.5"
-->
<Button
android:id="@+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="percent"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.5"
app:layout_constraintHeight_percent="0.5"/>
</android.support.constraint.ConstraintLayout>
Barrier 障碍物
<?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_name"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:gravity="center_vertical"
android:text="姓名："
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/tv_contract"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:gravity="center_vertical"
android:text="联系方式："
app:layout_constraintTop_toBottomOf="@id/tv_name"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/tv_contract2"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:gravity="center_vertical"
android:text="联系方式联系方式："
app:layout_constraintTop_toBottomOf="@id/tv_contract"
app:layout_constraintStart_toStartOf="parent" />
<!--
Barrier 障碍物:
-->
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="tv_name,tv_contract,tv_contract2" />
<EditText
android:id="@+id/et_name"
android:layout_width="0dp"
android:layout_height="40dp"
android:hint="请输入姓名"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@id/barrier"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/et_contract"
android:layout_width="0dp"
android:layout_height="40dp"
android:hint="请输入联系方式"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@id/barrier"
app:layout_constraintTop_toBottomOf="@id/et_name" />
</android.support.constraint.ConstraintLayout>
Group 组
<?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">
<!--
Group用于控制多个控件的可见性:
若 Group 设置 android:visibility="gone"，
那么 button，button2，button3 控件都会隐藏
-->
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="button,button2,button3" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintTop_toBottomOf="@id/button" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
app:layout_constraintTop_toBottomOf="@id/button2" />
</android.support.constraint.ConstraintLayout>
guideline 指导线
<?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:layout_editor_absoluteY="81dp">
<Button
android:id="@+id/bt_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintEnd_toStartOf="@id/guideline" />
<!--
指导线：guideline
android:orientation="vertical" 设置guideline的方向
app:layout_constraintGuide_percent="0.5" guideline位置百分比
app:layout_constraintGuide_begin="100dp" guideline距离起点距离
app:layout_constraintGuide_end="100dp" guideline距离结点距离
-->
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="@+id/bt_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintStart_toStartOf="@id/guideline" />
</android.support.constraint.ConstraintLayout>
源码下载：https://github.com/watayouxiang/ConstraintLayoutDemo
网友评论