2. 程式人生 > >帶你瞭解Android約束佈局ConstraintLayout

帶你瞭解Android約束佈局ConstraintLayout

阿新 • • 發佈：2018-12-10
ConstraintLayout是Android新推出的一個佈局，其效能更好，連官方的hello world都用ConstraintLayout來寫了。所以極力推薦使用ConstraintLayout來編寫佈局。

本文主要介紹一下如何使用程式碼來編寫ConstraintLayout佈局。

如果對ConstraintLayout的效能比較感興趣，可以看這篇文章：解析ConstraintLayout的效能優勢

好了，開始我們的征程。

1 ConstraintLayout簡介

ConstraintLayout，可以翻譯為約束佈局，在2016年Google I/O 大會上釋出。我們知道，當佈局巢狀過多時會出現一些效能問題。之前我們可以去通過RelativeLayout

或者GridLayout來減少這種佈局巢狀的問題。現在，我們可以改用ConstraintLayout來減少佈局的層級結構。ConstraintLayout相比RelativeLayout，其效能更好，也更容易使用，結合Android Studio的佈局編輯器可以實現拖拽控制元件來編寫佈局等等。

2 引入ConstraintLayout

如果我們是新建工程，則Android Studio會預設幫我們加入ConstraintLayout的依賴了。 如果我們是改造舊專案，可以在build.gradle中新增以下依賴：

    implementation 'com.android.support.constraint:constraint-layout:1.1.2'

然後就可以使用ConstraintLayout了。

3 相對位置

要在ConstraintLayout中確定view的位置,必須至少新增一個水平和垂直的約束。每一個約束表示到另一個view，父佈局，或者不可見的參考線的連線或者對齊。如果水平或者垂直方向上沒有約束，那麼其位置就是0.

我們先來看個例子：

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左對齊"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右對齊"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平居中"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="垂直居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="底部對齊"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平居中+垂直居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

其顯示效果如下圖所示： 相對位置.png

上面例子中app:layout_constraintLeft_toLeftOf="parent" 表示view的左邊對齊父佈局的左邊。 app:layout_constraintRight_toRightOf="parent"則表示view的右邊對齊父佈局的右邊。 其他同理，就不一一說明。

  • 相對位置的屬性 下面是ConstraintLayout確定位置的屬性。
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

這些屬性的值即可以是parent，也可以是某個view的id。

  • 居中顯示 如果一個view滿足以下
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

即view的左邊對齊父佈局的左邊，view的右邊對齊父佈局的右邊，除非這個view的大小剛好充滿整個父佈局；否則的話，就是水平居中顯示了。我們可以理解為有兩個力，它們左右互搏，view只能給扯到中間了。

再來兩個例子，把上面的屬性基本都涉及到了，看下估計就懂了，就不逐一說明了。

  • 例子一：水平方向的相對位置 這裡主要關注水平方式的屬性即可。 佈局程式碼：
<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00f"
        android:text="水平參照物"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:text="Left_toLeftOf"
        app:layout_constraintBottom_toTopOf="@id/btn_center"
        app:layout_constraintLeft_toLeftOf="@id/btn_center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:text="Right_toLeftOf"
        app:layout_constraintBottom_toTopOf="@id/btn_center"
        app:layout_constraintRight_toLeftOf="@id/btn_center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:text="Right_toRightOf"
        app:layout_constraintRight_toRightOf="@id/btn_center"
        app:layout_constraintTop_toBottomOf="@id/btn_center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:text="Left_toRightOf"
        app:layout_constraintLeft_toRightOf="@id/btn_center"
        app:layout_constraintTop_toBottomOf="@id/btn_center"/>
</android.support.constraint.ConstraintLayout>

顯示效果如下： 水平方向的相對位置.png

  • 例子二：豎直方向的相對位置 這裡主要關注豎直方向的屬性即可。 佈局程式碼：
<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn_center"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:background="#00f"
        android:text="豎直參照物"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:text="Top_toTopOf"
        app:layout_constraintTop_toTopOf="@id/btn_center"
        app:layout_constraintRight_toLeftOf="@id/btn_center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:text="Bottom_toTopOf"
        app:layout_constraintBottom_toTopOf="@id/btn_center"
        app:layout_constraintRight_toLeftOf="@id/btn_center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:text="Top_toBottomOf"
        app:layout_constraintLeft_toRightOf="@id/btn_center"
        app:layout_constraintTop_toBottomOf="@id/btn_center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:text="Bottom_toBottomOf"
        app:layout_constraintLeft_toRightOf="@id/btn_center"
        app:layout_constraintBottom_toBottomOf="@id/btn_center"/>
</android.support.constraint.ConstraintLayout>

顯示效果如下： 豎直方向的相對位置.png

4 尺寸約束

view中使用warp_content或者固定值等等是沒有問題的。但是ConstraintLayout中不支援MATCH_PARENT這個值，如果需要實現跟MATCH_PARENT同樣的效果，可以使用0dp來代替，其表示MATCH_CONSTRAINT,即適應約束。其跟MATCH_PARENT還是有區別的，後面的例子（寬高比那一小節）會提到。 我們來看下例子：

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

    <Button
        android:id="@+id/btn_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:id="@+id/btn_1"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="具體數值：200dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_center"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="0dp(MATCH_CONSTRAINT)"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_1"/>
</android.support.constraint.ConstraintLayout>

其效果如下： 尺寸大小.png

5 寬高比

在ConstraintLayout中，還可以將寬定義成高的一個比例或者高定義成寬的比率。首先，需要將寬或者高設定為0dp（即MATCH_CONSTRAINT），即要適應約束條件。然後通過layout_constraintDimensionRatio屬性設定一個比率即可。這個比率可以是一個浮點數，表示寬度和高度之間的比率；也可以是“寬度：高度”形式的比率。比如：

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="-------------------寬高比2：1-------------------"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

這裡將按鈕的高度設定為寬度的一半了。如下圖所示： 寬高比1.png

如果寬和高都設定為0dp（MATCH_CONSTRAINT），那麼layout_constraintDimensionRatio的值需要先加一個"W,"或者"H,"來表示約束寬度或高度。如下：

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

這裡例子是說，首先寬度將滿足父佈局的約束，然後將按照16：9的比例設定高度。

6 百分比寬高

ConstraintLayout還能使用百分比來設定view的寬高。 要使用百分比，寬或高同樣要設定為0dp（MATCH_CONSTRAINT）。 然後設定以下屬性即可：

app:layout_constraintWidth_default="percent" //設定寬為百分比
app:layout_constraintWidth_percent="0.3" //0到1之間的值
或
app:layout_constraintHeight_default="percent" //設定高為百分比
app:layout_constraintHeight_percent="0.3" //0到1之間的值

例子如下：

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

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="寬50%"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintWidth_percent="0.5"/>

</android.support.constraint.ConstraintLayout>

效果如下： 百分比寬高.png

7 位置偏向

如果想讓view的位置偏向某一側，可以使用以下的兩個屬性來設定：

layout_constraintHorizontal_bias  //水平偏向
layout_constraintVertical_bias  //豎直偏向

其值同樣也是0到1之間。 比如，以下例子為橫向偏向左側30%，預設的居中效果就是50％：

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左邊偏向30%"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

顯示效果如下： 左邊偏向.png

8 權重

LinearLayout中可以設定權重，ConstraintLayout同樣也有這玩意。 通過設定以下兩個屬性：

app:layout_constraintHorizontal_weight //水平權重
app:layout_constraintVertical_weight //豎直權重

然後將相連的view兩兩約束好即可。如下：

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

相關推薦

帶你瞭解Android約束佈局ConstraintLayout

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

Android約束佈局ConstraintLayout示例

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

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

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

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 性能篇 -- 帶你領略Android內存泄漏的前世今生

http 外部類 sched content 技術 oncreate 保持 roi 作用域 基礎了解 什麽是內存泄漏？ 內存泄漏是當程序不再使用到的內存時，釋放內存失敗而產生了無用的內存消耗。內存泄漏並不是指物理上的內存消失，這裏的內存泄漏是指由程序分配的內存但是由於程序邏

一圖抵千言：帶你瞭解最直觀的神經網路架構視覺化

一張好的圖抵得上一千個等式。 神經網路是複雜、多維、非線性的陣列運算。如何在避免過於複雜或重複的情況下呈現深度學習模型架構的重要特徵呢？又該以何種方式清晰直觀、啟發性地呈現它們呢？（好看也是加分項！）無論研究還是教學專案對此都沒有固定標準。本文我們就來了解一下視覺化整個

什麼是雲連線？雲學院帶你瞭解華為雲連線知識

雲連線為使用者提供一種能夠快速構建跨區域VPC之間以及雲上多VPC與雲下多資料中心之間的高速、優質、穩定的網路能力，幫助使用者打造一張具有企業級規模和通訊能力的全球雲上網路。通過購買一條雲連線，將使用者所需要實現互通的不同區域的網路例項載入到購買的雲連線例項中，這裡的網路例項可以是使用者自己購買的VPC例項或

帶你瞭解遊戲興起初期音樂製作的艱辛

隨著近幾年遊戲的朝氣發展，遊戲背景音樂也逐漸成熟起來，為遊戲創造商業價值。但是在遊戲背景音樂發展的道路上，初期並不如意，有著諸多方面環境的限制。         在早期，計算機水平並不發展，對於遊戲音樂製作的裝置來說，質量也都普遍偏低，很

帶你瞭解make menuconfig

帶你瞭解make menuconfig 時間：2018-08-15作者：華清遠見 在嵌入式領域當中，在配置核心的時候會有很多配置方法，比如說make config（基於文字的為傳統的配置介面）、make oldconfig（如何只想在原來核心配置的基礎上修改一部分，則會省去很多麻煩）、mak

Android新佈局ConstraintLayout解析

轉載自鴻洋大神的部落格 一、概述 ConstraintLayout出現有一段時間了，不過一直沒有特別去關注，也多多少少看了一些文字介紹，多數都是對使用視覺化佈局拖拽，個人對拖拽一直不看好，直到前段時間看到該文： 解析ConstraintLayout的效能優勢 非常詳盡的介紹

到處都在說的一對一視訊直播原始碼：帶你瞭解真人一對一按分鐘計費陪聊模式+cps

直播如此火爆的關鍵，就在於其特別強大的引流能力，因此，當直播人盡皆知，人人蔘與，直播的內容領域，也隨之擴充套件、細分。直播已不止是網紅主播和娛樂平臺的漲粉創收利器，對企業而言，它已是必須把握的巨大商機。 隨著直播平臺受到越來越多使用者的關注，直播的功能和形式也越來越多樣化，作為創業者來說，人人都想在這個網際

帶你瞭解什麼是Activiti工作流，Activiti工作流資料庫表詳細介紹（23張表）

帶你五分鐘瞭解工作流 什麼是工作流 說到工作流,一圖勝萬言。 工作流 Georgakopoulos給出的工作流定義是：工作流是將一組任務組織起來以完成某個經營過程：定義了任務的觸發順序和觸發條件，每個任務可以由一個或多個軟體系統完成，也可以由一個或一組人完成，還可以由一個或多個

一文帶你瞭解求職面試那些名詞（乾貨）

喬兄剛剛經歷了19秋招，收穫了百度offer，馬上要迎來了19春招，有很多公眾號的粉絲經常會問今年不是2018年嗎，你咋就已經完成了2018校招了？由於被很多人經常問起，下面喬兄給大家普及一下跟校招相關的名詞。 現在時間是北京時間 2018.11.15，請務必根據現在的時間去推測你的情況。 201

#圖文詳解：從實際和理論出發，帶你瞭解Java中的多執行緒

這裡並沒有講什麼新東西，只是把多執行緒一些知識來個總結。大家懂得可以複習複習，還有些童鞋對多執行緒朦朧的可以拿這個做為入門~ 舉個栗子說明啥是多執行緒：玩遊戲，前面一堆怪，每個怪都是一個執行緒，你射了一槍，子彈飛出去了，這顆子彈也是一個執行緒。你開啟你的程序管理，看到你遊戲的後臺程序，這就是程序

帶你瞭解什麼是大資料

　大資料（big data），指無法在一定時間範圍內用常規軟體工具進行捕捉、管理和處理的資料集合，是需要新處理模式才能具有更強的決策力、洞察發現力和流程優化能力的海量、高增長率和多樣化的資訊資產。 　在維克托·邁爾-舍恩伯格及肯尼斯·庫克耶編寫的《大資料時代》中大資料指不用隨機分析法（抽樣

一文帶你瞭解 Raft 一致性協議的關鍵點

此文已由作者孫建良授權網易雲社群釋出。 歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。 Raft 協議的釋出，對分散式行業是一大福音，雖然在核心協議上基本都是師繼 Paxos 祖師爺（lamport） 的精髓，基於多數派的協議。但是 Raft 一致性協議的貢獻在於，定義了可易於實現的一致性協議

十分鐘帶你瞭解 Python3 多執行緒核心知識

每個獨立的執行緒有一個程式執行的入口、順序執行序列和程式的出口。但是執行緒不能夠獨立執行，必須依存在應用程式中，由應用程式提供多個執行緒執行控制。 每個執行緒都有他自己的一組CPU暫存器，稱為執行緒的上下文，該上下文反映了執行緒上次執行該執行緒的CPU暫存器的狀態。 指令指標和堆疊指

6段里程碑式Python程式碼，帶你瞭解深度學習歷史！

【導讀】深度學習為什麼會成為今天的樣子？讓我們用六段程式碼來刻畫深度學習簡史，用Python展現深度學習歷史上關鍵的節點和核心要素，包括最小二乘法、梯度下降、線性迴歸、感知器、神經網路和深度神經網路。 最小二乘法 深度學習的一切都起源於這個數學片段（我把它用Python 寫了出來）：

DevOps是什麼？5分鐘帶你瞭解DevOps

DevOps是什麼？5分鐘帶你瞭解DevOps by：karlin999的CSDN部落格 DevOps（英文Development和Operations的組合）是一組過程、方法與系統的統稱，用於促進開發（應用程式/軟體工程）、技術運營和質量保障（QA）部門之間的溝通、協作與整合。它的出現是由