谷歌約束控件(ConstraintLayout)扁平化佈局入門

Google IO大會中不僅僅帶來了Android Studio 2.2預覽版,同時帶給我們一個依賴約束的庫。

簡單來說,她是相對佈局的升級版本,但是區別與相對佈局更加強調約束。何爲約束,即控件之間的關係。
她能讓你的佈局更加扁平化,一般來說一個界面一層就夠了;同時藉助於AS我們能極其簡單的完成界面佈局。

準備

1.準備好Android Studio 2.2預覽版,在這裏給大家準備好了下載鏈接:

爲什麼需要預覽版,其實就庫來說並不需要AS最新版本,但是這樣我們只能使用代碼來進行佈局,而ConstraintLayout讓佈局迴歸原始,拖動即可。比起常規控件拖動基本是分分鐘高潮的節奏。

2.首先在項目中添加依賴:

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

注意:正式版本還未發佈。

初嘗禁果

首先我們建立 activity_start.xml 佈局,並添加如下代碼:

<?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"
    android:id="@+id/lay_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/dog" />

</android.support.constraint.ConstraintLayout>

在這個代碼中我們定義了根佈局爲ConstraintLayout,然後添加了一個ImageView。請注意在代碼中儘量爲每一個控件都加上id名稱,因爲約束佈局需要知道每一個控件之間的關係。
要讓圖片佈局水平居中哪麼我們更改ImageView部分代碼爲:

    <ImageView
        android:id="@+id/iv_head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/dog"
        app:layout_constraintLeft_toLeftOf="@+id/lay_root"
        app:layout_constraintRight_toRightOf="@+id/lay_root" />

如果要垂直居中,哪麼我們繼續添加代碼:

    <ImageView
        android:id="@+id/iv_head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/dog"
        app:layout_constraintBottom_toBottomOf="@id/lay_root"
        app:layout_constraintLeft_toLeftOf="@+id/lay_root"
        app:layout_constraintRight_toRightOf="@+id/lay_root"
        app:layout_constraintTop_toTopOf="@id/lay_root" />

此時我們的控件已經居中在最中央了。

當然爲了證明水平居中,我們限定圖片寬度爲100dp:
這裏寫圖片描述

工作區

我們先來看看 Android Studio 2.2 Preview1 提供的工作區。
這裏寫圖片描述

在工作區中有兩種預覽,一種設計預覽,一種叫做藍圖的東西。兩者可以輔助進行佈局預覽,非常Nice。

這裏寫圖片描述
眼睛圖標:用來控制是否顯示約束的東西。

這裏寫圖片描述
磁鐵圖標:用來自動吸附的東西,就是說兩個按鈕放在一起的時候會自動按照一定的約束條件進行鏈接。

這裏寫圖片描述
清理圖標:用來清除所有的約束,當鼠標放倒一個控件上時也會有一個清理圖標出現,點擊可以清除當前選中的控件的約束。

這裏寫圖片描述
燈泡圖標:用來自動推斷約束條件的東西,運用這個可以更加智能快速的完成佈局。

基礎

在佈局引擎中,能爲你的控件手動或者自動的創建一定的佈局約束;爲了更好的理解約束,下面來看一些案例(源於谷歌案例)。

約束

簡單來說約束可以幫助你按照某種相互關係進行佈局,可以讓控件對齊等等操作,在這裏我們操作後面的按鈕並鏈接到前一個按鈕的右端,並且間隔56dp。哪麼此時無論我移動按鈕1到哪兒,按鈕2都將在按鈕1的右邊並間距56dp。

這裏寫圖片描述

手柄類型

這裏寫圖片描述
在這個圖中我們看見有3種不同的手柄。

調整手柄

這裏寫圖片描述

拖動該手柄能幫助你調整整個控件的大小。

約束手柄

這裏寫圖片描述

這個約束手柄位於控件的四邊,在四邊上有四個小圓點,拖動該圓點並指向另外的控件的一邊,哪麼可以讓該控件對其到指向的控件。
當然你可以設置margin來提供對應的間距。如果需要清理掉單個約束,點擊該圓點即可。

手柄限制:

  • 左右兩邊的手柄只能鏈接到另外一個控件的左右兩邊,上下手柄同樣。

基線手柄

這裏寫圖片描述

該手柄僅僅出現在有文字的控件中使用,或者繼承TextView的控件中使用,其作用是對齊兩個控件的文字基線。

基線限制:

  • 基線只能鏈接到另一個控件的基線。
  • 基線也不能與手柄進行鏈接。

谷歌的案例

1.首先選擇一個約束手柄,並按住鼠標拖動到另外一個控件的手柄原點上,當鏈接線變成綠色的時候鬆開鼠標即可創建一個約束。

這裏寫圖片描述

2.添加圖片控件,鏈接TextView控件的頂部手柄到ImageView底部手柄,並拖動一定間距。可以看出約束添加時文本控件自動吸附到了圖片的底部。
這裏寫圖片描述

3.拖動圖片控件頂部手柄到根佈局頂部。
這裏寫圖片描述

4.最後我們同時添加圖片左邊與右邊的約束使其居中對齊。
這裏寫圖片描述

5.添加基線約束。
這裏寫圖片描述

是不是很簡單?從未感覺佈局如此簡單,如果使用傳統佈局進行拖動必定不能做到多屏幕適配的問題,而約束佈局卻不會,約束強調相互關係,並不固定位置。

屬性面板

上面的是一些基本用法,下面來看看屬性面板。在這裏將學到更加Nice的自定義化設置。

首先我們在屏幕上添加一個圖片控件,並添加四邊約束到根佈局,此時我們看見的界面是這樣的:
這裏寫圖片描述

在屬性面板的上面部分是我們的檢查員(Inspector),在這個視圖中顯示了當前選中的控件的約束情況。

  • Margins:間距,在這個面板中我們可以看見當前圖片控件相對約束的控件來說四邊都具有16dp的間距。

  • 刪除約束:鼠標放到檢查器上中間正方形邊上會出現一個刪除按鈕,點擊此按鈕即可刪除當前方向的約束。

  • 百分比定位:當你同時創建了左右兩邊的約束的時候,你會在監視器上看見一個水瓶的進度條,默認情況是50的值,意味着相對你的左右兩邊的控件約束進行居中對齊。你可以拖動這個進度條進行更改;同理上下同時創建約束後也將有一個垂直方向的進度條出現。
    這裏寫圖片描述

  • 控件自身尺寸:對於控件自身的大小控制有3種不同的類型,你可以通過點擊中間正方形上的線來進行切換。
    這裏寫圖片描述
    這裏寫圖片描述
    Fixed: 該模式下爲固定尺寸,你可以設置控件的width/height屬性來控制高和寬。
    這裏寫圖片描述
    AnySize: 該模式可以讓控件佔據所有可用的空間來滿足約束。換句話說,這更像是匹配約束。不同於match_parent,是佔據父視圖的所有可用空間;AnySize模式下是滿足約束的情況下儘量滿足控件的大小空間。
    這裏寫圖片描述
    Wrap Content: 在該模式下,控件所佔有的空間是可縮放的,相當於“wrap_content“屬性。

    我們來看一個從Fixed模式調整爲AnySize模式的對比圖:
    這裏寫圖片描述
    調整圖片的寬度佔有屬性爲AnySize模式之後:
    這裏寫圖片描述

到這裏基本是使用是OK了,下面再說兩點額外的操作。

更多

自動鏈接

還記得上面說到工作區的時候說的自動鏈接磁鐵圖標麼?
這裏寫圖片描述
首先我們啓用該功能。然後新建界面並且拖動一個圖片控件到中心部分,然後放開,此時會看見編輯器自動爲我們添加了圖片四邊的約束。

這裏寫圖片描述

自動推斷

這裏寫圖片描述
自動推斷也是用來輔助用戶創建控件約束的;其原理是綜合控件之間的關係創建對應的約束條件。

與自動鏈接的區別:
自動鏈接,自動推斷都是輔助創建約束。但是自動鏈接是在用戶拖動一個控件後爲當前拖動的控件創建約束;而自動推斷不同,自動推斷會綜合考慮全部控件之間的關係,然後根據佈局創建控件之間的相互約束關係。

要測試自動推斷,首先我們關閉自動鏈接功能,此時我們添加一些控件,控件的佈局如下,因爲我們關閉了自動鏈接,並且採用拖動關係進行創建,此時界面上控件之間是沒有約束關係的。
這裏寫圖片描述
此時我們在手機上看見的是這樣:
這裏寫圖片描述
全部被擠壓到了一塊兒。
此時我們點擊頂部的��圖標,自動推斷約束,然後可以看見我們的佈局變了:
這裏寫圖片描述
此時再看看我們的手機上的效果:
這裏寫圖片描述
Very Nice~~

總結

在本篇文章中僅僅只是說明了約束佈局的操作,詳細的約束佈局創建的XML內容以及原理並沒有在這一章中進行講解,會在後續章節中講解;當然說到佈局XML,在約束佈局中並不建議直接操作XML文件來完成佈局,而建議使用鼠標拖動來添加對應的約束。

通過本篇文章的學習,基本上一個簡單的不需要滾動的佈局都可以使用約束佈局來完成,也僅僅只需要一層就可以了,所有的控件無論在多一層足夠了。

這是否意味着拋棄其他控件?並不是的!約束佈局僅僅只是一種新的思路,其適用於界面不太複雜,並且不滾動的界面中佈局,如果界面元素很多甚至超過屏幕,哪麼並不建議使用約束佈局。

另外約束佈局僅僅是簡單快捷的佈局,其性能負擔隨着界面中的控件數量以及約束條件的增加而增加;所以使用時還需要多多考究。

文章的末尾處附上一份谷歌的案例效果:
這裏寫圖片描述

文章中的項目託管到Github:

https://github.com/qiujuer/BeFoot/tree/master/blog/sample/ConstraintLayout

========================================================
作者:qiujuer
博客:blog.csdn.net/qiujuer
網站:www.qiujuer.net
開源庫:github.com/qiujuer/Genius-Android
開源庫:github.com/qiujuer/Blink
轉載請註明出處:http://blog.csdn.net/qiujuer/article/details/51462471
—— 學之開源,用於開源;初學者的心態,與君共勉!

========================================================

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章