如前篇所說，ContraintLayout約束佈局是新專案預設的版面配置。
今天來多了解一點關於ContraintLayout約束佈局。

來看看官方文檔怎麼介紹:

ConstraintLayout可讓您使用扁平視圖層次結構（無嵌套視圖組）創建複雜的大型佈局。它與 RelativeLayout 相似，其中所有的視圖均根據同級視圖與父佈局之間的關係進行佈局，但其靈活性要高於RelativeLayout，並且更易於與Android Studio 的佈局編輯器配合使用。
引自官方文檔

教練，我想畫圖!

怎麼開始?可以先在紙上/設計軟體上畫好設計圖草稿或是找個既有的app畫面，甚至是只是app某一小區塊練習也很好，主要先熟悉這些新玩意兒，一下挑戰太難的畫面反而會很難下手。想想這些都是用到那些元件?然後就開始操作吧，不實際畫個幾次是不知道哪裡有坑的。

加入元件

很簡單~在調色盤上找到你需要的元件，用滑鼠把它拖拉到預設的位置上，元件生成的時候會有流水號id，同時也會在調色盤下的元件樹依序出現，例:button,button2,button3...等。
如果是沒有經驗的人，建議可以先依照草稿，由上到下，同一列就由左到右，這樣依序擺好，等熟練的會摸索到適合自己的方式。

入門用法 : 拉下線的人

元件擺好後，就拉拉 拉拉拉~ 拉拉 拉拉拉~ 由元件的四側邊框藍點拉出至少一條水平(左右邊框)，一條垂直(上下邊框)的約束線到父層layout或其他原件的四邊，出現相連的藍線、藍點變成實心的，就是成功了~ 拉線過程中是很有可能跑版，沒關係，將原件拖曳回原位就好。

是不是比請月老牽紅線簡單多了?

畫線前，先學清除

1. 按住ctrl不放同時滑鼠移到藍點點上，藍點變紅點時點左鍵可撤銷該點的約束。
2. 清除選取元件現有的約束:選取該元件+滑鼠右鍵 -> Clear Constraints of Selection
3. 清除所有元件的所有約束 : 工具列下排的 Clear All Constraints

你的線是什麼線，約束線也有不同形態

屬性視窗有這樣的工具讓我們調整元件，(3)寬度/高度模式會隨著我們對寬高的設定改變約束線的外觀，也可以直接點擊線條切換模式:

• Fixed：您可以在下面的文本框中指定具體維度，也可以在編輯器中調整視圖尺寸。
• Wrap Content：視圖僅在需要時擴展以適應其內容。
• Match Constraints：視圖會盡可能擴展，以滿足每側的約束條件（在考慮視圖的外邊距之後）。不過，您可以使用以下屬性和值修改該行為（這些屬性僅在您將視圖寬度設置為 match constraints 時才會生效）
• 細節請查看官方文檔

註: 如果用xml試過就知道無法直接設 android:layout_width="match_constraint"，應該設android:layout_width="0dp" IDE才給過喔~
屬性視窗則有標示:

入門需要的仙貝芝士，快吃下去 ~

1. 相對位置的觀念 : 觀察下面約束線屬性列表配合圖看就知道了，給值是其他元件id或是parent(父層容器，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

2. margin : 給值是正值或0dp，設置margin的那側與其他元件或parent都會至少保持這個距離。margin不是ConstraintLayout獨有的概念，其他layout中也是這樣使用。

• android:layout_marginStart
• android:layout_marginEnd
• android:layout_marginLeft
• android:layout_marginTop
• android:layout_marginRight
• android:layout_marginBottom
• layout_marginBaseline
  另外如果約束的對象的visibility變成View.Gone時，也有對應的margin屬性如下:
• layout_goneMarginStart
• layout_goneMarginEnd
• layout_goneMarginLeft
• layout_goneMarginTop
• layout_goneMarginRight
• layout_goneMarginBottom
• layout_goneMarginBaseline
  這是什麼意思呢?看例子，TextView的約束的對象是ImageView，因為ImageView高度是100dp，且沒有其他margin影響，所以TextView設app:layout_goneMarginBottom="100dp" 就可以在ImageView "gone"了之後，適用這個屬性，TextView 的 底部會長出100dp的外邊距，所以可以繼續在維持原本位置。

<!--有刪減一些屬性，但不影響理解-->
<TextView
        android:id="@+id/textView"
        app:layout_goneMarginBottom="100dp" <!--在這行--> 
        app:layout_constraintBottom_toTopOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintStart_toStartOf="@+id/imageView" 
        ...
        />
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:visibility="gone"<!--在這行-->      
       ... 
       />

• imageView visible的時候:
  

• imageView gone了
  

3. bias
   不管中文翻譯是偏見、偏誤、偏心還是偏斜，可以知道，重點就是一個字:偏
   有下列兩個屬性:

• layout_constraintHorizontal_bias
• layout_constraintVertical_bias
  直接看官方示意圖秒懂
  
  官方文檔 : ConstraintLayout開發者指南
  

週五輕鬆點，我們明天見