天天看點

2016年Google IO最新布局ConstraintLayout

Android Studio 2.2預覽版包含了一個新的布局編輯器即ConstraintLyout,你可以不在XML布局檔案中建構ConstraintLayout,ConstraintLayout相比之前建構UI的方式要容易地多。

當你拖拽一個視圖元件到ConstraintLayout,你可以添加限制,通過拖拽錨線來定義到其他視圖元件的相對距離,同時布局編輯器還為所有的視圖元件內建了推理限制。

ConstraintLayout必須在Android2.3及以上版本中引入Support包才可以使用,同時對Android Studio的版本要求必須是2.2預覽版。

備注:由于ConstraintLayout還沒有完全釋出,是以目前還沒有API參考文檔,當完成更穩定的API版本後,将會釋出API文檔,不過關于ConstraintLayout的所有操作都可以在Android Studio2.2預覽版布局編輯器上完成。
2016年Google IO最新布局ConstraintLayout

限制綜述

一個限制就是一個視圖的在螢幕上相對其他視圖元件位置的一種描述,你可以通過下面的方式定義一個單邊或多邊的限制:

  • 相對其他視圖的錨點
  • 布局的邊界
  • 不可見的輔助線

因為一個布局檔案是由各個視圖元件聯合組成的,是以可以通過平坦的層級關系創造複雜的布局效果。雖然在概念上ConstraintLayout很像相對布局,但是ConstraintLayout更加靈活,并且完全适用于新的布局編輯器。

你可以定義如下不同的限制類型:

  • 和布局的邊界聯系: 建立視圖元件與布局的邊界聯系。例如,建立一個視圖的頂部與ConstraintLayout頂部的聯系。
  • 和其他視圖元件的邊界聯系: 建立和其他視圖元件相反的邊界聯系。例如,視圖A的頂部與視圖B的底部建立聯系,那麼視圖A就會出現在視圖B的下方。
  • 和其他視圖邊界對齊: 将邊界與其他視圖元件的相同邊界對齊。例如,将視圖A的左邊界與視圖B的左邊界對齊,那麼兩者将會在垂直對齊并且左邊界對齊
  • 和其他視圖的基準線對齊: 将文字視圖元件的基準線與其他文字視圖元件的基準線對齊。相比邊界對齊,該限制對于文字視圖元件的對齊顯得更重要。

當你在布局編輯器上對一個視圖元件添加一個限制,可以通過拖動改變其位置,同時也可以添加其他的限制以保證在不同尺寸的手機上有相同的布局效果。還可以在布局編輯器上為所有的視圖元件添加預設間距。

為你的工程添加ConstraintLayout

當你在Android Studio2.2上建立一個工程的時候,新的工程模闆已經為大部分的布局文佳添加了ConstraintLayout,如果你要更新已存在的工程,可按如下方式操作:

  1. 保證你已經引入了最新Android Support包(版本号為32或者更高)

    a. 點選Tools>Android>SDK Manager

    b. 點選SDK Tools标簽

    c. 選擇Android Support,然後點選确定。

  2. 在build.gradle檔案中添加ConstraintLayout包依賴
dependencies {
  compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha1'
}
           
  1. 在标題欄或者同步通知中,點選同步更新工程的Gradle檔案
為你的工程添加一個新的ConstraintLayout:
  1. 在你的工程布局目錄處單擊滑鼠右鍵,然後選擇并點選 New>XML>Layout XML
  2. 為布局檔案命名,并且為布局檔案添加”android.support.constraint.ConstraintLayout”根标簽
  3. 點選完成
切換已有的布局至限制布局:
  1. 在Android Studio中打開已有的布局檔案,在布局編輯器視窗選擇底部的Design标簽
  2. 在元件樹視窗,右鍵點選Convert to ConstraintLayout
2016年Google IO最新布局ConstraintLayout

在布局編輯器中添加限制

在布局編輯器中一種叫自動連接配接的特性會始終有效,這個特性可以自動的為你拖進布局中的視圖元件創造一個或多個限制。

2016年Google IO最新布局ConstraintLayout

自動連接配接有可能不是你想要的效果,是以你可以很容易的删除這些限制。雖然你可以通過點選

Turn off Autoconnect
2016年Google IO最新布局ConstraintLayout

關閉自動連接配接功能,但是這樣會導緻你添加的視圖元件預設沒有布局資訊。雖然布局編輯器會顯示你拖拽的視圖的絕對坐标,但是實際的布局管理器不會應用這些坐标,如果你沒有添加為視圖元件添加限制,它将會顯示在螢幕的左上方。

在布局的任何時刻,你都可以通過點選

Infer constraints
2016年Google IO最新布局ConstraintLayout

來讓布局編輯器自動的生存限制。你應該盡量使用該操作以保證視圖沒有遺漏限制,否則視圖将會出現在螢幕的左上方。

為了生成視圖元件和父ConstraintLayout之間的限制,點選并拖動視圖上的圓形搖桿至布局的邊緣,當錨點變為綠色時,松開滑鼠就會生成一個限制。

2016年Google IO最新布局ConstraintLayout

為了在兩個視圖之間生成限制,點選并拖動搖桿至另一個視圖的限制搖桿處。為了在兩個視圖之間生成文字基準線,将滑鼠放置文字下方的錨點,等待其變長,然後點選并拖動至另一個視圖使其連接配接為基準線。

2016年Google IO最新布局ConstraintLayout
2016年Google IO最新布局ConstraintLayout

你也可以添加一個垂直或者水準的輔助線,該輔助線類似于布局邊緣,對使用者不可見,但是卻有助于限制的連接配接。為了生成輔助線,在布局的任何地方右鍵并點選

Add Vertical Guideline

或者

Add Horizontal Guideline

。此時就生成你想要的限制和輔助線。

如果你要為視圖添加相反的限制,那麼連接配接線就會變成波浪線,表示兩個相反的力。例如,如果你為視圖添加一個到布局左右邊界的限制,那麼視圖就會預設水準居中顯示。

2016年Google IO最新布局ConstraintLayout

如果你想編輯視圖的限制和邊距,選擇該視圖并在布局編輯器的右側點選

Properties

。屬性視窗就包含了頂部的限制和該視圖的其他屬性,例如一個按鈕的文案和背景。

2016年Google IO最新布局ConstraintLayout

當你生成了相反邊界的連接配接時,你可以調整在任意方向上相對位置。點選連接配接線的任意一端即可删除限制。