在 iOS 15 中為 SwiftUI 按鈕設置樣式 大大節省開發時間


在 iOS 15 中,Apple 引入了一個新方法,來為 SwiftUI 和 UIKit 框架的 iOS App 客製化按鈕。這篇教學文章主要會介紹 SwiftUI 的新功能,如果你有興趣了解如何在 iOS 15 中設置 UIButton 樣式,可以參考 Sarun 撰寫的這篇文章

在 SwiftUI 設置按鈕樣式

在我們介紹 iOS 15 的新修飾符 (modifier) 之前,先重溫一下現在我們設置按鈕樣式的方法。

swiftui-button-in-ios-15

比如說,我們想創建一個圓角按鈕,就可以如此編寫程式碼:

Button(action: {}) {
    Text("Buy me a coffee")
}
.padding()
.foregroundColor(.white)
.background(Color.purple)
.clipShape(RoundedRectangle(cornerRadius: 5))

我們利用 .clipShape 修飾符,來客製化按鈕的前景和背景顏色、應用間距 (padding) 和圓角。

在 iOS 15 中,要創建一個類似的圓角按鈕,我們可以使用新修飾符 buttonBorderShape,並應用 BorderedProminentButtonStyle 新樣式:

Button(action: {}) {
    Text("Buy me a coffee")
}
.tint(.purple)
.buttonStyle(.borderedProminent)
.buttonBorderShape(.roundedRectangle(radius: 5))
.controlSize(.large)

應用 .borderedProminent 樣式後,iOS 就會將按鈕呈現為紫色背景和白色文字。.buttonBorderShape 則是讓我們設置按鈕的邊框形狀 (border shape),在這裡,我們會設置為 .roundedRectangle,以創建圓角按鈕。

控制按鈕的大小

我們可以利用 .controlSize 來改變按鈕的大小。按鈕的預設大小是 .regular,其他可選的設定包括 .large.small、和 .mini。讓我們看看不同大小的按鈕:

swiftui-buttons-control-size

按鈕的邊框形狀

除了 .roundedRectangle 外,SwiftUI 還提供了另外一個邊框形狀 .capsule,讓開發者可以創建膠囊形狀的按鈕。

swiftui-button-border-shape

我們也可以使用 .automatic,讓系統自動調整按鈕的形狀。

改變按鈕樣式

之前我們一直在使用 .borderProminent 按鈕樣式。新版本的 SwiftUI 提供了其他內置樣式,包括 .bordered.borderless.plain.bordered 樣式是我們通常會使用的樣式。以下是在淺色 (light) 和深色模式 (dark mode) 下,使用 .bordered 樣式的按鈕預覽圖片:

swiftui-button-style

當然,我們還是可以自己編寫程式碼來創建同樣的按鈕,但這個 iOS 15 的新樣式就可以為我們節省不少編寫程式碼的時間。

把樣式應用到多個按鈕

設定好按鈕樣式之後,我們就可以簡單地為一組按鈕應用同一樣式,看看以下例子:

VStack {
    Button(action: {}) {
        Text("Add to Cart")
            .font(.headline)
    }

    Button(action: {}) {
        Text("Discover")
            .font(.headline)
            .frame(maxWidth: 300)
    }

    Button(action: {}) {
        Text("Check out")
            .font(.headline)
    }
}
.tint(.purple)
.buttonStyle(.bordered)
.controlSize(.large)

利用按鈕 Role

SwiftUI 框架的 iOS 15 版本為 Button 引入了一個新的 role 選項。這個選項會描述按鈕的 Semantic Role。iOS 會根據指定的 role,自動為按鈕呈現適當的外觀。

比如說,我們把 role 定義為 .destructive

Button("Delete", role: .destructive) {
    print("Delete")
}
.buttonStyle(.borderedProminent)
.controlSize(.large)

iOS 就會自動以紅色顯示 Delete 按鈕。讓我們看看不同 role 和樣式的配搭,會創建出怎樣的按鈕外觀:

swiftui-button-role

確認對話框 (Confirmation Dialog)

iOS 15 除了新的按鈕樣式之外,還有一個新修飾符 .confirmationDialog,我們可以將其附加到 Button 來顯示一個確認對話框。

讓我們看看顯示確認對話框的範例程式碼:

struct DemoView: View {
    @State private var isShowingDialog = false
    var body: some View {
        Button("Delete", role: .destructive) {
            isShowingDialog = true
        }
        .buttonStyle(.borderedProminent)
        .controlSize(.large)
        .confirmationDialog("Are you sure to delete the data?", isPresented: $isShowingDialog, titleVisibility: .visible) {

            Button("Confirm", role: .destructive) {
                // Handle the delete action.
            }
            Button("Cancel", role: .cancel) {

            }
        }
    }
}

我們可以在 .confirmationDialog 修飾符設定標題和布林值,用來決定是否顯示對話框。你也可以在 titleVisibility 選擇是否顯示標題。

編寫好上述的程式碼後,我們會得到以下的確認對話框:

swiftui-confirmation-dialog

利用 Material 客製化按鈕

在 iOS 15 中,SwiftUI 引入了一個 Material 型別,讓開發者可以創建不同的模糊效果 (blur effect)。我們可以在.background 修飾符添加以下的 Material,在一個視圖後面的視圖上應用模糊效果。

  • .ultraThickMaterial
  • .thickMaterial
  • .regularMaterial
  • .thinMaterial
  • .ultraThinMaterial

讓我們看看應用了 .ultraThinMaterial 的範例程式碼:

Button(action: {}) {
    Text("Add to Cart")
        .font(.headline)
}
.padding()
.background(.ultraThinMaterial, in: Capsule())

就如 Apple 所說,添加 Material 就像是在視圖與其背景之間插入一個半透明層 (translucent layer)。如果我們使用不同的 Material,就會實作出不同的模糊效果。你可以參考下圖,看看不同 Material 實作出的模糊效果。

swiftui-background-material

Toggle 按鈕

swiftui-toggle

在 iOS 中,Toggle 就像是一個開關按鈕。在 iOS 15 中,我們可以使用 .toggleStyle 修飾符,將 Toggle 設置顯示為一個按鈕:

struct DemoView: View {
    @State private var isEnabled = false

    var body: some View {

        Toggle(isOn: $isEnabled) {
            Label("Airplane mode", systemImage: "airplane.circle.fill")
        }
        .padding()
        .tint(.purple)
        .controlSize(.large)
        .toggleStyle(.button)
    }
}

.toggleStyle 設置為 .button 後,Toggle 就會變成按鈕的模樣。以下是 Toggle 在 ON/OFF 狀態時的外觀:

swiftui-toggle-button-ios-15

總結

iOS 15 為客製化 SwiftUI 按鈕帶來了許多改進。雖然我們也可以創建自己的方法來設計按鈕樣式,但新版本的 SwiftUI 有很多內置樣式,減輕了開發者的工作。

這些新功能唯一的缺點,就是只支援 iOS 15。如果你的 App 支援舊版本的 iOS,就需要自己實作來設置按鈕樣式。

譯者簡介:Kelly Chan-AppCoda 編輯小姐。
原文How To Style SwiftUI Buttons in iOS 15


軟件工程師,AppCoda 創辦人。著有《iOS 13 App 程式設計實力超進化實戰攻略》、《iOS 13 App 程式設計實力超進化實戰攻略》以及《精通 SwiftUI》。曾任職於HSBC, FedEx等公司,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda,致力於iOS程式教學,產品設計及開發。

blog comments powered by Disqus
Shares
Share This