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

時間 2019-11-20

標籤谷歌約束控件 constraintlayout 扁平佈局入門欄目 Chrome 简体版

原文原文鏈接

序

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

簡單來講，她是相對佈局的升級版本，可是區別與相對佈局更增強調約束。何爲約束，即控件之間的關係。
她能讓你的佈局更加扁平化，通常來講一個界面一層就夠了；同時藉助於AS咱們能極其簡單的完成界面佈局。android

準備

1.準備好Android Studio 2.2預覽版，在這裏給你們準備好了下載連接：git

爲何須要預覽版，其實就庫來講並不須要AS最新版本，可是這樣咱們只能使用代碼來進行佈局，而ConstraintLayout讓佈局迴歸原始，拖動便可。比起常規控件拖動基本是分分鐘高潮的節奏。github

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

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

注意：正式版本還未發佈。android-studio

初嘗禁果

首先咱們創建 activity_start.xml 佈局，並添加以下代碼：app

<?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" />

若是要垂直居中，哪麼咱們繼續添加代碼：ide

<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～～