swift #011 practice-button設定(新版)

每天都是全新的開始

step 1. Objects Library 點選 +

step 2. 尋找Button

step 3. 將元件Button拖曳到畫布上

step 4. Button的欄位設定，新舊版的欄位不同

新版button的欄位

舊版button的欄位

step 5. 標題設定

step 6. 副標題設定

6.1 Aligmemt對齊方式

預設值

置中

靠右對齊

6.2 Title Padding間距

6.3 Foreground設定顏色

step 7. Image加入

7.1 Symbol Scale設定

Image Large

Image Small

7.2 Placement設定

Top在標題上方

Bottom在標題下方

7.3 Padding設定間距

7.4 Backgroung Configuration

7.4.1 將Background的Default改為Custom則可設定相關欄位，將Fill設為黃色背景。

7.4.2 Corner Style設定四角的圓角弧度

Capsule

Large

Fixed固定圓角弧度，Dynamic會動態調整圓角弧度

7.4.3 Stroke設定邊框顏色

7.4.4 Width設定邊框寬度

7.4.5 Outset設定邊框跟button的間距

7.4.6 在Image上設定背景圖片

7.4.7 Content Insets設定，從預設Default改為Custom，則可設定相關欄位。

預設值

可以移動button中圖案及文字的位置

7.4.8 Drawing勾選Shows Activity Indicator，在執行App時就會有Loading轉動的圖示

step 8. 其他button樣式-Gray / Tinted / Filled Button

8.1 除了由Objects Library選擇button，亦可以由button的style欄位選擇

參考資料

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