大家都說ConstraintLayout真是棒

為什麼呢？
主要看到的論述都是可以讓layuot更扁平化，進而提高效能，點我看看Google怎麼說。
再來就是可以把它視為RelativeLayout的加強版，
功能更多、更靈活、更方便。

介面講解

如果使用ConstraintLayout的話介面會多這兩個地方

• 先依序介紹上面那排工具列的每個按鈕

1. 決定畫布上要看到哪些東西
2. 加入新的元件時，是否自動添加約束⚠️⚠️⚠️Xcode沒有
3. 預設邊距，滿方便的⚠️⚠️⚠️Xcode也沒有
4. 清除所有約束
5. 點一下，就將畫面上所有元件補上缺少的約束⚠️⚠️⚠️Xcode還是沒有
6. 延伸元件的寬或高(選中元件時才可用)
7. 垂直或水平置中(一樣是選中元件時才可用)，有分兩種，先看作用前
   
   若選垂直置中
   
   若選垂直置中父視圖
   
8. 加入輔助功能
   

• 再來介紹右邊的layout框

1. 決定元件尺寸
   框框內可以看到>>>>>，就代表是昨天提到的wrap_content；
   如果點一下>>>>>的圖案會變成|---|，就代表固定數值大小；
   如果再點一下又會變成|||，就代表根據約束決定大小(就是長寬設為0dp)。
2. 決定元件位置
   可以看到對上下左右的距離。
   另外看到橫軸跟縱軸可以調整Bias，代表位置所在的比例。☘️☘️☘️就像以前的Multiplier

開始添加約束吧

有兩種方法

1. 從畫布上元件四邊的圓點，拉線到想參考的其他元件。
   
2. 或是從右邊layout屬性，直接點四邊的加號
   
3. ☘️☘️☘️
   1. AutoLayout的Leading = ConstraintLayout的Start = 左邊
   2. AutoLayout的Trailing = ConstraintLayout的End = 右邊

刪除約束的方法

1. 刪除畫面上所有的約束：點工具列上面的第4個按鈕
2. 刪除某/多個元件上的所有約束：右鍵>clear Constraint of selection
3. 刪除某一條約束：因為AS無法選中約束⚠️⚠️⚠️，所以就是從右邊layout框的上下左右圓點，點一下就刪除；或是從XML去刪

對齊

這部分概念跟以前很不一樣⚠️⚠️⚠️，以前我們B要對齊A的水平中心，直接B右鍵拉線到A上面放開，就有選項可以選了。
現在的話，是B的Start對A的Start且B的End對A的End。
如果照Android這種設法的話，iOS會變成等寬，所以思路要改變一下。(其實Android也會等寬, 只要width=0dp)
另外還有一種我就偷懶不實作了，偷一下android的Medium

Ratios

只要點了左上角的三角型，就會可以固定長寬比了，右下角就可以輸入比例。

參考資料

• ConstraintLayout官方文件
• android官方Medium，一目瞭然講解Constraint技巧

今天的範例程式

可以去 https://github.com/mark33699/IDLA 看一下順便給顆⭐️

如果你喜歡我的影片別忘了按讚分享加訂閱，開啟紅色的小鈴鐺，我們明天見～