SwiftUI の ButtonStyle

SwiftUI は、スタイル プロトコルを使用してビューを作成およびカスタマイズする強力な方法を提供します。これらのプロトコルを使用すると、ビューの外観と操作性を 1 行のコードで定義できます。

その結果、ビューの視覚的な一貫性が保たれ、アプリが使いやすく、より魅力的になります。

ButtonStyle を使用しないボタンのスタイル設定

さまざまな修飾子をボタンに適用することで、ボタンをインラインでスタイル設定できます。次の例を考えてみましょう。

Button("Tap me") {}
    .font(.system(.callout, weight: .bold))
    .foregroundColor(.white)
    .frame(maxWidth: .infinity, maxHeight: 48)
    .background(.blue)
    .cornerRadius(8)

単一のボタンをデザインする場合、このアプローチはまったく問題ありません。ただし、同じスタイルで複数のボタンを開発する必要がある場合は、プロトコルを使用する必要がありますButtonStyle。これは、アプリ全体で同じスタイルを共有し、さまざまなボタンに適用するのに役立ちます。

ButtonStyle を使用したボタンのスタイル設定

という名前のカスタム ボタン スタイルを作成しましょうPrimaryButtonStyle。これは、アプリケーション全体の主ボタンに使用されるスタイルです。

この例を見てみましょう。

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(.blue)
            .cornerRadius(8)
    }
}

作成したボタンのスタイルを適用するには、次のように書いてみてください。

Button("Tap me") {}
    .buttonStyle(PrimaryButtonStyle())

ボタンスタイル構成

ボタンの構成オブジェクトには、isPressedボタンが現在押されているかどうかを示すブール値など、いくつかのプロパティがあります。これを使用して、ユーザーがボタンをタップしたときにボタンのスタイルを変更できます。そのためには、次のように書くことができます。

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(configuration.isPressed ? .blue.opacity(0.75) : .blue)
            .cornerRadius(8)
    }
}

プロのヒント

次の拡張子を に追加することで、コードをよりクリーンで読みやすくすることができますPrimaryButtonStyle。

extension ButtonStyle where Self == PrimaryButtonStyle {
    
    static var primary: PrimaryButtonStyle {
        PrimaryButtonStyle()
    }
}

Button("Tap me") {}
    .buttonStyle(.primary)

を使用するとButtonStyle、ボタンの外観、レイアウト、インタラクションを定義し、アプリケーション全体の一貫性を確保できます。

さらに、ボタン関連のロジックとスタイルを再利用可能なコンポーネントにカプセル化する方法も提供します。これにより、コードベースの保守性と拡張性が向上します。

読んでくれてありがとう！

この記事が役に立ったと思われる場合は、他の人が見つけやすくなるように、必ず拍手を送ってください。