ConstraintLayout基礎介紹

時間  2019-12-19
標籤 constraintlayout 基礎 介紹 简体版
原文   原文鏈接

自去年Google I/O 大會發布ConstraintLayout至今，已有一年多的時間，可是並無普及開來，瞭解過ConstraintLayout佈局的人知道，它的性能的確提高了很多。在前不久，Google 開發者博客發佈了一篇文章Understanding the performance benefits of ConstraintLayout（中文地址）詳細分析ConstraintLayout性能的優點，感興趣的朋友能夠去看看。html

固然本身以前也沒有認識到ConstraintLayout佈局的性能優點，因此從這篇文章開始由淺入深詳細介紹ConstraintLayout的屬性及使用，也讓本身對ConstraintLayout也有一個更全面的認識，今天的這篇文章主要介紹佈局的一些屬性，學習地址是Google文檔。android

配置

在使用ConstraintLayout以前咱們須要在咱們app下的gradle文件添加ConstraintLayout依賴，截止到目前ConstraintLayout的最新版本是1.0.2.bash

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
}複製代碼

#Relative positioning
相對定位的效果和RelativeLayout佈局有殊途同歸之處，只不過要比RelativeLayout強大。約束能容許咱們指定一個控件相對於另外一個控件的位置，經過一些屬性咱們能夠對組件進行水平或者垂直排列。例如當咱們使用含有Left, Right, Start 或者End關鍵詞詞屬性進行定位時便是對組件進行水平方向排列，同理 top, bottom 和 text baseline（文字的基線位置）就是垂直方向排列。具體相對定位的一些屬性組合以下app

  • 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

對於上面這些屬性的值有兩種，一種就是同層級組件ID，還有就是parent，當值爲parent時便是相對於父佈局進行定位。ide

<?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">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="textView1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="textView2"
        app:layout_constraintLeft_toRightOf="@+id/textView1" />
</android.support.constraint.ConstraintLayout>複製代碼

例如上面的佈局，咱們使用app:layout_constraintLeft_toRightOf="@+id/textView1"將textView2的左邊和textView1的右邊對齊，效果圖佈局

image.png
image.png

那麼當textView2屬性設置爲性能

app:layout_constraintTop_toBottomOf="@+id/textView1"
    app:layout_constraintLeft_toRightOf="@+id/textView1"複製代碼

效果圖：
學習

image.png
image.png

當textView1設置屬性 app:layout_constraintRight_toLeftOf="parent"
textView2設置 app:layout_constraintLeft_toLeftOf="parent"時，gradle

效果圖：
ui

image.png
image.png

Margins

對於margin值咱們都不陌生，由於咱們常用，有如下幾種

  • android:layout_marginStart
  • android:layout_marginEnd
  • android:layout_marginLeft
  • android:layout_marginTop
  • android:layout_marginRight
  • android:layout_marginBottom

須要注意的是此margin只對於設置了約束的地方起做用，以下佈局

<?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">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:text="textView1" />
</android.support.constraint.ConstraintLayout>複製代碼

咱們只設置了TextView的左邊和父佈局左邊約束，當咱們設置了左邊和上邊的margin值都爲10時，發現只有左邊的邊距生效，而上邊的變化沒有發生做用，這也就驗證了邊距只對有約束行爲的地方起做用。

除了咱們經常使用的margin設置屬性外，ConstraintLayout 還提供了一些特有的margin設置。先看下面佈局

<?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">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="textView1"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="textView2"
        app:layout_constraintLeft_toRightOf="@+id/textView1" />
</android.support.constraint.ConstraintLayout>複製代碼

上面textview2在textview1的右邊，那麼當咱們因爲某種需求將textview1設置了 View.GONE隱藏該控件，那麼此時textview2將跑到位置將顯示在左上角，若是咱們在隱藏textview時而保持textview2位置不變。在以前的應用中能稍微比較麻煩一點，可是ConstraintLayout 給咱們提供了layout_goneMargin**類的屬性，該屬性是表示約束隱藏時的margin值。例如上面的textView2咱們增長app:layout_goneMarginLeft="100dp"屬性就能夠保持當約束textView1隱藏時而保持textview2位置不變。

須要注意的一點是若是某個約束設置了View.GONE，至關於這個組件寬和高爲0，約束佈局中至關於一個點，其餘設置的約束依然有效。

Centering positioning and bias

<TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="textView1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />複製代碼

若是約束佈局中咱們添加textview並設左邊和父佈局左邊，右邊和父佈局右邊對齊，並設置寬度100dp,那麼此時效果是怎樣的呢。咱們發現textview居中顯示了，這就是約束佈局的居中定位。
其實咱們能夠理解爲父佈局對textview左邊和右邊都有一個拉力，因爲默認這個力大小相同就到顯示到中間位置。

image.png
image.png

在上面因爲兩個相反的約束，而使組件居中，在協同佈局中還提供了bias，經過屬性layout_constraintHorizontal_bias或者layout_constraintVertical_bias設置組件偏向水平或者垂直的某一測，，默認狀況下該值是0.5(50%).例如咱們設置textview屬性

app:layout_constraintHorizontal_bias="0.3"複製代碼

此時組件偏向左邊

image.png
image.png

Dimensions constraints

當咱們的協調佈局的子組件設置wrap_content時，咱們能夠經過android:minWidth或者android:minHeight 屬性設置最小寬度或者高度的約束。minWidth/minHeight只有寬度或者高度爲wrap_content纔有做用。

對於android:layout_height /android:layout_width屬性，它的值只有三種狀況

  • 使用指定的大小或者指定大小的引用，如100dp
  • WRAP_CONTENT，此時根據內容本身計算大小
  • 0dp，該值至關於MATCH_CONSTRAINT。

須要注意的是在約束佈局中MATCH_PARENT 屬性值不在支持，例如在上面的TextView咱們設置layout_width分別是100dp,0dp,0dp(marginLeft :20dp)大體效果如圖a,b,c

image.png
image.png

Ratio

比例約束能夠約束咱們控件的寬高比，例以下面示例

<TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="textView1"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />複製代碼

設置寬度爲100dp,高度爲0dp,此時設置了寬高比是2:1，則寬度會自動約束調整爲50dp。
若是咱們將上面的寬和高度調換，寬爲0dp，高100dp,此時最終寬度爲200，高度100（寬：高=2:1）

在上面介紹的的寬高比約束是單維度的，那麼若是咱們的寬和高都有約束，都設置爲0dp，在這種狀況下，系統會使用知足全部約束條件和比率的最大尺寸。固然咱們也能夠在比例值前面加 W 或者 H 來分別約束寬度或者高度，如H,2:1。

Chains

鏈是一種特殊的約束它能讓多個該鏈鏈接的 多個Views 平分剩餘空間位置
以下咱們建立一個水平鏈

<?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">

    <TextView
        android:id="@+id/A"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@color/btnnormal"
        android:gravity="center"
        android:text="A"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/B" />

    <TextView
        android:id="@+id/B"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="B"
        app:layout_constraintLeft_toRightOf="@+id/A"
        app:layout_constraintRight_toLeftOf="@+id/C" />

    <TextView
        android:id="@+id/C"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@color/btnnormal"
        android:gravity="center"
        android:text="C"
        app:layout_constraintLeft_toRightOf="@+id/B"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>複製代碼

上面代碼的效果圖以下，A和C相對於父組件的左邊和右邊有一個約束，A和B，B和C之間兩兩相互約束，咱們還須要知道的是對咱們稱鏈的第一個元素組件爲鏈頭。以下圖A就是該鏈的鏈頭

image.png
image.png

鏈的模式

對於鏈頭咱們能夠經過屬性layout_constraintHorizontal_chainStyle（layout_constraintVertical_chainStyle）設置，該屬性有三個值，spread ，spread_inside ，packed

  • CHAIN_SPREAD
    默認狀況下該屬性默認值是spread 。它的間隙將平分剩餘空間，如上圖所示
  • CHAIN_SPREAD_INSIDE
    spread_inside值會把兩邊最邊緣的兩個 View 靠邊顯示，而後讓剩餘的 Views 在剩餘的空間內平分間隙。當面設置spread_inside時效果圖以下

image.png
image.png

  • CHAIN_PACKED
    還有一種值是packed ，它表示將view之間緊挨着顯示，而且全體居中顯示，設置該模式後效果圖以下

image.png
image.png

除此以外，咱們能夠經過設置layout_constraintHorizontal_bias屬性來調整總體的位置。默認狀況居中，也就是該值爲0.5，例如咱們將該值設置0.3,則實現效果以下

image.png
image.png

  • Weighted chain
    在官方文檔中還介紹了一種模式是權重模式，在CHAIN_SPREAD 模式中，若是咱們設置控件的寬或者高設置MATCH_CONSTRAINT即0dp,它們將按權重平分佔滿父控件的寬或者高，對於權重的設置是屬性和咱們線性佈局設置權重達到同樣的效果，例如在上面的三個TextView，咱們設置寬度都爲0dp,並設置鏈樣式爲spread（或spread_inside），此時效果 圖以下

image.png
image.png

若是咱們給A和C設置下面屬性 

app:layout_constraintHorizontal_weight="1"複製代碼

給B設置屬性

app:layout_constraintHorizontal_weight="2"複製代碼

那麼此時A,B,C的寬度爲1:2:1比例佔滿父組件寬度。設置權重時鏈樣式不能設置爲packed （設置後寬度會收縮爲0）

參照線Guideline

Guideline用於輔助咱們對View進行定位，以及設置約束，它不會再真正的顯示，只是起到輔助做用，經常使用屬性以下

  • android:orientation
    該屬性能夠指定輔助線是垂直仍是水平線，它有兩個值即vertical，horizontal，
  • layout_constraintGuide_begin/layout_constraintGuide_end
    用來設置對齊父組件的 start 或者end邊緣的距離，

  • layout_constraintGuide_percent
    該值是0.0到1.0之間，用來設置輔助線在父佈局的位置，例如設置0.5，就至關於在父視圖寬度的中間50%。

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

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

  <TextView
      android:id="@+id/tvguide"
      android:layout_width="50dp"
      android:layout_height="50dp"
      android:background="@color/red"
      android:gravity="center"
      android:text="Guide"
      app:layout_constraintBottom_toTopOf="@+id/guideline_h"
      app:layout_constraintLeft_toLeftOf="@+id/guideline_v" />複製代碼

    在上面咱們在約束佈局中建立兩個輔助線，分別是垂直和水平的輔助線，並將textView的下面和水平輔助線的上面對齊，將TextView的左邊和垂直輔助線左邊對齊。這樣咱們可使用輔助線任意控制View的約束位置。

image.png
image.png
好了今天ConstraintLayout的基礎知識就介紹到這裏了，下一篇文章將介紹ConstraintLayout佈局中Behavior的相關知識，如文中有錯誤歡迎指出。Hava a wonderful day。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程