前言:谷歌在2016年的IO大会上推出的一种新的布局方式—-ConstraintLayout,这局是一种约束型的布局方式。
下面我们来对比ConstraintLayout和常用的布局实现相同的页面有什么区别。
上效果图
使用ConstraintLayout前提是先在build.gradle下引用如下jar
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
}
我们常用的Layout编写的代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="90dp"
android:orientation="horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
>
<ImageView
android:id="@+id/iv_hostHeaderPhoto"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_vertical"
android:src="@android:color/darker_gray"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="20dp"
>
<TextView
android:id="@+id/tv_hostName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="@android:drawable/arrow_down_float"
android:drawablePadding="5dp"
android:textSize="16sp"
android:layout_marginTop="10dp"
android:text="Name"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
>
<TextView
android:id="@+id/tv_hostTime"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textSize="10sp"
android:drawablePadding="5dp"
android:drawableLeft="@android:drawable/arrow_down_float"
tools:text="深圳市龙岗区" />
<TextView
android:id="@+id/tv_hostErrorMsg"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:textSize="10sp"
android:drawableLeft="@android:drawable/arrow_down_float"
android:text="坐标:22.11,13.000" />
</LinearLayout>
<TextView
android:id="@+id/tv_hostLocation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="10sp"
android:drawablePadding="5dp"
android:drawableLeft="@android:drawable/arrow_down_float"
android:text="2016-10-11 19:00:00" />
</LinearLayout>
</LinearLayout>
使用ConstraintLayout编写的布局
<?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"
>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@android:color/darker_gray"
tools:layout_editor_absoluteY="16dp"
tools:layout_editor_absoluteX="16dp"
android:id="@+id/imageView3" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="@android:color/black"
android:text="Name"
android:drawableRight="@android:drawable/arrow_down_float"
android:drawablePadding="5dp"
tools:layout_editor_absoluteY="16dp"
tools:layout_editor_absoluteX="106dp"
/>
<TextView
android:text="深圳市南山区"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteY="48dp"
android:id="@+id/textView5"
tools:layout_editor_absoluteX="106dp"
android:drawableLeft="@android:drawable/arrow_down_float"/>
<TextView
android:text="2016-10-11 19:00:00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView6"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toRightOf="@+id/imageView3"
app:layout_constraintBottom_toBottomOf="@+id/imageView3"
android:drawableLeft="@android:drawable/arrow_down_float" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteY="45dp"
android:id="@+id/textView7"
android:drawableLeft="@android:drawable/arrow_down_float"
android:text="坐标:22.111,13,555"
tools:layout_editor_absoluteX="226dp" />
</android.support.constraint.ConstraintLayout>
可以看到常用布局的写法多嵌套了两个LineraLayout。
相比两种做法,ConstraintLayout简洁了许多,没有在嵌套其他的Layout,在优化的角度上减少层级的嵌套对app性能有不小的帮助。
ConstraintLayout优势
1 . 降低编写复杂布局的难度。 在android studio下Design页面可以随意的拖动控件的位置,并用辅助线约束对父级容器进行约束,大大增强了以前传统布局的界面制作能力,能够轻松的编写出复杂的页面。
两控件轻松的对齐
2 . 对布局性能优化有着不小的提高。布局嵌套越少,加载的速度越快。
3 . 在ConstraintLayout下的灵活度变得很高。