Material Design Component 的 Shape
上一篇介紹ShapeableImageView 可以讓圖片的4個角變成圓角或斜角。
其實Material Design Component的TextFiled、Chip、Dialog、BottomSheet、NavigationView 等也都可以調整它的形狀，一樣修改Style就可以達成。
例如下圖的調整：
1. Text Field 的左上與右上改成圓角。
2. 把Dialog調整成斜角。
你還可以把Component弄成像下圖的形狀。
先加入dependencies
implementation 'com.google.android.material:material:1.2.0'使用的方式跟在ShapeableImageView都一樣，先試著來調整Text Field的圓角。
在Style設定左上、右上為圓角。
接著我們再來試Dialog，除了對單一UI元件修改，也可以針對在App Level 的 Material Design Component一起設定。例如我們希望所有的Dialog都長的像上圖一樣(只是Demo說明，不要真的把Dialog改成這樣XD)。
在Style上針對所有的MaterialAlertDialog調整
其實下列這些Material Design Component 你都可以透過修改Style shapeAppearanceOverlay的方式來調整Shape。
- Bottom Sheet
- Card
- Chip
- Date Picker
- Dialog
- Extended Floating Action Button
- Floating Action Button
- Button
- Toggle Button
- Navigation View
- Slider
- Text Field
MaterialShapeDrawables
你也可以用程式碼透過這3個類別來處理。
CutCornerTreatment
RoundedCornerTreatment
要改成圓角，只要改setAllCorners為RoundedCornerTreatment。
TriangleEdgeTreatment
還有一種很特別的就是在上下左右的中間截一個三角。
客製 CornerTreatment
除了斜角、圓角，其實你還可以自已來畫這4個角要怎麼切。我們可以透過繼承 CornerTreatment，實作getCornerPath來處理4個角的部分。
要做到上圖的切4個角，我們得畫出像下圖紅色的三角形區塊來切掉。
建立一個類別MyCutCornersTreatment，繼承CornerTreatment，override getCornerPath。
getCornerPath 方法會傳進4個參數：
shapePath：用來繪路徑
angle：4個角的角度，通常會是90度，(什麼情境會不是90度，我也還不太知道)
interpolation：會依動畫從0~1，所以在完全隱藏時是0，完全顯示時是1。
radius：在.setAllCornerSizes(20f)所傳入的大小。
上方程式碼的shapePath就是用來畫這個三角，用它來切掉矩形。
首先矩形的左上角是座標x=0, y=0。
shapePath.reset(0f, radius * interpolation) //移到下圖的1的位置shapePath.lineTo(radius * interpolation, 0f) //畫一條線到下圖的2的位置
這樣就完成在4個邊切一個斜角了。不過不是有4個角嗎？這裡你只要以左上角來使用shapePath如何畫線，其他的3個角會自動完成。
再來一個例子切出4個「直角」
上方的shapePath畫出了下圖的紅色區塊。
接著來看一下圓角是怎麼做的。
圓角則是這畫一個圓來切掉下圖紅色的部分。
第1步：決定圓在哪裡，指定圓的left, top, right, bottom。
第2步：畫弧的起點與結束點，也就是要從A畫到B。時針3點鐘位置代表0度。所以要從A點到B點畫一個弧，就是從180度，畫90度的弧長。
接著是往內的弧
要切掉的紅色區塊如下圖，注意到top、left變到-radius了，而right、bottom則是radius。從A點90度畫弧-90度到B點。就可以切掉紅色的區塊了。
EdgeTreatment 的客制
客制EdgeTreatment，只需要看中間上面就好了，其他3個會自動處理。
建立MyEdgeTreatment 繼承 EdgeTreatment，override getEdgePath
畫出紅色的三角。這裡要注意的是其中一個參數center是指該Edge的中間點。只需要畫出中間上面的紅色區塊，其他三個邊會自動處理。
所以也可以畫出這樣的圓弧
以上就是客制Material Design Component 的形狀。
參考：
