Android全新布局Constraintlayout初探

前言：2016 Google I/O上，google带来了全新的布局方式：约束布局ConstraintLayout，我也在最近试用了一下这种全新的布局方式

ConstraintLayout是什么

ConstraintLayout可以说是相对布局RelativeLayout的升级版，它允许我们在layout上设计子控件与子控件之间的位置关系。或许你会说，这不就是RelativeLayout之前一直在干的事情吗？
但我们用RelativeLayout时，经常会出现多层布局嵌套，而ConstraintLayout往往只需要一层就可以满足需求，从而提高软件布局渲染的性能。

例如：

相对布局RelativeLayout允许我们用以下4个属性来设置view与view之间的位置关系

• layout_toRightOf
• layout_toLeftOf
• layout_toTopOf
• layout_toBottomOf

然而，约束布局ConstraintLayout带来了众多属性

• layout_constraintTop_toTopOf
• layout_constraintTop_toBottomOf
• layout_constraintBottom_toTopOf
• layout_constraintBottom_toBottomOf
• layout_constraintLeft_toTopOf
• layout_constraintLeft_toBottomOf
• layout_constraintLeft_toLeftOf
• layout_constraintLeft_toRightOf
• layout_constraintRight_toTopOf
• layout_constraintRight_toBottomOf
• layout_constraintRight_toLeftOf
• layout_constraintRight_toRightOf
• ......

这么多属性，中间的constraintXXX又是什么意思呢？不用想了，直接新建一个项目，一探究竟就知道了！

怎样使用ConstraintLayout

1. 下载Android Studio 2.2 Preview2（2.1正式版没有该功能，必须安装最新的版本）
   http://tools.android.com/download/studio/canary/latest
2. 新建项目，在build.gradle中添加

dependencies 
{
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha1'
}

ok，切换到布局的Design页面，拖动一个ImageView到布局里面，如下图：

init.png

(图)分了两部分，左边为设计预览，右边为蓝图模式

点击一下左边视图的imageview，会出现4边各有一个小圆和4角各有一个小正方形：小圆手柄（调整手柄）可以调节控件的大小，而正方形手柄（约束手柄）可以调整控件的位置。尝试把4个约束手柄分别拉到界面的边缘，看看有什么情况出现：

center_layout.gif

Android Studio自动把该imageview居中，来看看xml布局代码：

<ImageView
            android:src="@drawable/abc_ic_menu_cut_material"
            android:layout_width="91dp"
            android:layout_height="59dp"
            android:id="@+id/imageView"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"
            app:layout_constraintLeft_toLeftOf="@+id/activity_constraint_layout"
            app:layout_constraintTop_toTopOf="@+id/activity_constraint_layout"
            app:layout_constraintRight_toRightOf="@+id/activity_constraint_layout"
            app:layout_constraintBottom_toBottomOf="@+id/activity_constraint_layout"
            />

可以看到，自动添加了4个ConstraintLayout的属性。还是不太懂，我们再添加一个TextView来试试看：

under_layout.gif

把TextView放到ImageView下面，会自动把TextView的左右约束与ImageView的左右约束连接起来。我再把TextView的顶部约束和ImageView的底部约束两者连接起来，看看xml代码发生了怎样的变化：

<TextView
            android:text="TextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:id="@+id/textView"
            android:layout_marginTop="8dp"
            app:layout_constraintLeft_toLeftOf="@+id/imageView" 
            app:layout_constraintTop_toBottomOf="@+id/imageView"
            app:layout_constraintRight_toRightOf="@+id/imageView"
            />

多了3个ConstraintLayout的属性。TextView显示在ImageView的正下方。如果我再添加一个layout_constraintBottom_toTopOf属性呢（也就是两者的顶部约束连接）？

噢！TextView叠加在ImageView的上面。

原来，constraintXXX的意思是XXX约束在另一个view的什么位置。

例如控件A定义了app:layout_constraintLeft_toLeftOf="@+id/控件B"

说明控件A的左边与控件B的左边位置要一致。

再定义控件A的app:layout_constraintBottom_toTopOf="@+id/控件B"

说明控件A的底部与控件B的顶部位置要一致，言下之意就是A出现在B的上方了。

结合上面两个属性，A就会出现在B的左上方的位置上。

试试只添加控件A的app:layout_constraintLeft_toLeftOf="@+id/控件B"和app:layout_constraintTop_toTopOf="@+id/imageView"，看看是不是控件A叠加在控件B的上面，有点FrameLayout的味道吧！！！

其实多动手拖拉一下，就会明白这个全新布局的用法了。对于精细布局，还是蛮有效果的呢！！！