Android-ConstraintLayout(約束布局)-基本介紹

05-24

來自專欄 Android知識進階(遙遠的重頭開始)

約束布局也是年前才開始關注->谷歌在2016年的IO大會上推出的一種新的布局方式—-ConstraintLayout，這局是一種約束型的布局方式。在設置和介紹上類似IOS的自動布局。

先附上github的地址和文檔地址(後面再慢慢介紹-是該習慣看官方的了):

github傳送門 doc傳送門網上很多博客文章基本都是基於doc上的介紹翻譯過來的，有的比較深入，還專門寫了文章，關於源碼的解析。那個後面我們可以深入了解下渲染機制啥的!

我們這裡也是基於 doc傳送門來做一些說明和演示，後面項目打算利用這個優化現有項目的布局，之前有的布局感覺太複雜，效率相對有點低 - 另外後面我做優化的時候回把兩種渲染方式分別做性能對比，這樣我覺得更有意思，至於源碼啥的慢慢來...

1.先看下繼承關係和基本介紹

ConstraintLayout

public class ConstraintLayout

extends ViewGroup

java.lang.Object

?android.view.View

?android.view.ViewGroup

?android.support.constraint.ConstraintLayout

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.

Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread). As such, we are planning on enriching its API and capabilities over time. This documentation will reflect those changes.

繼承ViewGroup，然後繼承View，最後Object。關於View與ViewGroup有什麼區別？(後面專門研究下).

解釋下上面的意思：約束布局允許你以一種靈活的方式去定位和調整你的ViewGroup控制項。你可以在api 9及以上使用，我們正在計劃加強和豐富它的api。這些文檔說明將會翻譯這些修改 ---- 翻譯太爛，懂意思就行!

2.屬性大類

There are currently various types of constraints that you can use:

Relative positioning --- 相對定位
Margins --- 間距
Centering positioning --- 中心定位
Circular positioning --- 圓形定位(這個有意思，做環形按鈕應該很棒)
Visibility behavior --- 可見性行為
Dimension constraints --- 尺寸約束
下面這個三個還不太懂從字面就蒙圈,後面具體試驗後做說明
Chains --- 鏈
Virtual Helpers objects --- 虛擬助手對象
Optimizer --- 優化器

2.1 相對定位走起

Relative positioning is one of the basic building block of creating layouts in ConstraintLayout. Those constraints allow you to position a given widget relative to another one. You can constrain a widget on the horizontal and vertical axis:

Horizontal Axis: left, right, start and end sides
Vertical Axis: top, bottom sides and text baseline

The general concept is to constrain a given side of a widget to another side of any other widget.

相對定位在約束布局裡面是最基本的創建塊布局的其中一種。這些約束允許你定位一個控制項相對另外一個的位置。你可以在水平或者垂直方向上做約束。

水平方向上，你可以使用left, right ,start 和end sides屬性。

垂直方向上，你可以使用top，bottom和baseline。

(其實做個布局大概就知道，left， top， right， bottom等這些東西大概是什麼概念。so，後面具體實踐就更清楚了...)

Here is the list of available constraints (Fig. 2):

layout_constraintLeft_toLeftOf --左側靠xxx控制項的左側
layout_constraintLeft_toRightOf --左側靠xxx控制項的右側
layout_constraintRight_toLeftOf --右側靠xxx控制項的左側
layout_constraintRight_toRightOf --右側靠xxx控制項的右側
layout_constraintTop_toTopOf --頂部靠xxx控制項的頂部
layout_constraintTop_toBottomOf --頂部靠xxx控制項的下部
layout_constraintBottom_toTopOf --底部靠xxx控制項的頂部
layout_constraintBottom_toBottomOf --底部靠xxx控制項的底部
layout_constraintBaseline_toBaselineOf --這個地方我們下面會專門分析下，灰常有意思(網路有些都是直接翻譯官方，沒怎麼解釋這個東東)
下面這個幾種單獨使用上效果和上面的有幾個很像，具體有什麼區別呢？按照我了解的以前relativelayout的layout_toRightOf和layout_toEndOf的區別，說的是新版的是toEndOf，官方建議使用toEndOf。難道是為了兼容舊版的才搞了兩套？後面有發現再專門補上吧....
layout_constraintStart_toEndOf --起始邊和終止邊對齊
layout_constraintStart_toStartOf -- 起始邊和起始邊對齊
layout_constraintEnd_toStartOf --終止邊和起始邊對齊
layout_constraintEnd_toEndOf --終止邊和終止邊對齊
父布局記得都是android.support.constraint.ConstraintLayout喲喲喲

2.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=".Main2Activity"> <Button android:id="@+id/testBtn1" android:layout_width_="wrap_content" android:layout_height="wrap_content" android:text="fuck button1" android:textSize="15sp" app:layout_constraintLeft_toLeftOf="parent"/> <Button android:id="@+id/testBtn2" android:layout_width_="wrap_content" android:layout_height="wrap_content" android:text="fuck button2" android:textSize="15sp" app:layout_constraintRight_toRightOf="parent"/> <Button android:id="@+id/testBtn3" android:layout_width_="wrap_content" android:layout_height="wrap_content" android:text="fuck no button3" android:textSize="15sp" app:layout_constraintLeft_toRightOf="parent"/> <Button android:id="@+id/testBtn4" android:layout_width_="wrap_content" android:layout_height="wrap_content" android:text="fuck button4" android:textSize="15sp" app:layout_constraintBottom_toBottomOf="parent"/> <Button android:id="@+id/testBtn5" android:layout_width_="wrap_content" android:layout_height="wrap_content" android:text="fuck button5" android:textSize="15sp" app:layout_constraintRight_toRightOf="parent" app:layout_constraintBottom_toBottomOf="parent"/></android.support.constraint.ConstraintLayout>

這幾個比較簡單，自己嘗試下就行了。和以前RealaoutLayout的alignparent相關屬性差不多。

這幾種組合基本能夠滿足控制項之間簡單的相對位置的布局了。有些像left靠right的布局有時候也是有需求的，比如你開始就是讓它再屏幕外面，之後你有可能你會做一個動畫平移過來，然後回去，靈活運用就好了！

最後我們說下layout_constraintBaseline_toBaselineOf

首先是基本的布局使用，button6再button1的右下角。然後我們有定義了一個與button6同樣高度的按鈕button7，靠button6的右邊。

<?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=".Main2Activity"> <Button android:id="@+id/testBtn1" android:layout_width_="wrap_content" android:layout_height="wrap_content" android:text="fuck button1" android:textSize="15sp" app:layout_constraintLeft_toLeftOf="parent"/> <Button android:id="@+id/testBtn6" android:layout_width_="wrap_content" android:layout_height="200dp" android:text="fuck button6" android:textSize="15sp" app:layout_constraintLeft_toRightOf="@id/testBtn1" app:layout_constraintTop_toBottomOf="@id/testBtn1"/> <Button android:id="@+id/testBtn7" android:layout_width_="wrap_content" android:layout_height="200dp" android:text="fuck button7" android:textSize="15sp" app:layout_constraintLeft_toRightOf="@id/testBtn6"/></android.support.constraint.ConstraintLayout>

然後我們加上

你會發現：

是不是還可以。原來如果要做這種，可能需要一個水平布局，或者說兩個控制項都具體頂部同樣的高度。至少我看來用這種約束布局會簡化一些...

Not End...布局就像畫圖，圖能畫出來布局應該可以做，本質上UI顯示就是渲染繪畫的過程....後面我們繼續margin, center等等...下篇又要繼續註解相關的深入了...哼!