了解Android Studio 2.2以上版本的 ConstraintLayout


Google I/O 2016 上發布了 ConstraintLayout, 簡直是要變革 Android 寫界面方式. 

Android studio 2.2版本以上新增了一個布局--ConstraintLayout

概述

這里寫圖片描述

在此 codelab 中, 你將會學習 ConstrainLayout – 一個構建在靈活的約束系統上的新型 Layout, 由 Android Support 庫提供. 在此 Codelab 的最后, 你將能夠使用 Android Studio 中的布局編輯器建立一個相當復雜的布局(使用 ConstrainLayout).

constraint-layout 庫和 UI 生成器當期處於 preview 狀態.

約束系統概覽

布局引擎使用每一個控件指定的約束確定他們在布局中的位置. 你可以手動指定約束, 也可以使用 Android Studio 布局編輯器推理自動指定. 為了更好的理解約束, 讓我來看看選中空間上可用的基礎手柄.

約束

約束幫助你保持控件對齊. 你可以使用錨點(比如下圖展示的約束手柄)來確定各控件之間的對齊規則. 例如, 設置一個從 button 2 的左手柄到 button 1 的右手柄的約束(見下圖A)意味着控件 button 2 將會位於 button 1 右邊 56dp 處.
這里寫圖片描述

Figure A.

手柄的類型:
這里寫圖片描述

Figure B. 在這個控件中我們可以看到不同的手柄

改變尺寸的手柄: 類似於其它你可能已經用過的繪圖設計程序, 調整尺寸的手柄允許你改變控件的尺寸.

這里寫圖片描述

側邊約束手柄: 側邊約束 handle 呈現為每一個控件側邊的圓圈, 可以讓你指定控件的位置. 例如, 你可以使用某個控件的左側邊約束 handle 設置控件總是位於另一個控件右邊 24dp 處. 這種手柄在此 codelab 中也被稱作錨點.

這里寫圖片描述

基准線約束手柄

基准線約束 handle 幫助你對齊兩個控件的文本區域, 與控件尺寸無關. 在你想使用兩個不同大小的控件同時又想保持其中文字對齊的時候很有幫助.

這里寫圖片描述

約束系統的規則
除了以下情況外, 布局中控件的錨點可以連接到其它控件的任意錨點. * 不同軸上的錨點, 例如左邊和上邊的錨點不能相連.
* 基線約束 handle 只能與其它極限建立約束


使用步驟:

1、引入 constraint-layout 的依賴

dependencies {
...

compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'

}

2、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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.administrator.constraintlayoutdemo.MainActivity">


<ImageView
android:layout_width="252dp"
android:layout_height="285dp"
android:src="@mipmap/ic_launcher"
android:scaleType="fitCenter"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="0dp" />

<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteY="396dp"
tools:layout_editor_absoluteX="98dp"
android:id="@+id/textView2" />
</android.support.constraint.ConstraintLayout>


--------注意:需要下載一些東西----------



這里寫圖片描述

我們在 UI 生成器中看到一些警告, 這些是由 ImageView 缺失 contentDescription 參數和 TextView 中硬編碼的文本導致的. 內容描述參數(contentDescription)對構建無障礙應用很關鍵. 在本 codelab 中, 我們使用一個預先可用的資源 @string/dummy 作為這些屬性值.

在右邊, 一個檢查面板讓你可以改變選中控件的各個參數.

這里寫圖片描述

  1. 選中 ImageView 然后添加 @string/dummy 到它的contentDescription 屬性中.
  2. 在Inspector 面板中, 還可以看見 ImageView 的其它屬性. 把 scaleType 屬性改為 centerCrop以符合此 codelab 的目標.
  3. 接下來, 我們選擇 TextView 並使用 Inspector 面板修改 text 屬性值為
    @string/singapore.

此刻, 在布局中有兩個 View. 在下一節, 我們會學習如何創建 View 之間的約束.

創建手工約束

要創建一個約束, 你需要在指定手柄上點擊並按住鼠標, 然后拖到另一個控件的約束手柄. 一旦錨點變綠, 就可以松開鼠標完成約束創建.

這里寫圖片描述

重要: UI 生成器默認自動連接(AutoConnect)模式開啟. 因為本節我們在學習手動創建約束, 點擊這里寫圖片描述以關閉自動連接, 或者確保它之前已經被關閉.

在我們開始之前, 確保布局中已經有一個 ImageView 和一個 TextView. 這里我們的目標是創建已經在布局上的 ImageView, 容器以及 TextView 之間的約束.

假定我們需要最終布局中 TextView 在 ImageView 下面. 為了實現, 我們可以如下所示創建一個 TextView 上錨點和 ImageView 底錨點之間的約束.

這里寫圖片描述

刪除約束

使用這個這里寫圖片描述顯示在布局中的刪除約束按鈕以刪除選中控件上的 所有 約束.

要刪除單個約束, 點擊設定了該約束的錨點

如果你打算刪除布局中的所有約束, 使用菜單圖標.

下一步是創建 ImageView 頂錨點於 Layout 頂部的約束.

這里寫圖片描述

最終我們還可以使用左和右側邊約束錨定 ImageView 在布局中間.

這里寫圖片描述

本節演示了如何用拖拽連接線的方式創建控件間約束的基礎. 此時你可以通過添加其他元素的方式探索一下各種 View 和 UI 生成器. 在下一節中我們將學習Inspector.

創建基線約束

要連接控件的基線, 鼠標懸浮在空間上, 等幾秒鍾, 基線約束出現然后就可以連接了.

這里寫圖片描述

熟悉 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生成器可用的操作。
這里寫圖片描述
刪除所有約束, 當年想以另一種方式撤銷布局中所有約束時會很有用.
這里寫圖片描述
使用推理創建約束. 推理引擎會基於諸如空間位置和大小之類的各種因素嘗試查找並創建最佳連接.
這里寫圖片描述
橫向擴展空間以適應約束
這里寫圖片描述
縱向擴展空間以適應約束

重要: UI 生成啟動默認啟用”自動連接”. 由於本節我們打算用推理創建約束, 點擊這里寫圖片描述 關閉自動連接.

添加一個占用可用空間的 TextView

我們的目標是是為圖片的描述添加一個 TextView. 我們已經有一個多行的字符串資源 @string/singapore_description.

首先, 從控件選擇板拖拽一個 TextView 並放置在設置文本下面.
使用 這里寫圖片描述操作水平擴展 View 以適應引導線.
使用 這里寫圖片描述操作縱向擴展以填充縱向可用空間.
這里寫圖片描述

使用推理操作
現在TextView 在布局中了, 你已經准備好看推理的實際運作了.

點擊 infer constraints這里寫圖片描述用推理創建約束.

約束引擎在布局上所有 View 之中創建約束. 最終的布局應該看來是這樣.

這里寫圖片描述

一旦約束被創建, 你可以修改點擊 UI 生成器左上的 這里寫圖片描述按鈕修改 “virtual device to render with”. 選擇一個不同的設備, 如 Nexus 6P 或者 Nexus 9 以檢查布局渲染正確.

你現在已經看到使用約束系統的整個系列: 創建手工約束, 使用自動連接約束, 還有使用推理引擎約束.

自動連接和推理通過布局引擎斷定如何為布局中各個元素創建約束協助你. 然后你可以進一步按照你認為合適的方式自由地修改這些約束, 無論它們是由自動連接還是推理引擎生成的.


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com