作業#10 UIButton

目的：研究iOS 15新版UIButton的四種樣式

目前iOS 15最新的UIButton中有四種不同的樣式可供選擇，比起過去新版的UIButton更好客製化，樣式有Plain，Gray，Tinted，Filled，一起來研究一下新版多了哪些東西吧

Style

就如上述所說這次新版有四種樣式，Default則是舊版的，下面會主要以新版四種做研究

Default

Type：設定不同類型，下方再做補充

State Config ：設定不同時候所顯示的外觀，有Default，Highlighted，Selected，Disabled

Title：Button顯示的文字

Text Color：文字顏色

Shadow Color ：陰影顏色

Image：圖片

Background：背景圖片

Type：分為七種

但外觀上主要分為左圖四種

1. Detail Disclosure
2. Info Light，Info Dark
3. Add Contact
4. Close
5. System
6. Custom

Plain

嗯…新版可以很直觀的看出來多了不少東西

Title，Subtitle，Alignment

新版的可以在Title底下加上Subtitle，Alignment可以調整Subtitle的位置

Title Padding

可以調整Title跟Subtitle的距離

Foreground

調整字體顏色

Image，Symbol Scale，Render Mode，Placement，Padding

可以選擇加入自己的圖片或是SF Symbol，設定SF Symbol可以透過Symbol Scale設定大小，Render Mode設定配色，Placement跟Padding設定位置

Symbol Scale

Render Mode：可以設定配色模式

以下設定為Palette，可以讓SF Symbol不只一種顏色

關於Render Mode配色模式詳細內容可參考下方連結：

SF Symbol 3 四種客製顏色的 rendering mode(配色模式）

Placement & Padding

Placement可以設定圖片在文字的上下左右，Padding可以設定文字與圖片的距離

Preferred Symbol Configuration

如果以上的Symbol Scale滿足不了對於圖片的大小設定，這欄有三個可以針對SF Symbol更近一步客製化的欄位

Configuration

可以直接設定SF Symbol要多大，可以直接設定Point Size或是跟著字體大小

Scale

感覺跟上面的Symbol Scale差不多

Weight

可以跟字體一樣調整粗細

Background Configuration

Background選擇Custom後，可以針對背景樣式做設定

Corner Style：可以製造出不同的圓角

Fill：設定填滿顏色，與下面View的Background不同，Fill只會填滿圓角內的顏色

Stroke：設定邊框，Width可以設定粗細，Outset可以設定邊框與Button內的距離位置，邊框可內縮也可外放

Image：設定背景圖片

另外將Button設定為正方形再將Corner Style設定成Capsule可以將Button變成圓形的

詳細內容可參考下方連結：

利用 iOS 15 的 UIButton.Configuration 實現圖片維持比例的 button，圓形 button & 點選時變色

Content Insets

可設定文字在Button內置中以外移動的位置

Shows Activity Indicator

按下Button後會有執行轉動loading動畫

Gray Button ，Tinted Button &，Filled button

基本上除了預設外觀不同以外且都已有圓角，這三個的外觀設定Plain都做得到，但是簡單的Button來說選擇使用其中一個都能比Plain省下不少設定

以上所有內容參考下方連結：

iOS 15 更容易客製的 UIButton — plain，gray，tinted & filled 四種樣式

GitHub連結：

GitHub - PogaHuang/Homework10Button