本文涉及到一些詞彙對照表:
EN CN
Constraint 限制
Constraint Handle 限制搖桿
AutoConnect 自動連接配接
Inference 推理
UI Builder UI 生成器
EN
CN
Constraint
限制
Constraint Handle
限制搖桿
AutoConnect
自動連接配接
Inference
推理
UI BuilderUI
生成器
其中 Handle 不知如何翻譯更佳, 目前想到可供選擇的有 ‘搖桿’ ‘紐’ ‘軸’ ‘操作點’ ‘操作柄’, 此文先選取最簡單的翻譯’搖桿’, 如果有更好的翻譯還請賜教.
在此 codelab 中, 你将會學習 ConstrainLayout – 一個建構在靈活的限制系統上的新型 Layout, 由 Android Support 庫提供. 在此 Codelab 的最後, 你将能夠使用 Android Studio 中的布局編輯器建立一個相當複雜的布局(使用 ConstrainLayout).
constraint-layout 庫和 UI 生成器當期處于 preview 狀态.
新布局管理器使用的限制系統
建立限制以建構靈活且高效的布局
新布局編輯器中的各種特性
樣例代碼
要下載下傳樣例代碼, 你可以選擇:
或者用指令行克隆 Github 倉庫
contraint-layout 倉庫包括一個工程: * constraint-layout-start — 包含此 Codelab 中你将會建構的 layout 的工程.
運作樣例代碼
首先, 我們來看看這個已經完成的應用的樣子. 下載下傳代碼後, 這個指導書講解了如何用 Android Studio 打開完整的樣例應用. 請注意此樣例需要 Android Studio 2.2 preview.
打開 File > New > Import Project 并從之前下載下傳樣例代碼目錄選擇constraint-layout-start 目錄
點選Gradle sync 按鈕.
從工程面闆打開 res/layout/activity_main_done.xml.
選擇 Design 标簽檢視最終布局.
改變 UI 生成器做上的 “Virtual Device to render the layout with”(渲染所用的虛拟裝置)檢視在不同情況中的布局.
或者:
1
接入你的 Android 裝置并點選運作
按鈕. 你應當會看到 constraint-layout 螢幕出現在模拟器或者已連接配接的裝置上.
Gradle sync error: Ensure that you update the SDK Manager to use build tools version >= 23.0.2. The error message typically has a link that helps in downloading the build tools version.
布局引擎使用每一個控件指定的限制确定他們在布局中的位置. 你可以手動指定限制, 也可以使用 Android Studio 布局編輯器推理自動指定. 為了更好的了解限制, 讓我來看看選中空間上可用的基礎搖桿.
限制幫助你保持控件對齊. 你可以使用錨點(比如下圖展示的限制搖桿)來确定各控件之間的對齊規則. 例如, 設定一個從 button 2 的左搖桿到 button 1 的右搖桿的限制(見下圖A)意味着控件 button 2 将會位于 button 1 右邊 56dp 處.
Figure A.
搖桿的類型:
Figure B. 在這個控件中我們可以看到不同的搖桿
改變尺寸的搖桿： 類似于其它你可能已經用過的繪圖設計程式, 調整尺寸的搖桿允許你改變控件的尺寸.
側邊限制搖桿： 側邊限制 handle 呈現為每一個控件側邊的圓圈, 可以讓你指定控件的位置. 例如, 你可以使用某個控件的左側邊限制 handle 設定控件總是位于另一個控件右邊 24dp 處. 這種搖桿在此 codelab 中也被稱作錨點.
基準線限制搖桿：
基準線限制 handle 幫助你對齊兩個控件的文本區域, 與控件尺寸無關. 在你想使用兩個不同大小的控件同時又想保持其中文字對齊的時候很有幫助.
限制系統的規則
除了以下情況外, 布局中控件的錨點可以連接配接到其它控件的任意錨點. * 不同軸上的錨點, 例如左邊和上邊的錨點不能相連.
* 基線限制 handle 隻能與其它極限建立限制
禁止會産生循環的錨點連接配接
現在你已經準備好在入門項目上建構你的 constraint layout 了.
從左導航欄打開 res/layout/activity_main_start.xml.
constraint-layout 被建構為一個獨立的 support 庫, 支援所有 Android 2.3(Gingrebread) 以上的 Android 版本. 本入門項目已經在 app/build.gradle 中包含了它的依賴. 對于你打算用 ConstraintLayout 建構的應用, 加入如下編譯依賴:
2
3
4
包含在此 codelab 項目中此 xml 布局已經有了一個空的 ConstraintLayout 元素. ConstraintLayout一開始就被建構為在 UI 生成器中單獨使用.
5
6
7
8
切換到顯示為編輯器視窗底部一個标簽頁的 Design 視圖.
第一個任務是添加一個 ImageView 到布局中. 在設計視窗, 找到控件選擇闆上的 ImageView 拖入布局.
ImageView 被拖入布局後, UI 生成器就會立即詢問其所使用的資源(顯示在 ImageView 中的圖). constraint-layout-start 項目已經包含了一些讓讓此 codelab 更加順利的資源. 直接去選擇 @drawable/singapore 資源就好.
選擇好後, ImageViewe 出現在布局上, 你可以如”限制系統概述”中提到的一樣點選拖動角以調整圖檔大小.
現在讓我們從控件闆上拖一個 TextView 到布局上.
我們在 UI 生成器中看到一些警告, 這些是由 ImageView 缺失 contentDescription 參數和 TextView 中寫死的文本導緻的. 内容描述參數(contentDescription)對建構無障礙應用很關鍵. 在本 codelab 中, 我們使用一個預先可用的資源 @string/dummy 作為這些屬性值.
在右邊, 一個檢查面闆讓你可以改變選中控件的各個參數.
選中 ImageView 然後添加 @string/dummy 到它的contentDescription 屬性中.
在Inspector 面闆中, 還可以看見 ImageView 的其它屬性. 把 scaleType 屬性改為 centerCrop以符合此 codelab 的目标.
接下來, 我們選擇 TextView 并使用 Inspector 面闆修改 text 屬性值為
@string/singapore.
此刻, 在布局中有兩個 View. 在下一節, 我們會學習如何建立 View 之間的限制.
要建立一個限制, 你需要在指定搖桿上點選并按住滑鼠, 然後拖到另一個控件的限制搖桿. 一旦錨點變綠, 就可以松開滑鼠完成限制建立.
重要: UI 生成器預設自動連接配接(AutoConnect)模式開啟. 因為本節我們在學習手動建立限制, 點選
以關閉自動連接配接, 或者確定它之前已經被關閉.
在我們開始之前, 確定布局中已經有一個 ImageView 和一個 TextView. 這裡我們的目标是建立已經在布局上的 ImageView, 容器以及 TextView 之間的限制.
假定我們需要最終布局中 TextView 在 ImageView 下面. 為了實作, 我們可以如下所示建立一個 TextView 上錨點和 ImageView 底錨點之間的限制.
删除限制
使用這個
顯示在布局中的删除限制按鈕以删除選中控件上的 所有 限制.
要删除單個限制, 點選設定了該限制的錨點
如果你打算删除布局中的所有限制, 使用菜單圖示.
下一步是建立 ImageView 頂錨點于 Layout 頂部的限制.
最終我們還可以使用左和右側邊限制錨定 ImageView 在布局中間.
本節示範了如何用拖拽連接配接線的方式建立控件間限制的基礎. 此時你可以通過添加其他元素的方式探索一下各種 View 和 UI 生成器. 在下一節中我們将學習Inspector.
建立基線限制
要連接配接控件的基線, 滑鼠懸浮在空間上, 等幾秒鐘, 基線限制出現然後就可以連接配接了.
本節我們看一下 View Inspector. Inspector 在 UI 生成器上的右邊. 除了列出所選控件的屬性, 它還展示了 View 是如何對齊的以及所有的限制.
繼續, 從布局中删除 TextView
建立 ImageView 底錨點和容器底部的限制
UI 生成器應該看起來是這樣
Inspector 顯示出控件控件在一個方形區域的中間. 下面的小節說明了它各個元素已經他們的使用.
Margins: 控件外部的左右上下就是 margin. 你可以點選 margin 的值并設定成另一個值來改變它. 在上面的截圖中, margins 的值被設為 16dp.
删除限制: 在 Inspector 中點選連結控件和容器的線同樣可以删除限制. 注意, 删除限制删除限制還可以通過點選已有的限制搖桿實作.
相對限制定位控件: 當一個控件上有至少兩個對立的連接配接時, 比如上和下, 或者左和右, 你可以看到一個可以讓你沿着對立連接配接的軸調整控件位置的滑塊. 這也被稱為橫向或縱向偏量. 調整縱向和橫向偏量然後改變方向, 可以看到偏量依然保留. 另外也可以通過移動控件到目标目标位置實作這一點.
繼續, 改變垂直偏量至75％, 而橫向偏量到75％. 下面的圖可用作參考.
控制控件的内部尺寸: 控件内部的線允許你控制它的尺寸, 你可以點選特定的線看看它的具體運作方式.
這是 Inspector 中一個控件的放大視圖. 點選 Inspector 面闆控件内部的線, 會循環切換以下選項
Fixed: 此選項允許你指定控件的高和寬.
AnySize: 此選項讓控件占用所有可用空間以适應限制. 換句話說, 這更像是比對限制. 與 match_parent 不同, 後者占用父 View 的所有可用空間.
Wrap Content: 此選項僅擴充至所含元素(如 text 或者 drawable)填充滿 widget.
AnySize 與容器無關. 如果 ImageView 限制于一個 Button, 設定為 AnySize 隻會擴充它适應 button.
Figure A: 顯示 ImageView 在設定 width 為 ‘AnySize’ 前
Figure B:顯示 ImageView 在設定 width 為 ‘AnySize’ 後
要檢視并編輯一個指定控件所有其他參數, 點選 Properties 面闆右上的
在本節中, 我們探索了 Inspector. Inspector 的目的是讓你在不離開 UI 生成器的情況下編輯所有參數和限制.
Autoconnect, 顧名思義, 自動建立控件之間的連接配接. 了解 Autoconnect 嘗試建立控件與鄰近控件之間的連接配接的功能非常重要.
在我們開始本節前, 請確定:
從 Project 面闆打開res/layout/activity_main_autoconnect.xml. 選擇 “Design” 标簽
Autoconnect 已經啟用
下面我們選擇 ImageView 然後拖動它到布局中間直到提示線出現, 幾秒鐘内, 它就被居中了, Autoconnect 介入并建立了與容器上下左右的限制, 如下面的動畫所示.
現在布局裡隻有單一個 ImageView, 我們來看一下 Autoconnect 是如何建立限制的
這裡是本節下一部分的步驟, 作為指導, 上面的動畫顯示下方使用的步驟：
把 ImageView 對齊到頂部并使用 Inspector(AnySize) 確定它擴充填充父 View 的寬度.
在布局右下角放置兩個按鈕. 使用 Inspector 面闆把最右邊按鈕 text 屬性改成@string/upload, 左邊的改成 @string/discard.
從控件闆上拖一個 TextView 和一個 Plain Text 到布局上.
調整 TextView 和 Plain Text 相距 48dp. 幾秒内, Autoconnect 就會建立兩個控件的限制.
同樣選擇上傳按鈕并放置它接近右 margin 然後讓 Autoconnect 完成剩餘的事情
最後把舍棄按鈕放置在距離上傳按鈕 32dp 的地方.
作為一個練習, 移動 TextView 到 ImageView 下方 48dp 的位置. 要做到這個, 選擇 TextView 并移動它直到它位于 ImageView 下方 48dp 處.
明白 Autoconnect 僅為目前正在移動的控件建立限制是很重要.
Autoconnect 通過自動連接配接相近的控件協助你, 這在很多情況下非常有用. 有些情況 Autoconnect 不能完成預期行為, 此時開發者應當使用人工限制或者推理來建構 ConstraintLayout. 推理将在此 codelab 的下一節讨論.
推理引擎輔助開發者在布局添加的元素之間建立限制. 由推理建立的限制依賴于添加到布局的元素的類型和他們的尺寸.
推理(Inference)和自動連接配接(Autoconnect)有什麼差別
推理引擎建立布局上的所有元素之間的限制, 而自動連接配接建立鄰居元素之間的限制
自動連接配接的目标是建立用來布局正在被操縱的控件的限制. 其它空間不會限制于你正在移動的控件, 但是你正在移動的控件會限制與其它控件. 這是一個重要的差別, 因為它意味着自動連接配接不會修改你目前的限制.
Setup
對于這一步, 我們從 layout/activity_main_inference.xml 布局開始. 在 Design 視圖中打開布局檔案. 預設情況下, 此檔案中的布局定義如下：
顯示 @drawable/singapore 和 @drawable/ic_star 的 ImageViews. ic_star
圖檔已經被限制垂直偏量 81%. 你可以通過選中控件檢視 Inspector 面闆的方式檢視包含ic_star 的 ImageView 的垂直偏量, 如之前讨論的一樣.
大 ImageView (@drawable/singapore) 的底部錨點限制于 ic_star
ImageView 的底部. ImageView 之外還有為ImageView 顯示相機, 設定和字幕的TextViews.
使用菜單的操作橫向和縱向展開 view.
使用推理按鈕通過推理協助建立限制.
由于我們将使用其中一些選項，這是一個好時機看看在UI生成器可用的操作。
删除所有限制, 當年想以另一種方式撤銷布局中所有限制時會很有用.
使用推理建立限制. 推理引擎會基于諸如空間位置和大小之類的各種因素嘗試查找并建立最佳連接配接.
橫向擴充空間以适應限制
縱向擴充空間以适應限制
重要: UI 生成啟動預設啟用”自動連接配接”. 由于本節我們打算用推理建立限制, 點選
關閉自動連接配接.
我們的目标是是為圖檔的描述添加一個 TextView. 我們已經有一個多行的字元串資源 @string/singapore_description.
首先, 從控件選擇闆拖拽一個 TextView 并放置在設定文本下面.
使用
操作水準擴充 View 以适應引導線.
操作縱向擴充以填充縱向可用空間.
使用推理操作
現在TextView 在布局中了, 你已經準備好看推理的實際運作了.
點選 infer constraints
用推理建立限制.
限制引擎在布局上所有 View 之中建立限制. 最終的布局應該看來是這樣.
一旦限制被建立, 你可以修改點選 UI 生成器左上的
按鈕修改 “virtual device to render with”. 選擇一個不同的裝置, 如 Nexus 6P 或者 Nexus 9 以檢查布局渲染正确.
你現在已經看到使用限制系統的整個系列: 建立手工限制, 使用自動連接配接限制, 還有使用推理引擎限制.
自動連接配接和推理通過布局引擎斷定如何為布局中各個元素建立限制協助你. 然後你可以進一步按照你認為合适的方式自由地修改這些限制, 無論它們是由自動連接配接還是推理引擎生成的.
本文轉自 一點點征服 部落格園部落格，原文連結：http://www.cnblogs.com/ldq2016/p/6674086.html，如需轉載請自行聯系原作者