#13 iOS 15 更容易客製的 UIButton — plain、gray、tinted 、filled 四種樣式
iOs15的 UIButton多了更多的選擇,有 Plain、Gray、Tinted 、Filled 四種樣式。也可以做更多的客製化,例如圓形 button、調整字型、調整圓角的弧度等等
讓我們開始認識UIButton吧!
Objects Library 中的所有Button
✨ Button
最基本的 Button,預設為 plain 樣式
設定標題與副標題
從 Alignment 設定標題跟副標題的對齊
從 Title Padding 設定標題跟副標題的間距
使用 assets 的圖片
從 Foreground 設定圖文的顏色
從 Symbol Scale 設定 SF Symbol 的大小
從 Render Mode 設定 SF Symbol 的配色模式
選擇 Palette的話,需要設定 Primary、Secondary、Tertiary 的顏色
從 Placement 設定圖片的位置
💫 圖片在 Top
💫 圖片在 Leading
💫 圖片在 Bottom
💫 圖片在 Trailling
從 Padding 設定圖文的間距
從 Background Configuration 的 Background 設定背景
💫 在 Fill 設定背景、Corner Radius 設定圓角弧度、Stroke 設定邊框顏色、Width 設定邊框寬度
💫 Outset 設定邊框跟 button 的間距
💫 Image 設定背景圖片
從 Background Configuration 的 Corner Style 選擇 Apple 設計的圓角
以下圖示由上而下依序為:Small、Medium、Large、Capsule。
而Fixed 代表固定的圓角弧度、Dynamic 依據 dynamic type 調整圓角弧度
從 Background Configuration 的 Content Insets 設定圖文和 button 邊框的額外距離
Background Configuration 的 Shows Activity Indicator
在 Shows Activity Indicator打勾,App 執行時 button 將有 loading 的動畫效果
設定 button 的尺寸為 Apple 設計的尺寸
切換到 Size inspector,從 Size 欄位選擇 Apple 設計的尺寸
✨ Gray Button、Tinted Button 、Filled Button
可以在 Objects Library 選擇 Button 樣式,或是從 Button 的 Style 欄位設定
✨ Gray Button
預設有圓角,背景顏色是灰色
從 Background 可修改背景顏色
✨ Tinted Button
預設有圓角,圖文跟背景顏色由 Tint 設定
設定Tint的顏色
Filled Button
預設有圓角,背景顏色由 Tint 設定,圖文預設為白色,背景色預設為藍色
設定 Tint 的顏色
Gray Button、Tinted Button 、Filled Button 的背景顏色也可以從 Background 或 Background Configuration 設定
參考文章