ConstraintLayout是在2016年Google I/O 大会上发布的,使用它可以减少布局的层级结构关系,从而达到在绘制视图过程中减少measure,layout,draw的时间损耗,最后加快界面渲染时间,防止丢帧导致卡顿不流畅现象。
Android系统每隔16ms发出VSYNC信号,触发对UI进行渲染,如果每次渲染都成功,这样就能够达到流畅的画面所需要的60fps,为了能够实现60fps,这意味着程序的大多数操作都必须在16ms内完成。
关于ConstraintLayout的性能分析,可以参照官方文章解析ConstraintLayout的性能优势,本文主要介绍如何使用ConstraintLayout。
在上面文章介绍中,使用ConstraintLayout可以使复杂的XML布局最后变为:
<ViewGroup>
<View />
<View />
<View />
...
...
</ViewGroup>
很明显,视图之间不再有层级嵌套关系,布局为最优最简洁。
ConstraintLayout引入:
compile 'com.android.support.constraint:constraint-layout:1.0.2'
1.视图相对位置
相对位置的属性有:
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
# 与left\right相似
layout_constraintStart_toStartOf
layout_constraintStart_toEndOf
layout_constraintEnd_toEndOf
layout_constraintEnd_toStartOf
layout_constraintBaseline_toBaselineOf 底部对齐
意思是:layout_constraint当前View的位置_to目标View的位置=”目标View的id”。
居中显示:
示例布局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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
在ConstraintLayout布局中,有时要多个属性联合一起使用才能达到效果,下面两个属性表示水平居中:
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
同理,表示垂直居中:
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
“parent”是指父View的id ,所以上面都是向父View对齐。
上面布局效果图如下:
相对显示
示例布局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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintLeft_toRightOf="@id/button_a" />
<Button
android:id="@+id/button_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
app:layout_constraintTop_toBottomOf="@id/button_a" />
<Button
android:id="@+id/button_d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="D"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="@+id/button_e"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="E"
app:layout_constraintBottom_toTopOf="@id/button_d"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="@+id/button_f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="F"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="@id/button_d" />
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/me"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_10dp"
android:text="Hello World!!!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/image_view"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
上面展示了在某个View的左边,右边,上边,下边,与RelativeLayout相似。
上面布局效果图如下:
2.View宽高比
在开发中,通常会遇到View的宽度和高度按照一定的比例来放置,这时需要继承View类并重写onMeasure方法,然后再在该方法中设置宽度和高度比例,最后达到效果。
现在,ConstraintLayout支持在布局中设置宽度和高度的比例,不用在按照上面的操作,实在太方便。属性 app:layout_constraintDimensionRatio=”15:7”,表示宽:高=15:7。
示例布局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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="@drawable/me"
app:layout_constraintDimensionRatio="15:7"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<ImageView
android:layout_width="0dp"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@drawable/me"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="8:9"
app:layout_constraintTop_toBottomOf="@id/image_view"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
上面layout_width=”0dp”和layout_height=”0dp”并不代表宽度和高度为0dp,在ConstraintLayout中不再有match_parent,用0dp来表示match_parent。下面是官方说明:
Important: MATCH_PARENT is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to “parent”.`
所以设置填充整个宽度时,应设置下面三个属性:
android:layout_width="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
同理,设置填充整个高度:
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
设置填充整个宽高度:
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
上面比例效果图如下:
3.权重Weight
在LinearLayout中,通常用android:layout_weight=”1”来设置View占的权重,在ConstraintLayout中用属性:
app:layout_constraintHorizontal_weight="1"
app:layout_constraintVertical_weight="1"
来表示View占据的水平权重和垂直权重。
示例布局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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text_view_01"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:gravity="center"
android:text="首页"
android:textColor="@android:color/holo_blue_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/text_view_02" />
<TextView
android:id="@+id/text_view_02"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:gravity="center"
android:text="发现"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@id/text_view_01"
app:layout_constraintRight_toLeftOf="@+id/text_view_03" />
<TextView
android:id="@+id/text_view_03"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:gravity="center"
android:text="VIP会员"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@id/text_view_02"
app:layout_constraintRight_toLeftOf="@+id/text_view_04" />
<TextView
android:id="@+id/text_view_04"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:gravity="center"
android:text="星球"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@id/text_view_03"
app:layout_constraintRight_toLeftOf="@+id/text_view_05" />
<TextView
android:id="@+id/text_view_05"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:gravity="center"
android:text="我的"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@id/text_view_04"
app:layout_constraintRight_toRightOf="parent" />
<View
android:layout_width="wrap_content"
android:layout_height="@dimen/line_0.5dp"
android:background="@android:color/darker_gray"
app:layout_constraintBottom_toTopOf="@id/text_view_01" />
</android.support.constraint.ConstraintLayout>
这是一个底部菜单布局,每一个View占整个布局宽度的五分之一。
但是,要设置权重,View必须要两两依赖。
比如上面:
- “首页“,左边依赖”parent”,右边依赖”text_view_02”
- “发现“,左边依赖”text_view_01”,右边依赖”text_view_03”
- “VIP会员“,左边依赖”text_view_02”,右边依赖”text_view_04”
- “星球“,左边依赖”text_view_03”,右边依赖”text_view_05”
- “我的“,左边依赖”text_view_04”,右边依赖”parent”
上面权重效果图如下:
4.链样式Chain Style
链是一种特殊的约束,它允许链中的视图共享间距,并控制如何分配它们之间的可用空间。它与传统Android中LinearLayout的Weight相似,但它的功能更加强大。
链样式有:
设置链样式的属性是:
app:layout_constraintHorizontal_chainStyle="spread|spread_inside|packed"
1.当设置宽度为固定大小,值为spread时,效果图如下:
2.当设置宽度为固定大小,值为spread_inside时,效果图如下:
3.当设置宽度为填充父View大小,值为spread时,示例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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text_view_01"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:background="@android:color/holo_blue_bright"
android:gravity="center"
android:text="Tab"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/text_view_02" />
<TextView
android:id="@+id/text_view_02"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:background="@android:color/holo_orange_light"
android:gravity="center"
android:text="Tab"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toRightOf="@id/text_view_01"
app:layout_constraintRight_toLeftOf="@+id/text_view_03" />
<TextView
android:id="@+id/text_view_03"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:background="@android:color/holo_red_light"
android:gravity="center"
android:text="Tab"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toRightOf="@id/text_view_02"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
效果图如下:
4.当设置宽度为固定大小,值为packed时,效果图如下:
5.当设置宽度为固定大小,值为packed,再在第一个View中添加属性
app:layout_constraintHorizontal_bias=”0.2”,效果如下:
属性app:layout_constraintHorizontal_bias=”0.2”表示距离布局左侧的水平距离为整个布局宽度的20%,同样属性 app:layout_constraintVertical_bias=”0.2”表示距离布局顶部的垂直距离为整个布局高度的20%。
5.引导线Guideline
android.support.constraint包中还提供了一个类Guideline,它继承自View,在运行时不可见。它是一个抽象的概念,作为引导线在布局中使用,它主要的属性有:
android:orientation="horizontal|vertical"
app:layout_constraintGuide_begin="30dp"
app:layout_constraintGuide_end="30dp"
app:layout_constraintGuide_percent="0.5"
android:orientation=”horizontal|vertical”表示是水平或垂直引导线。
app:layout_constraintGuide_begin=”30dp”,如果是水平引导线,则距离布局顶部30dp,如果是垂直引导线,则距离布局左边30dp。
app:layout_constraintGuide_end=”30dp”,如果是水平引导线,则距离布局底部30dp,如果是垂直引导线,则距离布局右边30dp。
app:layout_constraintGuide_percent=”0.5”,如果是水平引导线,则距离布局顶部为整个布局高度的50%,如果是垂直引导线,则距离布局左边文这个布局宽度的50%。
布局示例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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="@+id/guide_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:src="@drawable/me"
app:layout_constraintBottom_toTopOf="@+id/guide_line"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Hello World!!!"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/guide_line" />
</android.support.constraint.ConstraintLayout>
效果图如下:
6.总结
使用ConstraintLayout真正达到了扁平化布局,视图之间不再有任何层级嵌套,使布局达到了最优化。
参考
1.https://constraintlayout.github.io
2.解析ConstraintLayout的性能优势
3.ConstraintLayout 完全解析 快来优化你的布局吧