前言
ConstraintLayout是一个Support库,它支持向前兼容,最低可支持到API 9(android 2.3)目前app兼容性都是做到4.0以上所以ConstraintLayout的兼容性问题完全不用考虑,其本身更像是对RelativeLayout的升级,效率更高且更实用。
相对定位
layout_constraintLeft_toLeftOf view1左边对齐view2的左边
layout_constraintLeft_toRightOf view1左边对齐view2的右边
layout_constraintRight_toLeftOf view1右边对齐view2的左边
layout_constraintRight_toRightOf view1右边对齐view2的右边
layout_constraintTop_toTopOf view1顶部对齐view2的顶部
layout_constraintTop_toBottomOf view1顶部对齐view2的底部
layout_constraintBottom_toTopOf view1底部对齐view2的顶部
layout_constraintBottom_toBottomOf view1底部对齐view2的底部
layout_constraintBaseline_toBaselineOf view1基准线对齐view2的基准线
layout_constraintStart_toEndOf view1起始位置对齐view2的结束位置
layout_constraintStart_toStartOf view1起始位置view2的起始位置
layout_constraintEnd_toStartOf view1结束位置对齐view2的起始位置
layout_constraintEnd_toEndOf view1结束位置对齐view2的结束位置
从以上属性我们可以看出通过ConstraintLayout我们完全可以实现RelativeLayout的所有功能
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="@+id/text1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
android:gravity="center"
android:text="hello world"/>
<TextView
android:id="@+id/text2"
android:layout_width="100dp"
android:layout_height="50dp"
android:text="hello world"
android:gravity="center"
android:background="@android:color/holo_orange_dark"
app:layout_constraintLeft_toRightOf="@id/text1"
app:layout_constraintBottom_toBottomOf="@id/text1"/>
</android.support.constraint.ConstraintLayout>
如果想要和父布局对其则可直接使用parent即可
app:layout_constraintLeft_toLeftOf="parent"
父布局居中
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
偏心定位
偏心定位由水平偏移app:layout_constraintHorizontal_bia和垂直偏移app:layout_constraintVertical_bias来设置,默认为0.5即50%(左偏移50%右偏移50%),0.3(左偏移30%右偏移70%)
<Button
android:id="@+id/button"
android:layout_width="100dp"
android:layout_height="50dp"
android:text="按钮"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
循环定位
官方解释:您可以以一定角度和距离约束相对于另一个窗口小部件中心的窗口小部件中心。这允许您将一个小部件放置在一个圆上。
相关属性:
layout_constraintCircle
:引用另一个小部件IDlayout_constraintCircleRadius
:到其他小部件中心的距离layout_constraintCircleAngle
:小部件应处于哪个角度(度数,从0到360)
<TextView
android:id="@+id/text1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
android:gravity="center"
android:text="hello world"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<TextView
android:id="@+id/text2"
android:layout_width="100dp"
android:layout_height="50dp"
android:text="hello world"
android:gravity="center"
android:background="@android:color/holo_orange_dark"
app:layout_constraintCircle="@+id/text1"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45"/>
宽高比
根据高或者宽的比例来设置组件大小(将宽或者高的其中一个设置为0dp,然后使用app:layout_constraintDimensionRatio="1:1"属性来设置其宽高比)
<TextView
android:id="@+id/text1"
android:layout_width="100dp"
android:layout_height="0dp"
android:background="@android:color/holo_blue_light"
android:gravity="center"
android:text="hello world"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintDimensionRatio="1:1"
/>
<TextView
android:id="@+id/text2"
android:layout_width="100dp"
android:layout_height="0dp"
android:text="hello world"
android:gravity="center"
android:background="@android:color/holo_orange_dark"
app:layout_constraintLeft_toRightOf="@id/text1"
app:layout_constraintDimensionRatio="2:1" />
链
如果一组小部件通过双向连接,则它们被视为链。水平链app:layout_constraintHorizontal_chainStyle="spread_inside",垂直链 app:layout_constraintVertical_chainStyle="spread_inside"。
多种链的含义(宽或者高为wrap_content即非0状态)
layout_constraintVertical_chainStyle 两个属性来设置
属性值有以下三种:
- spread
- spread_inside
- packed
spread
spread_inside
packed
控件之间的宽高占比
先创建链结构且链的宽或者高为0dp,然后通过app:layout_constraintHorizontal_weight="1"或者app:layout_constraintVertical_weight="1"设置其占比,这样我们也能通过ConstraintLayout来实现LinerLayout的布局了。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="@+id/text1"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="@android:color/holo_blue_light"
android:gravity="center"
android:text="hello world"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/text2"
/>
<TextView
android:id="@+id/text2"
android:layout_width="0dp"
android:layout_height="50dp"
android:text="hello world"
android:gravity="center"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_weight="1"
android:background="@android:color/holo_orange_dark"
app:layout_constraintLeft_toRightOf="@id/text1"
app:layout_constraintRight_toLeftOf="@id/text3"/>
<TextView
android:id="@+id/text3"
android:layout_width="0dp"
android:layout_height="50dp"
android:text="hello world"
android:gravity="center"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_weight="1.5"
android:background="@android:color/holo_green_light"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@id/text2" />
</android.support.constraint.ConstraintLayout>
写在末尾
ConstraintLayout的使用无疑可以让我们的布局变得更简单,ConstraintLayout相对于RelativeLayout功能更加强大,效率更优,完全取代RelativeLayout也是必然。ConstraintLayout使组件之间的约束变得更细,也就简化了我们的工作,能更好的建立组件间的联系。