ConstraintLayout薪寓，約束布局
A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.
這是Google官方API的介紹
ConstraintLayout是Android Studio 2.2中主要的新增功能之一亡资，也是Google在2016年的I/O大會(huì)上重點(diǎn)宣傳的一個(gè)功能。在Android Studio 2.3開(kāi)始向叉，IDE默認(rèn)生成的Activity布局都是以ConstraintLayout做為根布局锥腻。
ConstraintLayout提供了可視化的方式來(lái)編寫(xiě)界面，但是在實(shí)際使用中母谎，因?yàn)槲覀兊牟季謴?fù)雜瘦黑，很難用可視化操作去精準(zhǔn)布局，所以我們還是傾向于手動(dòng)去寫(xiě)xml。
ConstraintLayout的優(yōu)點(diǎn)
1.對(duì)比RelativeLayout
實(shí)際開(kāi)發(fā)中幸斥，我們最常用的layout是RelativeLayout存崖，ConstraintLayout某種意義上可以認(rèn)為是RelativeLayout的升級(jí)版。 舉一個(gè)簡(jiǎn)單的例子
上圖中一個(gè)button在RelativeLayout的右下方睡毒，當(dāng)我們希望這個(gè)RelativeLayout的高度自適應(yīng)的時(shí)候，我們?nèi)ピO(shè)置RelativeLayout的layout heiht為wrap content冗栗，我們會(huì)看到如下圖結(jié)果演顾，顯然不是我們需要的。
但是如果用ConstraintLayout隅居，可以輕松實(shí)現(xiàn)這個(gè)需求
2.扁平化
我們都知道钠至，我們?cè)趯?shí)現(xiàn)界面布局的時(shí)候，強(qiáng)調(diào)盡量少的嵌套胎源，因?yàn)榍短锥鄷?huì)導(dǎo)致需要更多的時(shí)間去繪制view棉钧。為了減少嵌套，我們經(jīng)常會(huì)使用RelativeLayout代替LinearLayout涕蚤，但是RelativeLayout會(huì)對(duì)子View做兩次measure宪卿。
相關(guān)view的繪制流程以及RelativeLayout和LinearLayout的性能對(duì)比，貼一個(gè)文章Android中RelativeLayout和LinearLayout性能分析
我們看一個(gè)例子可以清晰看到ConstraintLayout減少嵌套
如上圖的UI如果我們用原先的RelativeLayout實(shí)現(xiàn)万栅，層次圖如下
但是如果我們用ConstraintLayout實(shí)現(xiàn)佑钾，層次圖會(huì)變的扁平化如下圖
另外關(guān)于ConstraintLayout的性能分析，可以參考Google的文章解析ConstraintLayout的性能優(yōu)勢(shì)
3.應(yīng)對(duì)需求多變性
還是剛才那個(gè)例子烦粒，如果ui需求修改成如下圖
如果用RelativeLayout我們可能需要很大程度上去修改原來(lái)的布局結(jié)構(gòu)休溶，但是用ConstraintLayout，我們只需要把不需要的那個(gè)Textview置為GONE就能達(dá)到UI效果扰她。
當(dāng)然兽掰，不是所有需求變動(dòng)我們都能很方便去實(shí)現(xiàn)。
貼一下這個(gè)UI的ConstraintLayout的實(shí)現(xiàn)代碼
<?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:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="64.5dp"
android:background="@drawable/item_background_selector_white">
<tv.chushou.zues.widget.fresco.FrescoThumbnailView
android:id="@+id/iv_image"
android:layout_width="@dimen/subc_user_thumb_width"
android:layout_height="@dimen/subc_user_thumb_width"
android:layout_marginLeft="14dp"
android:layout_marginStart="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
fresco:actualImageScaleType="centerCrop"
fresco:placeholderImageScaleType="fitXY"
fresco:roundAsCircle="true"
fresco:roundingBorderColor="@color/transparent_5_black"
fresco:roundingBorderWidth="0.5dp" />
<ImageView
android:id="@+id/iv_sex"
android:layout_width="14dp"
android:layout_height="14dp"
android:src="@drawable/user_female_big"
app:layout_constraintBottom_toBottomOf="@+id/iv_image"
app:layout_constraintRight_toRightOf="@+id/iv_image" />
<com.kascend.chushou.widget.ImgRightTextView
android:id="@+id/img_text_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="2.5dp"
android:layout_marginLeft="14dp"
android:layout_marginStart="14dp"
app:layout_constraintBottom_toTopOf="@+id/tv_bottom"
app:layout_constraintEnd_toStartOf="@+id/tv_game"
app:layout_constraintLeft_toRightOf="@+id/iv_image"
app:layout_constraintRight_toLeftOf="@+id/tv_game"
app:layout_constraintStart_toEndOf="@+id/iv_image"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_goneMarginRight="105dp"
app:magin_left="5dp" />
<TextView
android:id="@+id/tv_game"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_marginBottom="2.5dp"
android:layout_marginEnd="10dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="10dp"
android:ellipsize="end"
android:gravity="right"
android:includeFontPadding="false"
android:singleLine="true"
android:textColor="@color/download_content_color"
android:textSize="12.5sp"
app:layout_constraintBottom_toTopOf="@+id/tv_state"
app:layout_constraintEnd_toStartOf="@+id/iv_detail"
app:layout_constraintLeft_toRightOf="@+id/img_text_name"
app:layout_constraintRight_toLeftOf="@+id/iv_detail"
app:layout_constraintStart_toEndOf="@+id/img_text_name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="@+id/tv_bottom"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_marginStart="14dp"
android:layout_marginTop="2.5dp"
android:ellipsize="end"
android:includeFontPadding="false"
android:singleLine="true"
android:textColor="@color/kas_littlegray"
android:textSize="@dimen/fontsize_12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/tv_state"
app:layout_constraintLeft_toRightOf="@+id/iv_image"
app:layout_constraintRight_toLeftOf="@+id/tv_state"
app:layout_constraintStart_toEndOf="@+id/iv_image"
app:layout_constraintTop_toBottomOf="@+id/img_text_name" />
<TextView
android:id="@+id/tv_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="10dp"
android:layout_marginStart="30dp"
android:layout_marginTop="2.5dp"
android:ellipsize="end"
android:gravity="top|right"
android:includeFontPadding="false"
android:singleLine="true"
android:textColor="@color/friend_state"
android:textSize="@dimen/fontsize_9sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/iv_detail"
app:layout_constraintLeft_toRightOf="@+id/tv_bottom"
app:layout_constraintRight_toLeftOf="@+id/iv_detail"
app:layout_constraintStart_toEndOf="@+id/tv_bottom"
app:layout_constraintTop_toBottomOf="@+id/tv_game" />
<ImageView
android:id="@+id/iv_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="14dp"
android:layout_marginRight="14dp"
android:src="@drawable/bg_in_playlive"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="0dp"
android:layout_height="1px"
android:layout_marginLeft="14dp"
android:layout_marginStart="14dp"
android:background="@color/c_page_diliver_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/iv_image"
app:layout_constraintStart_toEndOf="@+id/iv_image" />
</android.support.constraint.ConstraintLayout>
使用ConstraintLayout
關(guān)于可視化操作徒役，可以參考動(dòng)態(tài)圖解&實(shí)例 ConstraintLayout Chain和Android新特性介紹孽尽，ConstraintLayout完全解析
手動(dòng)寫(xiě)xml，可以參考ConstraintLayout 屬性詳解 和Chain的使用和ConstraintLayout 完全解析 快來(lái)優(yōu)化你的布局吧以及譯文ConstraintLayout (這到底是什么)
幾個(gè)要點(diǎn)
- Chains
- Guidelines
- ConstraintSet
更新
Constraint Layout 1.1.x帶來(lái)了哪些新東西廉涕？
關(guān)于坑
ConstraintLayout嵌套會(huì)出現(xiàn)顯示不全的問(wèn)題
其他暫時(shí)還未碰到
關(guān)于引用
文中貼了鏈接的文章都有參考泻云，致謝。
