ConstraintLayout：1.1.3的使用
2018-12-03 本文已影响0人
LevyLin
ConstraintLayout最新的版本是1.1.3，这是一个很优秀的布局，几乎可以实现用一级布局，就能实现复杂的页面。
接下来我们深入浅出的来学习一下这个牛逼轰轰的控件吧。
常用布局
这边的布局有点类似RelativeLayout，但ConstraintLayout本身就比RelativeLayout强大。
//两个控件的左边对齐
layout_constraintLeft_toLeftOf
//当前控件的左边与目标控件的右边对齐，即当前控件在目标控件的右边
layout_constraintLeft_toRightOf
//当前控件的右边与目标控件的左边对齐，即当前控件在目标控件的左边
layout_constraintRight_toLeftOf
//两个控件的右边对齐
layout_constraintRight_toRightOf
//两个控件的上面对齐
layout_constraintTop_toTopOf
//当前控件的顶部与目标控件的底部对齐，即当前控件在目标控件的下面
layout_constraintTop_toBottomOf
//当前控件的底部与目标控件的顶部对齐，即当前控件在目标控件的上面
layout_constraintBottom_toTopOf
//两个控件的下面对齐
layout_constraintBottom_toBottomOf
//baseline对齐，常用于和EditText 对齐
layout_constraintBaseline_toBaselineOf
一个简单的例子
<?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/constraintLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:padding="10dp">
<TextView
android:id="@+id/tv_common_layout_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="常用布局"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/btn_e"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_width="wrap_content"
android:text="E"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_common_layout_label"/>
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="A"
app:layout_constraintBottom_toTopOf="@id/btn_e"
app:layout_constraintRight_toLeftOf="@id/btn_e"/>
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="B"
app:layout_constraintBottom_toTopOf="@id/btn_e"
app:layout_constraintLeft_toRightOf="@id/btn_e"/>
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="C"
app:layout_constraintRight_toLeftOf="@id/btn_e"
app:layout_constraintTop_toBottomOf="@id/btn_e"/>
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="D"
app:layout_constraintLeft_toRightOf="@id/btn_e"
app:layout_constraintTop_toBottomOf="@id/btn_e"/>
</android.support.constraint.ConstraintLayout>
常用布局
Chain（链）
顾名思义，就是把几个控件链在一起，以达到可以控制布局的效果，这个效果也是很常用的。
常用属性：
layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle
上述两个属性只能在链的第一个控件上使用，在之后的控件使用无效。
这两个属性的值有三个：spread_inside，spread，packed
看一下官方提供的说明图：
chain.png
Packed Chain with Bias是packed属性加layout_constraintHorizontal_bias属性
Weighted Chain的用法与之前LinearLayout中的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"
android:id="@+id/constraintLayout"
android:layout_height="match_parent"
android:layout_width="match_parent">
<TextView
android:id="@+id/tv_chain_style_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Chain"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<RadioGroup
android:id="@+id/rg_chain_group"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_chain_style_label">
<RadioButton
android:checked="true"
android:id="@+id/rb_spread_inside"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="spread_inside"/>
<RadioButton
android:id="@+id/rb_spread"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="spread"/>
<RadioButton
android:id="@+id/rb_pack"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="pack"/>
</RadioGroup>
<Button
android:id="@+id/btn_fgh_toggle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="FGH批量隐藏"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/rg_chain_group"/>
<android.support.constraint.Group
android:id="@+id/group_btns"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:constraint_referenced_ids="btn_f,btn_g,btn_h"/>
<Button
android:id="@+id/btn_f"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="F"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/btn_g"
app:layout_constraintTop_toBottomOf="@id/btn_fgh_toggle"/>
<Button
android:id="@+id/btn_g"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="G"
app:layout_constraintLeft_toRightOf="@id/btn_f"
app:layout_constraintRight_toLeftOf="@+id/btn_h"
app:layout_constraintTop_toTopOf="@id/btn_f"/>
<Button
android:id="@+id/btn_h"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="H"
app:layout_constraintLeft_toRightOf="@id/btn_g"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/btn_g"/>
</android.support.constraint.ConstraintLayout>
class ChainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.act_chain_style)
rg_chain_group.setOnCheckedChangeListener { _, checkedId ->
constraintLayout.getViewWidget(btn_f).horizontalChainStyle = when (checkedId) {
R.id.rb_spread_inside -> ConstraintLayout.LayoutParams.CHAIN_SPREAD_INSIDE
R.id.rb_spread -> ConstraintLayout.LayoutParams.CHAIN_SPREAD
R.id.rb_pack -> ConstraintLayout.LayoutParams.CHAIN_PACKED
else -> ConstraintLayout.LayoutParams.CHAIN_PACKED
}
constraintLayout.requestLayout()
}
btn_fgh_toggle.setOnClickListener {
if (group_btns.visibility == View.VISIBLE) {
group_btns.visibility = View.GONE
btn_fgh_toggle.text = "fgh批量显示"
} else {
group_btns.visibility = View.VISIBLE
btn_fgh_toggle.text = "fgh批量隐藏"
}
}
}
}
这里还穿插了一个Group的用法
Group
顾名思义就是把几个View分成一组，可以统一对其显隐藏进行控制，好处就是终于不用再写一堆的布局显隐藏，也不会容易出错啦。
因为比较简单，所以也不细说了。
Barrier，屏障，障碍
这是一个控件，可以使用constraint_referenced_ids来引用多个控件，从而可以得到这组控件的最左边/最顶部/最右边/最底部了。
终于我们做某些要填写信息的布局时，可以不用TableLayout，也可以不用去计算哪个标签长度最长，估算出一个不太靠谱的长度。
常用的属性：
//指定方向，不可以设置多个方向，如果需要多个方向，则需要设置多个Barrier
barrierDirection
//关联id
constraint_referenced_ids
举个栗子：
<?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_height="match_parent"
android:layout_width="match_parent"
android:padding="10dp"
tools:context=".MainActivity">
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="tv_age_label,tv_name_label"/>
<TextView
android:id="@+id/tv_name_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="10dp"
android:text="姓名："
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<EditText
android:hint="请输入姓名"
android:id="@+id/edt_name"
android:layout_height="wrap_content"
android:layout_width="0dp"
app:layout_constrainedWidth="true"
app:layout_constraintBaseline_toBaselineOf="@id/tv_name_label"
app:layout_constraintLeft_toRightOf="@+id/barrier"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/tv_name_label"/>
<TextView
android:id="@+id/tv_age_label"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:padding="10dp"
android:text="出生时间："
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/edt_name"/>
<EditText
android:hint="请输入出生日期"
android:layout_height="wrap_content"
android:layout_width="0dp"
app:layout_constraintBaseline_toBaselineOf="@id/tv_age_label"
app:layout_constraintLeft_toRightOf="@+id/barrier"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/tv_age_label"/>
</android.support.constraint.ConstraintLayout>
Barrier.png
圆形定位
这个就有点吊了，控件A可以在控件B周围的任何位置。
常用的场景一般就是设置小红点了，未读数之类的。
使用属性有三个
//圆形定位的目标控件，在这个属性设置目标的id
layout_constraintCircle
//圆形定位的角度
layout_constraintCircleAngle
//圆形定位的半径
layout_constraintCircleRadius
来看一张官网的图：
image.png
需要注意的是，0°的位置是在目标控件的顶部。
来看一个时钟表盘的布局吧
<?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_height="match_parent" android:layout_width="match_parent">
<TextView
android:id="@+id/tv_circle_label"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:text="Circle定位"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<TextView
android:id="@+id/btn_0"
android:layout_height="wrap_content"
android:layout_marginTop="120dp"
android:layout_width="wrap_content"
android:text="0"
android:textColor="@android:color/black"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_circle_label"/>
<TextView
android:id="@+id/btn_1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="1"
android:textColor="@android:color/black"
app:layout_constraintCircle="@id/btn_0"
app:layout_constraintCircleAngle="30"
app:layout_constraintCircleRadius="80dp"/>
<TextView
android:id="@+id/btn_2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="2"
android:textColor="@android:color/black"
app:layout_constraintCircle="@id/btn_0"
app:layout_constraintCircleAngle="60"
app:layout_constraintCircleRadius="80dp"/>
<TextView
android:id="@+id/btn_3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="3"
android:textColor="@android:color/black"
app:layout_constraintCircle="@id/btn_0"
app:layout_constraintCircleAngle="90"
app:layout_constraintCircleRadius="80dp"/>
...
</android.support.constraint.ConstraintLayout>
圆形定位
强制约束
这个属性是用于当约束布局中的一个控件，由于其内容很长，导致该控件的宽度或者高度超出了范围，导致布局上的错乱，针对这个问题，ConstraintLayout很友善的提供了layout_constrainedWidth这个属性，当设置为true时，会强制控件的宽高会在一个范围内，false则不强制。
我们来看个栗子：
layout_constrainedWidth为false
layout_constrainedWidth为true
代码：
<?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_height="match_parent" android:layout_width="match_parent">
<CheckBox
android:checked="true"
android:id="@+id/cb_force_constraint"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:text="enforcing constraints"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<Button
android:id="@+id/btn_add_text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="add"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/btn_reduce_text"
app:layout_constraintTop_toBottomOf="@id/cb_force_constraint"/>
<Button
android:id="@+id/btn_reduce_text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="reduce"
app:layout_constraintBaseline_toBaselineOf="@id/btn_add_text"
app:layout_constraintLeft_toRightOf="@id/btn_add_text"
app:layout_constraintRight_toRightOf="parent"/>
<Button
android:id="@+id/btn_m"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="M"
app:layout_constraintTop_toBottomOf="@id/btn_add_text"/>
<Button
android:id="@+id/btn_content"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_constrainedWidth="true"
android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
app:layout_constraintLeft_toRightOf="@id/btn_m"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/btn_m"/>
</android.support.constraint.ConstraintLayout>
Percent和Ratio
百分比布局也是UI设计师非常喜欢使用的，android支持包中原先有提供了一系列的百分比控件
image.png
宽高比布局android中就没有了，一般都是我们先固定宽或者高，再计算出另一个边
但是有了ContraintLayout，就可以通通不要了，原因很简单，俺们的ContraintLayout超棒的~
我们可以直接通过以下这个属性来直接进行百分比控制：
layout_constraintDimensionRatio
这个属性要怎么玩呢，其实也不复杂：
假如是固定宽度，要控制高度，可以用"H,16:9"。
假如是固定高度，要控制宽度，可以用"W,16:9"
冒号左边的是代表宽度，冒号右边的是代表高度。
依旧来举个栗子：
<?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/constraintLayout"
android:layout_height="match_parent" android:layout_width="match_parent">
<TextView
android:id="@+id/tv_title"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="百分比布局"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/btn_ratio_1"
android:layout_height="0dp"
android:layout_width="0dp"
android:text="Ratio_1"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_title"
app:layout_constraintWidth_percent="0.6"/>
<Button
android:id="@+id/btn_ratio_2"
android:layout_height="100dp"
android:layout_width="0dp"
android:text="Ratio_2"
app:layout_constraintDimensionRatio="W,16:9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/btn_ratio_1"/>
</android.support.constraint.ConstraintLayout>
image.png
