ConstraintLayout目的:减少Android xml布局文件的层级!!!
推荐阅读文章
1、ConstraintLayout (这到底是什么)
2、ConstraintLayout ( 这到底是什么 ) (小贴士及小技巧) 第二部分
3、Constraint Layout 动画 |动态 Constraint |用 Java 实现的 UI(这到底是什么)[第三部分]
4、ConstraintLayout 可视化[Design]编辑器 (这到底是什么)[第四部分]
添加引用:build.gradle中声明(目前版本为1.0.1)
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.0.1'
}
五大功能说明:
- 相对位置
- 比例位置
- 引导线
- 比例宽高
- 链表样式
使用说明:
1、相对位置
<?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="com.example.administrator.constraintdemo.MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
效果:
代码说明:重点就是这四句话,原理都是一样的,所以我们分析一句话
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf=”parent”
这句话拆成三部分来说就是
- constrainBottom:相当于是该控件(代码中的Button)的底部
- toBottomOf:在xxx的底部
- “parent”:意思是该控件的父控件,这里也可以使用@id/xxx引用
综上:这四句话的意思是Button的left在父控件的left,top在父控件的top,right在父控件的right,bottom在父控件的bottom,因为Button的width、height是“wrap_content”,所以我们看到Button位于父控件的中心位置
如果我们去掉app:layout_constraintBottom_toBottomOf=”parent”效果将会如下:
这是一个Button的效果,接下来我们看两个Button
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:id="@+id/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/cancel_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginStart="16dp"
android:text="取消"
app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
app:layout_constraintStart_toStartOf="@id/constraintLayout"/>
<Button
android:id="@+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginStart="16dp"
android:text="下一步"
app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
app:layout_constraintStart_toEndOf="@id/cancel_button"/>
</android.support.constraint.ConstraintLayout>
第一个Button的位置代码:
app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
app:layout_constraintStart_toStartOf="@id/constraintLayout"
@id/constraintLayout是引用的父布局的id,所以第一个“取消”Button是位于左下角
再看第二个Button位置代码:
app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
app:layout_constraintStart_toEndOf="@id/cancel_button"
注意第二行,第二个Button的start是在id为cancel_button的end,也就是“取消”按钮的右边,所以我们可以看到如下的效果:
2、比例位置
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintVertical_bias="0.2"
比例位置只有两种,即水平、竖直两个方向,在刚才的只有一个Button的样式中
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
我们没有声明比例,但是按钮却居中,因为默认的比例是0.5,即Button左边到父控件左边的距离和Button右边到父控件右边的距离之间的比例为1:1,如果我们加上比例,比如下边的布局
<?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="com.example.administrator.constraintdemo.MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintVertical_bias="0.2"/>
</android.support.constraint.ConstraintLayout>
效果将会是如下图:
3、引导线 GuideLine
- android:orientation=”vertical”数值有vertiacl(竖线)、horizontal(横线)
- app:layout_constraintGuide_begin=”72dp”距离开始的距离
- app:layout_constraintGuide_end=”72dp距离结束位置的距离
- app:layout_constraintGuide_percent=”0.2”按照比例计算所在位置
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/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/guideLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="72dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Guide Up"
app:layout_constraintStart_toStartOf="@id/guideLine"
app:layout_constraintTop_toTopOf="@+id/constraintLayout"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintVertical_bias="0.25"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Guide Down"
app:layout_constraintStart_toStartOf="@id/guideLine"
app:layout_constraintTop_toTopOf="@+id/constraintLayout"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintVertical_bias="0.75"/>
</android.support.constraint.ConstraintLayout>
效果图:
4、比例宽高
**宽高比**16:9,可在单独设置了宽度的情况下,根据比例计算出布局的高度
app:layout_constraintDimensionRatio="16:9"
代码示例:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:id="@+id/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:layout_width="0dp"
android:layout_height="200dp"
android:background="@color/colorAccent"
android:src="@drawable/total_large"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
app:layout_constraintRight_toRightOf="@+id/constraintLayout"
app:layout_constraintTop_toTopOf="@+id/constraintLayout"
app:layout_constraintDimensionRatio="16:9"/>
<ImageView
android:layout_width="0dp"
android:layout_height="200dp"
android:background="@color/colorAccent"
android:contentDescription="@null"
android:src="@drawable/total_large"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintDimensionRatio="4:3"
app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
app:layout_constraintRight_toRightOf="@+id/constraintLayout"/>
</android.support.constraint.ConstraintLayout>
效果图:
5、链表样式
可设置水平链表、垂直链表、链表样式style
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="packed"
属性值有:
- spread
- packed
spread_inside
相关优秀文章:
初步使用:
http://www.jianshu.com/p/32a0a6e0a98a
https://juejin.im/entry/58aaedd5ac502e006974e868进阶用法:
十分感谢这些辛勤传播新知识的博主。