天天看點
傳回

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

文章目錄

  • 前言
  • 用法
    • 相對定位
      • 語句
      • 解釋
      • 運用舉例
    • 邊距（Margin）
      • 語句
      • 解釋
    • bias與居中處理
      • 語句
      • 解釋
    • 圓弧定位
      • 語句
      • 解釋
      • 舉例運作
    • View的尺寸大小
      • 語句
      • 解釋
    • View的尺寸比例
      • 語句
      • 解釋
    • View的最大最小尺寸
      • 語句
    • View鍊
      • 語句
      • 解釋
    • 輔助布局
      • GuideLine
      • Group
      • Placeholder
      • Barrier
  • 結束語

前言

  在ConstraintLayout出現之前，我們編寫布局往往少不了多層嵌套，很多效果需要結合Relativelayout、LinearLayout等容器的互相嵌套來完成，雖然頁面的效果實作了，但卻帶來很大的性能消耗，而往往還因為适配問題而帶來更多的麻煩。

而ConstraintLayout神奇的地方在于，它不僅能夠實作Relativelayout的相對定位，也能實作像LinearLayout一樣的比例配置設定，而且比它們還更優秀。除此之外，ConstraintLayout還提供了很多屬性和輔助類，讓我們更輕松的實作布局效果。

使用ConstraintLayout之後往往能把之前嵌套好幾層的布局幹掉。進而大大減少了布局嵌套層次，提高了性能。

  ConstraintLayout也不是個什麼新鮮的東西了，google最早在16年I/O大會上就釋出了這個全新的布局，而實際上據我在各個技術群上的了解，貌似實際把ConstraintLayout用在項目裡的人相對較少，也可能是受項目限制，不友善重構布局。也有一部分因為不熟悉這個布局的使用，進而不敢輕易用在項目中，筆者在一開始使用這個布局的時候，就被它的靈活性驚豔到了。而且容易用以前布局的思維來用在了ConstraintLayout中，這是不可取的。是以深感ConstraintLayout需要适應一段時間後就會慢慢的适應這種布局方式，在适應後也會很不想用其它的布局了。

  為此我總結了以下用法，希望能夠幫助到你們，也為自己知識做一個總結。

用法

本篇文章講解的是ConstraintLayout的基礎用法，基本上ConstraintLayout的要點已經在這裡了。

相對定位

語句

  • layout_constraintLeft_toLeftOf
  • layout_constraintLeft_toRightOf
  • layout_constraintTop_toTopOf
  • layout_constraintTop_toBottomOf
  • layout_constraintRight_toLeftOf
  • layout_constraintRight_toRightOf
  • layout_constraintBottom_toTopOf
  • layout_constraintBottom_toBottomOf
  • layout_constraintBaseline_toBaselineOf
  • layout_constraintStart_toEndOf
  • layout_constraintStart_toStartOf
  • layout_constraintEnd_toStartOf
  • layout_constraintEnd_toEndOf

解釋

google為我們提供了這麼多個這種xxx to yyy of 的格式，

這裡的xxx就是使用這條限制語句的View的某個位置（Left、Top、Right、Bottom、Start、End、BaseLine）

這裡的yyy就是被用來做錨點的View的某個位置（Left、Top、Right、Bottom、Start、End、BaseLine）

效果類似于RelativeLayout的layout_toLeftOf、layout_alignParentLeft這些。

直白的了解就是：你想這個View的哪條邊去對齊另外一個View的哪一條邊的時候，就可以用這個。

運用舉例

舉個栗子，我們寫個Button A，它居中父布局（水準和垂直），然後寫第二個Button B，讓它處于第一個Button下方。

代碼如下：

<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/btn1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/colorAccent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="A"
        android:textSize="50sp"
        />
    
    <Button
        android:id="@+id/btn2"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/colorPrimary"
        app:layout_constraintTop_toBottomOf="@+id/btn1"
        android:text="B"
        android:textSize="50sp"
        />
</android.support.constraint.ConstraintLayout>

運作結果如圖：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

（注：如果被拿來做限制參考的View是它的父布局的話，那麼就不是寫id，而是寫parent）

View的（Left、Top、Right、Bottom、Start、End、BaseLine）:

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

這個東西特别好用，使得我們可以代替RelativeLayout來做相對位置的處理

邊距（Margin）

語句

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

解釋

  在ConstraintLayout裡，也支援layout_marginLeft這種格式。隻是區分的一點是，在使用這句代碼時比必須先指定下Left是相對于哪個View哪個位置

比如我們想讓上面的bButton B距離左邊50dp，那麼必須要先聲明它的left相對于父布局的left：

app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="50dp"

這樣才能起作用。

值得注意的是，margin确定的邊距并不會因為做為錨點的View被設定成GONE了而失效。

比如有以下代碼：

<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/btn2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"
        android:text="B"
        android:textSize="50sp"
        app:layout_constraintTop_toBottomOf="@+id/btn1"
        app:layout_constraintLeft_toLeftOf="parent"
        android:visibility="gone"
        />
    <Button
        android:id="@+id/btn3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="150dp"
        android:background="@color/colorAccent"
        android:text="C"
        android:textSize="50sp"
        app:layout_constraintLeft_toLeftOf="@+id/btn2"
        app:layout_constraintTop_toBottomOf="@id/btn1"
        />
   </android.support.constraint.ConstraintLayout>

結果：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

可以看出Button C還是可以以Button B作為錨點，它的constrain依舊生效。

那如果我們想根據錨點View是否GONE而來确定margin生不生效，要怎麼做呢。

google提供了另外一套方案：

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

  這樣我們可以設定layout_goneMarginLeft=“0dp”，進而當錨點View被設定GONE的時候，marginLeft屬性失效。

當然，我們也可以設定另外一個數值，來表示當錨點View被GONE之後，margin才生效。

bias與居中處理

語句

  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias

解釋

  在文章一開頭，我們有實作過了居中的效果。一開始接觸的時候其實有點不習慣，ConstraintLayout并沒有像RelativeLayout的居中效果的語句

而是使用（水準居中）：

app:layout_constraintLeft_toLeftOf="parent"
  app:layout_constraintRight_toRightOf="parent"

  設定了這個屬性的View，會被左右兩邊“拉”着，結果大家用力都一樣，那麼就水準居中了

在水準居中了後，我們同樣可以使用margin來調整位置，而往往我們又需要根據比例來調整這個位置關系，這是bias屬性就用上了

在使用constrain屬性使得View水準居中後，比如想讓View水準開始位于螢幕寬度20%的位置，那麼可以：

app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintHorizontal_bias="0.2"

圓弧定位

語句

  • layout_constraintCircle
  • layout_constraintCircleAngle
  • layout_constraintCircleRadius

解釋

這個屬性就高大上了，畢竟是其它布局所不能直接支援的。

它的作用就是你可以相對于錨點View的中心位置，聲明一個角度和距離（半徑）來确定View的位置

  • layout_constraintCircle 是關聯的錨點View的id
  • layout_constraintCircleRadius View的中心點與關聯的錨點View的中心點的距離（圓弧半徑）
  • layout_constraintCircleAngle View的中心點與關聯的錨點View的中心點的角度關系（0到360度）

關于角度和半徑的說明，這裡貼一張官方圖：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

舉例運作

比如以下代碼，讓Button B位于Button A的45度角，并且距離Button A中心點為150dp

<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/btn1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@color/colorAccent"
    android:text="A"
    android:textSize="50sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"
        android:text="B"
        android:textSize="50sp"
        app:layout_constraintCircle="@id/btn1"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="150dp"
      ></Button>
      </android.support.constraint.ConstraintLayout>

效果：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

View的尺寸大小

語句

  • layout_constraintWidth_default
  • layout_constraintWidth_percent
  • layout_constraintHeight_percent

解釋

ConstraintLayout也一樣，可以用layout_width、layout_height來确定View大小。

然而值得注意的是，它額外的提供給了一個0dp的屬性（MATCH_CONSTRAINT ），這不是說讓寬或高位0dp，而是一種标記。

它标記的含義會随着不同的constrain設定而有不同的展現。

layout_constraintWidth_default語句有三個不同的值：

  • 預設是spread，意思是占用所有的符合限制的空間

比如寬度鋪滿：

...
 android:layout_width="0dp"
  app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" 
    ...

這樣的話則就會鋪滿整個寬度。 （google不推薦使用match_parent，有這個高大上的屬性來代替）

  • percent， 顧名思義就是按照百分比來表示寬度

比如，水準居中後View的寬度為總寬度的50%，則可以這麼寫：

...
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
  ...

運作：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語
  • wrap

比對内容大小但不會超過限制的限制。（和指定寬度為wrap_content的差別是不會超過限制限制）

這個跟直接指定寬度為wrap_content有相似之處，不同的是：

指定layout_constraintWidth_default="wrap"時不會超過限制限制的大小，而直接指定寬度為wrap_content則可以超過限制限制的大小

然而google又提供了一對屬性

  • app:layout_constrainedWidth=”true|false”
  • app:layout_constrainedHeight=”true|false”

  當直接指定寬度為wrap_content時，可以指定layout_constrainedWidth="true"則不會超過限制大小。

但是這樣看來感覺有點多此一舉了，感覺wrap屬性沒大用處了

  由上，ConstraintLayout的強大之處真不是一點兩大點。我們現在可以輕松自由的根據比例來指定View的寬高了。

雖然說LinearLayout也能做到一點，但是使用LinearLayout往往使得布局有更多的嵌套，而ConstraintLayout的出發點就是位了減少嵌套。

View的尺寸比例

語句

  • layout_constraintDimensionRatio

解釋

ConstraintLayout不僅支援寬高比例的配置，還是配置寬高比例根據其中的一個而根據比例計算出另外一個的

當寬度高度有一個為0dp時，另外一個可以根據指定的ratio來确認自己的大小。

layout_constraintDimensionRatio指定的格式可以是"width:height"的形式，也可以是width/height的比例值

比如寬度為100dp radio指定了“2:1”，那麼高度就是50dp。

代碼如下：

...
     android:layout_width="0dp"
     android:layout_height="100dp"
    app:layout_constraintDimensionRatio="2:1"
    ...

上面的2:1 也可以寫成 2， 也就是寬和 高的比值

如果兩個都為0dp，那麼尺寸就是滿足限制限制的最大尺寸了。

比如我在根布局ConstraintLayout裡想指定一個View，它居中螢幕，鋪滿寬度，并且高度很寬度一樣大小，那麼可以這麼寫：

<Button
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" 
        ...
        />

運作效果：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

如果還想單獨限制寬度或者高度的話，layout_constraintDimensionRatio可以這麼寫：

在layout_constraintDimensionRatio寫比例的時候前面加個W或H，來表示要限制的是寬還是高

比如高度鋪滿，而寬度是高度是二分之一：

<Button
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="W,1:2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
         ...
         
         />

運作結果：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

View的最大最小尺寸

語句

  • layout_constraintWidth_min
  • layout_constraintWidth_max
  • layout_constraintHeight_max
  • layout_constraintHeight_min

View鍊

語句

  • layout_constraintHorizontal_chainStyle
  • layout_constraintHorizontal_weight
  • layout_constraintVertical_chainStyle
  • layout_constraintVertical_weight

解釋

如果在一個水準或者垂直方向上，一排View之間兩兩互相限制，則為鍊

如圖：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

可以通過layout_constraintHorizontal_chainStyle來設定這條鍊

  • spread

預設的方式，也就是上圖的樣子

  • spread_inside

和spread的差別是沒算兩端的限制

  • packed

所有元素擠在中間,可以使用bias來改變位置偏移

具體可以看下官方提供的圖：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

  可以看出，這個效果其實是相當于Linearlayout的鍊。它也一樣和LinearLayout一樣用weight來表示權重

比如在水準方向上使用layout_constraintHorizontal_weight來配置設定剩餘的空間。

但是它不是和layout_weight屬性全部一樣，因為在LinearLayout中，layout_weight屬性是不管寬高怎麼設定它都會生效的

而layout_constraintHorizontal_weight使用的前提下必須chainStyle是spread的形式（預設就是了），還有需要設定0dp後才會有效果的

輔助布局

GuideLine

GuideLine就是指導線，參考線的意思，有水準參考線和豎直參考線兩種。在ConstraintLayout裡面View的定位往往需要找到對應參考的錨點View，而有時候我們并不好找到這個View，或者說一定要先建一個參考的錨點View出來後才行，在這種情況下，GuideLine就有很大用途了。

GuideLine就是一個虛拟的輔助線，友善其它的View以此作為錨點，而它自身并不會參與繪制。

GuideLine有以下幾個重要的屬性：

  • orientation
  • layout_constraintGuide_percent
  • layout_constraintGuide_begin
  • layout_constraintGuide_end

orientation用法則和在linearLayout中一樣，當作為水準參考線時需指定：android:orientation=“horizontal”，想做為垂直參考線時指定：android:orientation=“vertical”

layout_constraintGuide_percent則是指定參考線的百分比位置，根據orientation指定的方向調整位置。

layout_constraintGuide_begin和 layout_constraintGuide_end則是參考線距離開始或結束的具體數值

舉個例子，我們的定義一條垂直居中的參考線，再定義一個Button A貼在這條參考線的下方：

<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/guideline1"
        android:layout_width="22dp"
        android:layout_height="11dp"
        android:orientation="horizontal"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintGuide_percent="0.5"
       />

    <Button
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="8dp"
        android:background="@color/colorAccent"
        android:text="A"
        android:textSize="50sp"
        app:layout_constraintTop_toBottomOf="@+id/guideline1"
       />
       </android.support.constraint.ConstraintLayout>

效果截圖：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

Group

  Group同樣是一個虛拟的View，并不參與實際繪制。它可以用來控制多個View同時hide or show，

之前我們往往對多個View需要同時顯示和隐藏的時候往往需要一個一個去控制。而Group則提供了這個便利，它可以通過指定一組View，來達到控制這一組View的顯示狀态。

Group有兩個重要屬性：

  • android:visibility
  • app:constraint_referenced_ids

比如同時控制Button A 和 B 為GONE狀态。（當然，這裡隻是舉例了XML，但一般是寫在代碼裡）

<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.Group
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="invisible"
    app:constraint_referenced_ids="btn1,btn2"
    />
    <Button
        android:id="@+id/btn1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="8dp"
        android:background="@color/colorAccent"
        android:text="A"
        android:textSize="50sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />

    <Button
        android:id="@+id/btn2"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="8dp"
        android:background="@color/colorPrimary"
        android:text="B"
        android:textSize="50sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn1" />
</android.support.constraint.ConstraintLayout>

上面這樣就什麼也沒看到了，因為Button A 和B被同時隐藏了。

需要注意的是，Group在寫一組控件id的時候是逗号隔開，然後隻寫id的名字。

Placeholder

Placeholder是一個占位布局，同樣它本身不會參與繪制.

它有一個app:content屬性，可以通過綁定一個View，當綁定了一個View之後，被綁定的View會相當于被GONE掉，而顯示到Placeholder中來。

是以，它适合用來編寫一些模版布局，在适當的情況下利用Placeholder先提前占位，然後再來替換成目标View。

Placeholder有一個重要屬性：

  • app:content

比如我們來寫一個模版布局，這個布局分成上下兩個部分。

<?xml version="1.0" encoding="utf-8"?>
<merge 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"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="81dp"
    tools:parentTag="android.support.constraint.ConstraintLayout">

    <android.support.constraint.Placeholder
        android:id="@+id/template_top"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHeight_percent="0.5"
        app:layout_constraintHeight_default="percent"
        app:content="@+id/top"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <android.support.constraint.Placeholder
        android:id="@+id/template_bottom"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHeight_percent="0.5"
        app:content="@+id/bottom"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />


</merge>

(注：我們用一個merge标簽來避免模版布局帶來的備援嵌套，利用tools:parentTag="android.support.constraint.ConstraintLayout"使之按照ConstraintLayout的限制規則來處理)

其後，我們有了模版布局之後，假如我們想把這兩個模版布局替換成兩個ImageView，則可以這麼做：

<?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">
    <include layout="@layout/template_layout" />
    <ImageView
        android:id="@+id/top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        />
    <ImageView
        android:id="@+id/bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        />
</android.support.constraint.ConstraintLayout>

效果截圖：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

  可以看到，我們利用include标簽引入的模版布局，兩個Placeholder實際上被替換成了ImageView，而原來定義的ImageView則不會顯示。

需要注意的是include标簽需要放在要替換Placeholder的View的前面，不然不會被替換。

而且定義的ImageView已經沒必要再配置那些限制屬性了，因為這些限制屬性已經在Placeholder裡面聲明了。

有了這個東西之後，我們可以很輕松的根據模版布局填充不同的View。

Barrier

沒錯，他就是一個屏障器。它可以阻止View越過自己，當某個View要越過自己的時候，Barrier會自動移動，進而避免被覆寫

它也是通過constraint_referenced_ids屬性指定需要添加屏障的View，進而這些View就不會超越這個屏障（跟個準确來說這個屏障會随着View的擴張而移動，使之不會讓View越過自己）

Barrier有兩個重要屬性：

  • app:barrierDirection
  • app:constraint_referenced_ids

描述的不夠好，我們來舉個例子。

假如我有這麼一個需求，左邊有兩個TextView表示兩個單行的文字，右邊是一個Textview表示多行的。

代碼如下：

<?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">
  <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="内容："
        android:textSize="24sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="12345678"
        android:textSize="24sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv1"
        />
    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="this is content this is content this is content this is content this is content this is content"
        android:textSize="24sp"
        app:layout_constraintLeft_toRightOf="@+id/tv1"
        />
</android.support.constraint.ConstraintLayout>

效果圖大緻是這樣：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

  由于ConstraintLayout的限制規則，一個View隻可以指定另外一個View作為錨點。是以這裡右邊的TextView無論是指tv1還是tv2的時候，都有可能因為tv1或者tv2中文字太長而遮擋到tv3

從效果圖可以看到，由于錨點View指定的是tv1，而tv2的文字更長，它便重疊在tv3。

這個時候Barrier的作用就來了，我們可以通過Barrier可以指定tv1、tv2使這兩個View不會越過Barrier。

而tv3可以設定這個Barrier為錨點，限制在它的右邊。 代碼如下：

<?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">
  <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="内容："
        android:textSize="24sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="12345678"
        android:textSize="24sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv1"
        />
<android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="tv1,tv2" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="this is content this is content this is content this is content this is content this is content"
        android:textSize="24sp"
        app:layout_constraintLeft_toRightOf="@+id/barrier" />
</android.support.constraint.ConstraintLayout>

效果圖如下：

Android開發知識（二十六）強大的限制布局 - ConstraintLayout的用法總結前言用法結束語

可以看到左邊有一條黑邊屏障，這裡隻是看設計效果，實際上并不會顯示在螢幕上的。

結束語

終于結束了，其實一直很懶得寫部落格，因為總結一篇實在太耗費精力和時間了。但是換來的是對知識的總結，是以還是有必要堅持寫下去。

如果你也看到了最後，請給我一個贊支援一下吧！ 。

移動開發 constraintlayout 限制布局 ConstraintLayout的用法 Android布局
上一篇: DrawerLayout詳解「建議收藏」
下一篇: 基于Hadoop0.20.2版本的namenode與secondarynamenode分離實驗

繼續閱讀