「工欲善其事，必先利其器。」很幸運地，我們需要的工具都已經放在工具列了，今天就來介紹這些好用工具。

推斷約束魔法棒

「霹靂卡霹靂拉拉 波波力那貝貝魯多。」一邊吟唱咒語，一邊點下魔法棒，登愣~ 所有元件的約束線都拉好了~
所有的魔法都有後遺症。你可能會發現:

沒關係，我們不是瑞凡。我們可以重新開始，按下清除所有約束的魔法鍵，黑魔法就解除了。(安心貌)

一些輔助工具

既然魔法不太可靠，只好善用輔助工具，幫助我們完成工作，這是在設計工具列下排選單中的小幫手們:

Guideline

如上圖示，Guideline分為垂直的與水平的，可以依照到ConstraintLayout的begin、end的固定距離或畫面寬或高的百分比來輔助開發者對版面做設計。也可以當作元件建立約束線的對象，在設計圖上會像這樣:

• 垂直或水平的屬性都是下面這3個模式擇一使用，可以點擊圓標示切換這三種模式，垂直線的圓標我怎麼都點不到，如果你跟我一樣就直接改code吧。(註 : horizotal guideline 的 begin 是上方，vertical guideline 的 begin 是指左側)

<!--距離layout begin 160dp-->
app:layout_constraintGuide_begin="160dp"
<!--百分比-->
app:layout_constraintGuide_percent="0.5"
<!--距離layout end 154dp-->
app:layout_constraintGuide_end="154dp"

除了用比例來劃分很方便，元件在寬度(用vertical guideline時)或高度(用horizontal guideline時)設為"0dp"時，可以用來當填滿範圍的邊界，如下圖:
將右邊圖的寬度設為"0dp"，圖寬就會填滿兩側的guideline。

 <ImageView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:contentDescription="@string/image_description"
        android:scaleType="center"
        android:src="@drawable/diamond"
        app:layout_constraintBottom_toTopOf="@+id/guideline7"
        app:layout_constraintStart_toStartOf="@+id/guideline6"
        app:layout_constraintEnd_toEndOf="parent"/>

Barrier

Barrier也是一個不可見的輔助工具，可以設置在一個或一組元件的top、bottom、left、right側，也可以當約束的對象。它的功用就像是設置一條可移動的屏障，隨著它參考的元件移動。

• 有兩種方式設置參考元件列表，如下:

app:constraint_referenced_ids="textBox3,textBox,textBox2"
app:constraint_referenced_tags="text,text3,text2"

• 使用tags的方式，則元件必須設置app:layout_constraintTag屬性，如下:

app:layout_constraintTag="text" 

看下面的例子:

• 兩個並列的EditText，跟Button中間設一條以兩個EditText的bottom為準的Barrier，底下Button是為了看出Barrier有被較長的元件推下去而設置(Button有設置Barrier為其頂部的約束對象)。
  

 <EditText
        android:id="@+id/textBox"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:background="@color/teal_700"
        android:hint="type something"
        android:textSize="22sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toEndOf="@+id/textBox2"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/textBox2"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:minHeight="48dp"
        android:layout_marginTop="8dp"
        android:background="#3F51B5"
        android:hint="type something"
        android:textSize="22sp"
        app:layout_constraintEnd_toStartOf="@+id/textBox"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrierBetweenTextAndButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="textBox,textBox2"
        tools:layout_editor_absoluteY="66dp" />

    <Button
        android:id="@+id/buttonUnderBarrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="36dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/barrierBetweenTextAndButton" />

• 一條線可以移來移去，可以約束又可以當分隔屏障，聽起來很不錯，對吧?但跟guideline不就很像，有什麼不一樣嗎?
  看動圖可知，Barrier是可以因應元件尺寸縮放而動態移動的，而 guideline 比較適合已確定元件尺寸的靜態設計。
  
  參考:stackoverflow這篇

Group

可以將多個元件設置為一個group，也是需要給一個ids或tags元件列表，那我們只要用程式碼控制這個Group的可見性(visibilty)，Group的成員的可見性便會一起收到這個變更而同步。

• 元件可以跨不同Groups存在，元件的可見度為最後一個控制它的Group所宣告的狀態。
• 同群組的ids或tags列表，如果重複也只算一個，沒有特別的順序要求
• 列表可以放元件也可以放另一個group。
  下面是3個 groups 的可見性在View.VISIBLE 跟 View.INVISIBLE 之間變換，當然要加入View.GONE也是可以的，只是會跑版，要處理好元件View.GONE了之後的定位問題。
  

又是一個寫不完的節奏，明天見~