2. 程式人生 > >Android 減少佈局層次—— ConstraintLayout 約束佈局 的使用

Android 減少佈局層次—— ConstraintLayout 約束佈局 的使用

阿新 • • 發佈：2019-01-22

一. 背景

當前手機APP專案中，有些介面比較複雜，導致佈局層次很深，View的數量也相當多，對效能產生了一定影響；複雜的佈局，同時也增大了程式碼維護的難度。

ConstraintLayout 正是為了解決這個問題，它支援以下幾類強大的特性：
- 相對定位

  • Margins

  • 中心定位

  • 角度定位

  • Visibility behavior

  • 尺寸約束

  • 鏈(Chains)

  • Virtual Helpers objects

在組合使用這些特性以後，我們可以達到明顯降低佈局層次的目的。

二. 可行性

  1. ConstraintLayout 是以一個單獨的support library 的形式提供的，他支援API 9以上的版本。
  2. Android Studio 2.2以上的版本
  3. 支援將舊的佈局檔案一鍵替換為ConstraintLayout，工作量較小(不支援將已有的多個層級的佈局直接轉換為同一層級)；
    支援將舊的佈局檔案一鍵替換為ConstraintLayout

三. 引入步驟

在module的build.gradle中插入：

dependencies {
    ...
    //引入ConstraintLayout
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    ...
}

目前最新版本為1.1.0-beta3

四. 特性詳解

1. 相對定位

相對定位是ConstrainLayout中最為經常使用的一項屬性，它支援
水平方向：

  • left
app:layout_constraintLeft_toLeftOf
app:layout_constraintLeft_toRightOf
  • right
app:layout_constraintRight_toLeftOf
app:layout_constraintRight_toRightOf
  • start
app:layout_constraintStart_toEndOf
app:layout_constraintStart_toStartOf
  • end
app:layout_constraintEnd_toStartOf
app:layout_constraintEnd_toEndOf

豎直方向：

  • top
app:layout_constraintTop_toTopOf
app:layout_constraintTop_toBottomOf
  • bottom
app:layout_constraintBottom_toTopOf
app:layout_constraintBottom_toBottomOf
  • text baseline
app:layout_constraintBaseline_toBaselineOf

ConstraintLayout支援的相對定位

這些屬性都需要引用到另一個控制元件，或者parent(指代他們的父容器，也就是ConstraintLayout)

2. Margins

支援設定Margin(僅支援0或正數):

跟其它佈局所不同的是，ConstraintLayout還支援連結到Visibility為Gone時的Margin:

  • layout_goneMarginLeft

  • layout_goneMarginRight

  • layout_goneMarginStart

  • layout_goneMarginEnd

  • layout_goneMarginTop

  • layout_goneMarginBottom

五. 中心定位和偏移

1. 中心定位

我們看一下這種情況：

<android.support.constraint.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent/>
         </>

Button兩端都被連結到了父容器的兩端，如果
1. Button剛好和父容器相同寬度時，Button就相當於寬度設為了match_parent;

  1. Button小於父容器寬度時，約束就像兩個相等的力，把Button往兩邊拉，這時，Button正好位於父容器水平方向的正中;

Button正好位於父容器水平方向的正中

2. 偏移(bias)

在中心定位時，我們可以對這兩個約束力進行控制，使其偏向某一側。例如，我們使控制元件偏向左側：

<android.support.constraint.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintHorizontal_bias="0.3"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent/>
         </>

所產生的效果是：

正如你所見，這有點類似於百分比佈局或LinearLayout的weight屬性，這使得我們可以更好地適應不同的螢幕尺寸。

六. 角度定位（在支援庫版本1.1中加入）

角度定位是ConstraintLayout所特有的一種佈局方式，它可以約束一個控制元件的中心相對於另一個的角度和距離。你可以通過使用這些屬性達到目的：

  • layout_constraintCircle： 角度定位相對的另一個控制元件的id

  • layout_constraintCircleRadius： 到相對控制元件中心的距離
    這裡寫圖片描述

  • layout_constraintCircleAngle： 控制元件相對於另一個控制元件的角度

示例程式碼：

<Button android:id="@+id/buttonA" ... />
  <Button android:id="@+id/buttonB" ...
      app:layout_constraintCircle="@+id/buttonA"
      app:layout_constraintCircleRadius="100dp"
      app:layout_constraintCircleAngle="45" />

七. Visibility behavior

如果控制元件與控制元件間存在約束關係，當其中的一個控制元件Visibility變為GONE時，ConstraintLayout仍然會保留這個約束關係，但這個View的Margin都會失效；這樣可以確保不會影響到已有的佈局。

八. 尺寸約束

1. 設定佈局寬高

ConstraintLayout可以為佈局設定寬高（android:layout_width 、android:layout_height），需要特殊注意的是，當設為0dp時，它的作用相當於MATCH_CONSTRAINT，而MATCH_PARENT在ConstraintLayout中是不被推薦使用的。

2. 設定佈局最大最小尺寸

ConstraintLayout可以對佈局的高度和寬度進行限制：
- android:minWidth:最小寬度

  • android:minHeight:最小高度

  • android:maxWidth:最大寬度

  • android:maxHeight:最大高度

注意：這些屬性僅在寬高設為WRAP_CONTENT時有效！

3. WRAP_CONTENT

在ConstraintLayout中，仍然可以對WRAP_CONTENT的最大尺寸進行約束：
- app:layout_constrainedWidth=”true|false”

  • app:layout_constrainedHeight=”true|false”

當其中一個被設定為true時，控制元件的最大寬高任然可以被約束鏈約束，需要注意的是，這樣做會使佈局變慢一些。

4. MATCH_CONSTRAINT（在支援庫版本1.1中加入）

當寬高被設為MATCH_CONSTRAINT，這個控制元件將嘗試佔據佈局上所有可用的地方，但同時會被這些屬性所限制：
- layout_constraintWidth_min/layout_constraintHeight_min：最小寬高

  • layout_constraintWidth_max/layout_constraintHeight_max：最大寬高

  • layout_constraintWidth_percent/layout_constraintHeight_percent：寬高相對於父容器的百分比。

注意：
1. 這些屬性同時可以設定為wrap；

  1. 當使用百分比尺寸的時候，應當設定寬高為MATCH_CONSTRAINT；

  2. 父容器需要設定app:layout_constraintWidth_default=”percent”或app:layout_constraintHeight_default=”percent”（在1.1-beta2以後不再必須設定）

5. 設定比例
constraintLayout支援子控制元件設定其寬高比，要使該特性生效至少需要將寬高中的一個設定為0dp（MATCH_CONSTRAINT）

<Button android:layout_width="wrap_content"
                   android:layout_height="0dp"
                   app:layout_constraintDimensionRatio="1:1" />

app:layout_constraintDimensionRatio可以設定為兩種格式：
1. 一個float型別的數值，代表寬與高之間的比例；

  1. 寬:高

注意：
當寬高均被設為0dp時，父容器將嘗試在滿足所有約束條件及比例的同時，佔據最大的寬高；
如果只想對某個方向設定比例，則可以在屬性前面加上W或H，與比例以,隔開：

<Button android:layout_width="0dp"
                   android:layout_height="0dp"
                   app:layout_constraintDimensionRatio="H,16:9"
                   app:layout_constraintBottom_toBottomOf="parent"
                   app:layout_constraintTop_toTopOf="parent"/>

九. 鏈(Chains)

1. 概念

鏈使我們能夠對一組在水平或豎直方向互相關聯的控制元件的屬性進行統一管理。成為鏈的條件是：一組控制元件他們通過一個雙向的約束關係連結起來。
一條最簡單的鏈

注意：鏈的屬性是由一條鏈的頭結點控制的。而頭結點的定義是一條鏈中位於最左端的控制元件。
鏈的頭結點

2. 鏈的Margins

ConstraintLayout支援對鏈新增Margin，如果這條鏈的控制元件是分散分佈的，將會從已分配給鏈的空間中減去設定的鏈邊距。

3. 鏈的Style

鏈支援設定他們的Style,只需在頭結點指定layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle。共支援五種型別：
- CHAIN_SPREAD(預設值):鏈中的元素將分散分佈；

  • Weighted chain:在CHAIN_SPREAD模式中，如果某些元件被設定成MATCH_CONSTRAINT，他們將會佔據所有空餘空間並分散分佈；

  • CHAIN_SPREAD_INSIDE:類似於CHAIN_SPREAD，但鏈的兩端不會分散；

  • CHAIN_PACKED:鏈中的元素將會緊密相連在一起，偏移(bias)的設定將會影響他們在容器中所處的位置

  • Weighted chains:當鏈處在預設的模式(CHAIN_SPREAD)且其中一個或多個元素被設定為MATCH_CONSTRAINT時，他們將平均佔據剩下的空餘空間；如果其中的結點同時設定了
    layout_constraintHorizontal_weight或layout_constraintVertical_weight屬性，那麼他們將根據所設定的比重來分配剩下的空間。

十. Virtual Helper objects

虛擬輔助類部件它們最終不會在介面上呈現出來，但可以幫助我們更好更精細地控制佈局。目前。所支援的這類部件包括：

1. Guideline

Guideline可以放在豎直方向或水平方向，水平Guideline的高為0，寬度與父容器一致；豎直Guideline同理。
Guideline 具有三類特殊的屬性：
- layout_constraintGuide_begin:設定Guideline 距離父容器起始位置的距離(left或top);

  • layout_constraintGuide_end:設定Guideline 距離父容器尾部的距離(right或bottom);

  • layout_constraintGuide_percent:設定Guideline 相對於父容器寬度/高度的百分比位置。

例如，設定一條豎直方向的Guideline：

<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:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>

</android.support.constraint.ConstraintLayout>

這裡寫圖片描述

2. Barrier（在支援庫版本1.1中加入）

Barrier 使用多個控制元件作為參考，在這些控制元件中，選取在特定方向最邊緣的的控制元件建立一條Guideline。
constraint_referenced_ids用來設定要參考的控制元件id,多個控制元件id間以逗號的形式隔開。
例如，假設已有兩個按鈕：
這裡寫圖片描述
Barrier 設定為：

<android.support.constraint.Barrier
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="bt_1,bt_2"/>

此時Guideline 的位置為：

3. Group（在支援庫版本1.1中加入）

Group 用於控制所引用的一組控制元件的可見性(Visibility)，constraint_referenced_ids用來設定要參考的控制元件id,多個控制元件id間以逗號的形式隔開。

<android.support.constraint.Group
              android:id="@+id/group"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:visibility="visible"
              app:constraint_referenced_ids="button4,button9" />

注意：多個Group 部件可以引用相同的控制元件，這時Group 在xml中的定義順序將決定這個控制元件最終的可見性。

相關推薦

Android 減少佈局層次—— ConstraintLayout 約束佈局 的使用

一. 背景 當前手機APP專案中，有些介面比較複雜，導致佈局層次很深，View的數量也相當多，對效能產生了一定影響；複雜的佈局，同時也增大了程式碼維護的難度。 ConstraintLayout 正是為了解決這個問題，它支援以下幾類強大的特性： -

Android 開發 CoordinatorLayout 協調者佈局 與 ConstraintLayout約束佈局 兩者的關係

　　在摸索新技術是發現CoordinatorLayout 與 ConstraintLayout 會有衝突關係,所以就研究了一下他們之間的不相容,被影響的方面.其實某種程度上來說是CoordinatorLayout與其他Layout佈局之間的關係.   　　首先說明一下: 　　Coor

Android ConstraintLayout 約束佈局詳解

前言 在2016年的Google I/O大會上 , Google 釋出了Android Studio 2.2預覽版，同時也釋出了Android 新的佈局方案 ConstraintLayout ， 但是最近的一年也沒有大規模的使用。2017年Google

Android ConstraintLayout約束佈局

1.簡介： constraintLayout和RelativeLayout類似，但比RelativeLayout要強大多，它可以有效地解決佈局巢狀過多問題，我們平時編寫的介面，複雜的佈局總會伴隨著多層的巢狀，而巢狀越多，程式的效能也就越差；Constraint

ConstraintLayout約束佈局的屬性盤點

學習文章： 1.ConstraintLayout約束佈局的官方文件 2.郭霖-Android新特性介紹，ConstraintLayout完全解析 3. 鴻洋-ConstraintLayout 完全解析 快來優化你的佈局吧 4.ConstraintLayout —— 約束佈局 知識點整理 5.

ConstraintLayout約束佈局學習筆記

我對ConstraintLayout理解就是RelativeLayout相對佈局的升級版，基本上可完全取代相對佈局，而且和iOS中storyBoard中的AutoLayout有異曲同工之妙，下面總結的主要是與相對佈局的異同點，方便自己檢視。 屬性值 屬性

Android約束佈局ConstraintLayout示例

ConstraintLayout 約束佈局由 2016 年 Google I/O 推出。扁平式的佈局方式，無任何巢狀，減少佈局的層級，優化渲染效能。從支援力度而言，將成為主流佈局樣式，完全代替其他佈局。 佈局示例： <?xml version="1.0" encoding="utf-8

帶你瞭解Android約束佈局ConstraintLayout

ConstraintLayout是Android新推出的一個佈局，其效能更好，連官方的hello world都用ConstraintLayout來寫了。所以極力推薦使用ConstraintLayout來編寫佈局。 本文主要介紹一下如何使用程式碼來編寫Const

Android studio約束佈局 ConstraintLayout

ConstraintLayout(約束佈局), 是2016年Google I/O最新推出的Android佈局, 目前還在完善階段. 從推出的力度而言, 應該會成為主流佈局樣式. 在最新版本的Android Studio中, ConstraintLayout已經成為預設

Android開發筆記（一百四十九）約束佈局ConstraintLayout

約束佈局ConstraintLayout是Android Studio 2.2推出的新佈局，並從Android Studio 2.3開始成為預設佈局檔案的根佈局，由此可見Android官方對其寄予厚望，那麼約束佈局究竟具備哪些激動人心的特性呢？傳統的佈局如線性佈局Linear

Android約束佈局ConstraintLayout動態設定Id失效問題解決辦法

      當你需要在程式碼中動態給約束佈局新增約束，而不能在xml檔案中寫約束的時候，你需要用到ConstraintSet這個類，谷歌給我們寫的很清楚。https://developer.android.google.cn/reference/android/support

Android-0.Android Studio佈局中ConstraintLayout及designer簡介

Design and blueprint：用於選擇在編輯器中檢視佈局的方式。Design 檢視顯示佈局的彩色預覽，而 Blueprint 檢視僅顯示每個檢視的輪廓。或者，您可以並排檢視 Design + Blueprint 。 Screen orientation：用於在橫屏和豎屏方向之間旋轉裝置。 D

Android基礎佈局之ConstraintLayout

Android基礎之佈局ConstraintLayout Google I/O 2016 上釋出了 ConstraintLayout，據說很強大，那就一探究竟吧！ gradle配置       compile 'com.android.support.constra

利用約束佈局ConstraintLayout實現全適配九宮格

android五花八門品類眾多尺寸各異的螢幕，一直是產品經驗和開發人員的心中難以解開的疙瘩，畫素，DP，英寸各種的不方便。面對競爭激烈的APP市場，介面平庸了不出容易出彩，介面特殊了又會帶來適配方面的難題。如何解決開發人員心中的痛，也是谷歌安卓團隊繞不開的坑。借鑑網頁開發的優點，早期已經有很多高手把

android約束佈局

約束佈局是谷歌在 使用： 為什麼要使用約束佈局： ConstraintLayout還有一個優點，它可以有效地解決佈局巢狀過多的問題。 實現的佈局效果類似於相對佈局但比相對佈局效能更高。 盜個別

[Android 知識點] Constraints Layout 約束佈局

依賴 compile ‘com.android.support.constraint:constraint-layout:1.0.0-alpha5 概述 該佈局機制為每一個Widget指定了約束條件，目的是指定他們在佈局裡的位

約束佈局ConstraintLayout加快佈局速度

Android Studio2.2更新佈局設計器，同時，引人了約束佈局ConstraintLayout。 簡單來說，可以把它看做是相對佈局的升級版本，但是區別與相對佈局更加強調約束。何為約束，即控制元件之間的關係。 它能讓你的佈局更加扁平化，一般來說一個介面

Android Studio檢視一個頁面的佈局層次結構

AS提供了一個工具，可以檢視手機裡任意一個頁面的佈局層次結構。很好用，這樣就可以看大牛app是怎樣寫佈局了。 Tool--Android--Android Device Monitor開啟DDMS視窗

Android ConstraintLayout百分比佈局-適配終結者（基本適配所有機型）

對於Android開發者來講，適配始終是個大問題，在小米手機上面是一個樣，在oppo上面是一個樣，真是讓人惱火。 現在講一下筆者最近遇到的問題，公司專案需求，一顆樹，樹有很有枝椏，枝椏上面要掛紅包，這需求是真坑爹，精度要求特別高，這肯定不能使用DP適配了，最開始想自己根據螢

Android Studio——頁面佈局（ConstraintLayout）

前言在2016年的Google I/O大會上 , Google 釋出了Android Studio 2.2預覽版，同時也釋出了Android 新的佈局方案 ConstraintLayout ， 但是最近的一年也沒有大規模的使用。2017年Google釋出了 Android S