HandySwiftUI Styles：SwiftUI の標準ビューをさらに魅力的に

これらの API を自分のアプリで4年間ブラッシュアップし続けてきましたが、ついに HandySwiftUI の最初のタグ付きリリースを公開できることを嬉しく思います。このパッケージには、この1年だけで10個のアプリをリリースする上で欠かせなかった様々なユーティリティと便利な API が含まれています。HandySwift が Foundation に対して行っているのと同様に、SwiftUI 開発をより便利にするためのパッケージです。

この記事では、TranslateKit、FreemiumKit、CrossCraft などのアプリ開発で特に役立ったスタイルを厳選してご紹介します。HandySwiftUI にはもっと多くのユーティリティが含まれていますが、ここで紹介するスタイルは実際のアプリケーションで何度もその価値を証明してきたものばかりです。皆さんの SwiftUI プロジェクトでもきっと役に立つはずです。

Primary、Secondary、Pulsating ボタン

様々なユースケースに対応する、あらかじめ用意されたスタイルで視覚的に魅力的なボタンを作成できます：

struct ButtonShowcase: View {
   var body: some View {
       VStack(spacing: 20) {
           // 目立つ背景色の Primary ボタン
           Button("Get Started") {}
               .buttonStyle(.primary())

           // ボーダー付きの Secondary ボタン
           Button("Learn More") {}
               .buttonStyle(.secondary())

           // 注目を集めるパルスボタン
           Button {} label: {
              Label("Updates", systemImage: "bell.fill")
                 .padding(15)
           }
           .buttonStyle(.pulsating(color: .blue, cornerRadius: 20, glowRadius: 8, duration: 2))
       }
   }
}

水平、垂直、固定アイコン幅のラベル

レイアウトのニーズに応じた複数のラベルスタイルです：

struct LabelShowcase: View {
   var body: some View {
       VStack(spacing: 20) {
           // アイコンを末尾に配置した水平レイアウト
           Label("Settings", systemImage: "gear")
               .labelStyle(.horizontal(spacing: 8, iconIsTrailing: true, iconColor: .blue))

           // 揃え用の固定幅アイコン
           Label("Profile", systemImage: "person")
               .labelStyle(.fixedIconWidth(30, iconColor: .green, titleColor: .primary))

           // 縦方向スタックレイアウト
           Label("Messages", systemImage: "message.fill")
               .labelStyle(.vertical(spacing: 8, iconColor: .blue, iconFont: .title))
       }
   }
}

すべてのパラメータは適切なデフォルト値付きでオプションなので、.vertical() のように使えます。カスタマイズしたい部分だけ指定すれば大丈夫です。

縦方向ラベル付きコンテンツ

FreemiumKit の API 設定で使われている、縦方向ラベル付きの構造化されたフォーム入力です：

struct APIConfigView: View {
    @State private var keyID = ""
    @State private var apiKey = ""

    var body: some View {
        Form {
            HStack {
                VStack {
                    LabeledContent("Key ID") {
                        TextField("e.g. 2X9R4HXF34", text: $keyID)
                            .textFieldStyle(.roundedBorder)
                    }
                    .labeledContentStyle(.vertical())

                    LabeledContent("API Key") {
                        TextEditor(text: $apiKey)
                            .frame(height: 80)
                            .textFieldStyle(.roundedBorder)
                    }
                    .labeledContentStyle(.vertical())
                }
            }
        }
    }
}

.vertical スタイルでは、alignment（デフォルトは leading）と spacing（デフォルトは 4）をカスタマイズできます。カスタムラベルスタイルを提供する場合は muteLabel: false を指定してください。デフォルトではラベルが自動的に小さくグレーにスタイリングされます。

例えば、FreemiumKit の機能ローカリゼーションフォームでは、縦方向ラベルに大きめのフォントを使いたい場合があります：

LabeledContent {
   LimitedTextField(
      "English \(self.title)",
      text: self.$localizedString.fallback,
      characterLimit: self.characterLimit
   )
   .textFieldStyle(.roundedBorder)
} label: {
   Text("English \(self.title) (\(self.isRequired ? "Required" : "Optional"))")
      .font(.title3)
}
.labeledContentStyle(.vertical(muteLabel: false))

マルチプラットフォーム対応トグルスタイル

SwiftUI には .checkbox トグルスタイルがありますが、macOS でしか使えません。HandySwiftUI は .checkboxUniversal を追加し、すべてのプラットフォームでチェックボックススタイルのトグルを提供します（macOS では .checkbox としてレンダリングされます）：

struct ProductRow: View {
    @State private var isEnabled: Bool = true

    var body: some View {
       HStack {
           Toggle("", isOn: $isEnabled)
              .toggleStyle(.checkboxUniversal)

           Text("Pro Monthly")

           Spacer()
       }
    }
}

この例は、macOS 向けに最適化されつつ他のプラットフォームもサポートする FreemiumKit のプロダクト画面から抽出したものです。

今すぐ始めよう

これらのスタイルが、私にとってそうであるように、皆さんのプロジェクトでも役立つことを願っています。改善のアイデアや SwiftUI コミュニティに貢献できる新しいスタイルの提案があれば、ぜひ GitHub で気軽にコントリビューションしてください：

github.comFlineDev / HandySwiftUIHandy SwiftUI features that didn’t make it into SwiftUI (yet)

これは HandySwiftUI の機能を紹介する全4回シリーズの最終回です。まだご覧になっていなければ、これまでの New Types、View Modifiers、Extensions の記事もぜひチェックしてみてください！