💨

SwiftUIでスタイルの統一

2021/06/08に公開

iOS

Swift

SwiftUI

tech

SwiftUIでのスタイルの設定

iOS/macOSではStylesを使ってボタン・テキストの見た目を一括で変更することができます。

単純なスタイルの指定

例としてButtonStyleがあります。これを使うことでボタンの見た目を変えることができます。

struct CapsuleButtonStyle: ButtonStyle {
        
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(Color.blue)   //背景色
            .foregroundColor(.white)  //文字色
            .font(.body.bold())       //フォントサイズ・スタイル
            .clipShape(Capsule())     //背景の形
            .scaleEffect(configuration.isPressed ? 0.95 : 1)  //ボタンが押された時のエフェクト
            .animation(.easeOut(duration: 0.2)) //エフェクトのアニメーション
    }
}

struct ContentView: View {
    var body: some View {
      Button("Capsule", action: { })
          .buttonStyle(CapsuleButtonStyle())
    }
}

結果

スタイルの統一方法

Buttonが複数ある場合、全てのButtonに対してStyleを適用すれば良いと考えられます。

struct ContentView: View {
    var body: some View {
      VStack {
        Button("Capsule1", action: { })
          .buttonStyle(CapsuleButtonStyle())
        Button("Capsule2", action: { })
          .buttonStyle(CapsuleButtonStyle())
        Button("Capsule3", action: { })
          .buttonStyle(CapsuleButtonStyle()) 
      }
                         
    }
}

しかし、この方法ではコードの量が多くなってしまいます。
そこで以下のように変更します。

struct ContentView: View {
    var body: some View {
      VStack {
        Button("Capsule1", action: { })          
        Button("Capsule2", action: { })
        Button("Capsule3", action: { })
      }.buttonStyle(CapsuleButtonStyle())
                         
    }
}

ポイントは、親要素のVStackに対してButtonStyleを適用していることです。
子要素の全てにStyleが適用されます。

統一に便利なスタイル

ここまでButtonStyleを中心に一括でStyleを適用する方法を解説していきました。
他にもStyleの統一に便利なものがいくつもあります。
下記はその例です。

TextFieldStyle
ButtonStyle
ToggleStyle
LabelStyle

他にもStyleはありますが、１つのアプリでは実装する要素の数が少ないので割愛しました。