#13 iOS 15 更容易客製的 UIButton — plain、gray、tinted 、filled 四種樣式

Alvie Sung
7 min readAug 1, 2021

--

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 設定

參考文章

--

--

Alvie Sung
Alvie Sung

Written by Alvie Sung

努 力 成 為 會 code 的 UI UX 設 計 師 ʕ•̀ o •́ʔ

No responses yet