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

Published in

彼得潘的 Swift iOS App 開發問題解答集

13 min readJun 25, 2021

iOS 15 的 UIButton 進化了 ! 現在它有 Plain，Gray，Tinted & Filled 四種樣式可選擇，可以做更多的客製，比方圖片的位置，圓角的弧度，圖片維持比例，圓形 button，搭配 AttributedString 調整字型等。

接下來讓我們一步步從 Interface Builder 認識這些新的設定欄位吧。

Objects Library 的新 button

從 Objects Library 可看到現在有六種 button 可選擇，包含了 Button，Gray Button，Tinted Button，Filled Button，Pull Down Button & Pop Up Button，待會我們將介紹前四種 button。

Button

首先讓我們從最基本的 Button 開始吧，它預設為 plain 樣式，主要用於呈現無背景的按鈕。

設定標題

設定副標題(subtitle)

從 Alignment 設定標題跟副標題的對齊

從 Title Padding 設定標題跟副標題的間距

多行文字

顯示多行文字也不是問題。

從 Image 設定和文字並排的圖片

使用 SF Symbol。

使用 assets 的圖片。

值得注意的，圖片顯示時會維持原本的大小，因此如果圖片太大，圖片將超出 button 的框框。若是希望圖片依 button 尺寸調整大小，請將圖片設成背景圖片，相關說明等下會提到。

只有圖沒有字也可以。

從 Foreground 設定圖文的顏色

從 Symbol Scale 設定 SF Symbol 的大小

從 Render Mode 設定 SF Symbol 的配色模式

在此我們選擇 Palette，因此有 Primary，Secondary，Tertiary 三種可設定的顏色。

SF Symbol 的配色模式可參考以下連結。

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

從 iOS 15 的 SF Symbol 3 開始，SF Symbol 顯示的顏色有更多客製的選項。除了原本的 Monochrome(單色) & Multicolor，新增了 Hierarchical(分層) &…

medium.com

從 Placement 設定圖片的位置

圖片預設在文字的左邊，我們可從 Placement 調整它的位置。

圖片在 trailing。

圖片在 bottom。

從 Padding 設定圖文的間距

從 Background Configuration 的 Background 設定背景

選擇 Custom 後可設定相關欄位。

如下圖所示，我們在 Fill 設定黃色的背景，Corner Radius 設定圓角弧度，Stroke 設定邊框顏色，Width 設定邊框寬度。

Outset 設定邊框跟 button 的間距。

Image 設定背景圖片。

從 Background Configuration 的 Corner Style 選擇 Apple 設計的圓角

我們也可以從 Corner Style 選擇 Apple 設計的圓角。

以下為 Small，Medium，Large，Capsule 四種圓角的設計。

採用以上四種圓角時，button 將如下圖所示，自動依據大小調整圓角的弧度。

至於 Fixed & Dynamic，Fixed 代表固定的圓角弧度，Dynamic 則會依據 dynamic type 調整圓角弧度。

實現圖片維持比例的 button & 圓形 button

相關說明可參考以下連結。

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

開發 iOS App 時，我們時常會想要圖片可以點選，其中的一個方法是用 button 的 image 顯示圖片。不過 button 顯示圖片時要注意變形問題。當 button 尺寸小於圖片尺寸時，若 button…

medium.com

從 Background Configuration 的 Content Insets 設定圖文和 button 邊邊的額外距離

圖文預設是置中，如下圖所示，選擇 Custom 後可設定相關欄位。我們將 Leading 設為 30，Top 設為 20，因此圖文將往右下移動。

Background Configuration 的 Shows Activity Indicator

顯示 loading 圖示，App 執行時 button 將有 loading 轉轉轉的動畫。

設定 button 的尺寸為 Apple 設計的尺寸

切換到 Size inspector。

從 Size 欄位選擇 Apple 設計的尺寸

下圖依序為 Small & Large 的尺寸，可看到 Large 的圖文也會比 Small 大。

調整文字的字型和大小

從 Interface Builder

從程式

import UIKit

class ViewController: UIViewController { 

   override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
       
        let button = UIButton(type: .system)
        var config = UIButton.Configuration.plain()
        
        var title = AttributedString("Login")
        title.foregroundColor = UIColor.red
        title.font = UIFont(name: "AmericanTypewriter-Bold", size: 30)
        config.attributedTitle = title
        
        var subtitle = AttributedString("welcome")
        subtitle.foregroundColor = UIColor.blue
        subtitle.font = UIFont(name: "AmericanTypewriter-Bold", size: 20)
        config.attributedSubtitle = subtitle
        button.configuration = config
        view.addSubview(button)
        button.translatesAutoresizingMaskIntoConstraints = false  
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        button.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
   }
}

說明

利用 UIButton 的 property configuration 設定 button 的樣式，它的型別是 UIButton.Configuration，在此我們產生樣式 plain 的 configuration，然後從 attributedTitle & attributedSubtitle 設定文字的樣式。attributedTitle & attributedSubtitle 的型別是 AttributedString，因此可以設定文字的相關屬性，比方字型，大小，顏色等。