参见工作以来,写布局文件一直是我觉得最痛苦也最浪费时间的流程,稍微复杂一点的界面就需要利用各种LinearLayout和RelativeLayout来嵌套完成界面,利用嵌套不仅浪费时间,对于手机界面的性能也有所影响。于是想到了利用ConstraintLayout来进行界面的编写。一开始还是利用代码编写xml文件,觉得并没有多少提升工作效率,反而觉得代码量比以前更大了,因为ConstraintLayout要约束子控件的位置,直到我利用鼠标拖拽之后,两个字:真香!
先简单介绍一下ConstrainLayout:约束布局ConstraintLayout 是一个ViewGroup,可以在Api9以上的Android系统使用它,它的出现主要是为了解决布局嵌套过多的问题,以灵活的方式定位和调整小部件。从 Android Studio 2.3 起,官方的模板默认使用 ConstraintLayout。
首先观察一下UI界面大致分为三个部分:toolbar,显示区域,操作区域。从上至下来进行设计,先再布局文件中添加一个toolbar
布局约束
<?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=".MainActivity">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
android:navigationIcon="@drawable/ic_nav_back"
app:navigationIcon="@drawable/ic_nav_back"
app:titleTextColor="@android:color/white">
<TextView
android:id="@+id/tv_title"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:text="空调界面"
android:textColor="#ffffff"
android:textSize="18sp" />
</android.support.v7.widget.Toolbar>
</android.support.constraint.ConstraintLayout>
此时toolbar中是没有进行任何约束的,编译器会直接报错,然后我们切换至design界面,利用鼠标拖拽来进行实现约束。
看到toolbar上有四个白色的小圆点,利用鼠标拖拽这四个小圆点就可以实现布局约束。
按住鼠标之后会出现一个箭头,需求是要实现左对齐父布局,所以只要将鼠标拖至界面最左侧就可实现app:layout_constraintStart_toStartOf="parent",上下左右同理。
添加GuideLine
完成第一个部分的设计之后,来到第二部分,第二部分加上第一部分大概是占总布局的50%,所以我们这里可以引入一条水平的GuideLine,直接在Design界面鼠标右击进行添加:
选择自己想要添加的类型,这里我们想要的是添加一条水平的GuideLine,所以选择第二个即可。
GuideLine位置有两种可以选择,这里根据需求选择百分比,设置为整个布局的50%,这样界面上就出现了一条分割上线部分的GuideLine,根据这条线来实现第二部分和第三部分的添加。
添加第二部分的背景,往布局中拖入一个View,然后利用鼠标拖拽实现约束
与之前约束toolbar一样拖动白点,使得View上对齐toolbar,左右对齐parent,下对齐GuideLine,设置背景即可。
居中设置
第二部分显示温度是居中的,拖入一个TextView进行左右上下分别于View的上线左右进行约束,就可以将TextView居中。
第二部分其余控件约束方式都是类似,就不在赘述。
链(Chain)
进入第三部分,引入一个约束布局的链(Chain)的概念:链使我们能够对一组在水平或竖直方向互相关联的控件的属性进行统一管理。成为链的条件:一组控件它们通过一个双向的约束关系链接起来。 并且链的属性是由一条链的头结点控制的,如下:在第三部分的模式当模板,引入四个ImageView。使用鼠标左键进行选中四个View,然后右击创建一个水平的链
然后对于链的第一个控件进行约束,之后的控件对于链的第一个控件进行约束,就可以达到统一管理的目的。
Group
Group也是一个非常重要的概念,可以将多个控件添加只一个Group中,然后设置该Group的可见性来空这Group中所有控件的可见性。在界面上右击添加一个Group然后再左侧控件栏将要添加进Group的控件直接拖入就能实现添加
总结
ContranitLayout已经成为模板布局,Google采用ContranitLayout一定有他的道理,所以Android开发一定要尽早的使用ContranitLayout来进行界面的编写。