使用約束控件創建界面

AlmMartinel 8年前發布 | 7K 次閱讀 安卓開發 Android開發 移動開發

如果你是剛剛接觸約束控件——支持庫中與 Android Studio 2.2 可視化 UI 編輯器緊密結合的新布局——我建議首先觀看上面的介紹視頻或者瀏覽我們的 代碼庫 。

視頻和代碼庫簡明扼要地介紹了布局編輯器中的一些處理方式、約束和 UI 控制的基本概念,了解這些有助于你快速在可見的方式下搭建界面。

本文中,我將著重講解最近在 Android Studio 2.3 (Beta) 中約束控件的新增內容:鏈條和比率,同時也會寫一些普通約束控件中的一些建議和技巧。

鏈條

創建鏈條是一項新的特性,讓你能夠沿著一個坐標軸(水平或垂直)布置組件,從概念上來看有點類似線性布局。在約束控件中的實現中,鏈條是一系列通過雙向連接聯系起來的組件。

要想在視圖編輯器中創建鏈條,你只需選擇目標組件并右擊,點擊“Center views horizontally“(或“Center views vertically”)。

這就在組件之間建立了必不可少的關聯。此外,當你選擇鏈條中任何一個元素時,都會出現一個新的按鈕,你可以在三種鏈條模式之間切換:分布式(Spread)、內分布式(Spread Inside)和密集式(Packed)鏈條。

有兩個額外的技巧可以用來更方便地操作鏈條:

如果你創建了一個分布式或者內分布式鏈條,并且所有的組件尺寸都被設置成 MATCH_CONSTRAINT(或者“0dp”),其余的鏈條空間將會根據在 layout_constraintHorizontal_weight 或則 layout_constraintVertical_weight 中定義的值平均分布。

如果你創建了一個密集式鏈條,你可以通過調整水平(或者垂直)焦點來使鏈條元素左右(或者上下)移動。

比率

比率大致上能夠實現和 百分比布局 相同的效果,IE 中可以通過設定比率來限制 View 的寬高,而不用在 ViewGroup 的層次上增加額外開銷。

在約束控件中為組件設置比率:

  1. 確保至少一個約束尺寸可變,也就是說,不允許設置為“Fixed”和“Warp Content”。
  2. 點擊左上角的“Toggle aspect ratio constraint”。
  3. 按照寬度:高度的格式輸入你想要的比率,比如:16:9 。

輔助線

輔助線是用來幫助你布置其他組件的可視的組件。它們在運行時并不會可見,但同樣可以用來添加約束,可以從下拉項中創建垂直或者水平的輔助線。

點擊選擇新添加的輔助線,拖動到合適的位置。

點擊組件的頂部(或左部)標志可以切換輔助線對其模式:固定距離的左/右(或者上/下)對齊模式和相對父元素的百分比寬/高對齊模式。

處理 View.GONE

與相對布局相比,在約束控件布局中你將能更好地控制組件的 View.GONE 可見性。最重要的一點,任何設置為 GONE 的組件,其尺寸和外邊距約束將縮小為零,但仍然參與約束的計算。

許多情況下,如圖所示的一系列通過約束聯系起來的組件只會在一個組件被設置為 GONE 時生效。

還有一個方法可以為約束綁定在 GONE 移除時的組件設置特定的外邊距,使用 layout_goneMargin Start (… Top , … End , 和 … Bottom ) 屬性來實現。

這樣可以處理更復雜的情況,正如上如所示,我們可以設置特定的組件消失而不用改變代碼。

不同類型的居中對齊

在約束控件布局的鏈條屬性中,我已經提到過一種居中方式了。當你選擇一組組件時,點擊“Center horizontally”(或者“center vertically”)來創建一個鏈條。

你也可以使用相同的選項,使一個組件居中對齊在其相鄰的組件中間:

如果要忽略其他組件,在父元素內居中對齊,使用“Center horizontally/vertically in parent”選項。需要注意的一點是,通常你會對一個單獨的元素使用這個選項,并且這不會創建鏈條。

有時,你需要兩個不同尺寸的組件中心對齊,不妨這樣:當不同約束把一個組件拉向兩個不同的方向時,它會穩定在兩個約束的中間位置(每個方向 50% 偏心距)。

我們可以使用相同的方法,通過設置兩個相同方式的關聯,使一個組件相對于另一個組件的一邊居中對齊。

使用 Space 實現負外邊距

約束控件布局中不支持負的外邊距,然而,有個小技巧可以使你獲得相同的效果,通過插入 Space(實質上是一個空組件)并且設置尺寸為理想外邊距的大小。如下所示:

什么時候使用自動生成

當你在工具欄中選擇“自動生成布局(Infer constraints)”命令時,編輯器會找出約束控件布局中缺少的組件約束,并且會自動添加。它也可以從一個沒有任何約束的視圖開始設置,但由于很難創建一個完全正確的視圖,你可能會得到很混亂的結果。這也是我建議通過這兩種方式來使用約束界面:

首先是盡可能多地手動創建約束,這樣你的布局能夠最大化地得到實現并且具有功能可靠。然后,點擊自動生成來為一些沒有約束的組件創建約束,這樣能節省你一點工作量。

另一個方法就是,將組件置于編輯器中不創建任何約束,使用自動生成命令,然后修改預覽設備的分辨率。查看有哪些尺寸和位置錯誤的組件并修正這些約束,然后換一個分辨率重復操作。

這歸根到底取決于你的喜好,每個人為布局創建約束的方式各有千秋,當然也包括有些人喜歡純手工地實現巧奪天工的布局。

不支持適應父元素

使用 match_constraint(0 dp)來替代,并且可以根據意愿給父元素設置約束,配合正確的外邊距處理方式可以實現相同的效果,不應在約束布局中使用“Match parent”。

 

來自:http://www.jianshu.com/p/8968e3bef089

 

 本文由用戶 AlmMartinel 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!