iPhoneの通知設定画面のラジオボタンを再現してみた

概要

SwiftUIでラジオボタンで設定を切り替える機能を作成することがあったので、どうせなら公式アプリの設定画面に見た目を似せてみようと思い、作成しました。

再現したい画面はこちらです。

再現した画面はこちらです。

詳細

今回作成した選択項目はQRとNFCとなっています。
また、こちらで選択した値はアプリで共有して使用すること、そしてアプリ内で保持することを前提としているため、@AppStorage("QR") var scanType = "QR"
と記述しています。

UIに関することなので、残りは以下のSwiftUIのコードを参照していただければ幸いです。

import SwiftUI

/// 設定画面
struct SettingView: View {
    @AppStorage("QR") var scanType = "QR"
    
    var body: some View {
            List {
                Section(header: Text("読み取り形式"),
                        footer: Text("読み取り方法を決定する項目です。")) {
                    VStack {
                        HStack {
                            Spacer()
                            ScanTypeView(scanType: $scanType, type: "QR", imageName: "qr_viewfinder")
                            Spacer()
                            ScanTypeView(scanType: $scanType, type: "NFC", imageName: "nfc")
                            Spacer()
                        }
                        .padding()
                    }
                }
            }
            .navigationTitle("設定")
            .navigationBarTitleDisplayMode(.inline)
        }
    }

    struct ScanTypeView: View {
        @Binding var scanType: String
        let type: String
        let imageName: String
        
        var body: some View {
            VStack {
                Image(imageName)
                    .resizable()
                    .frame(width: 48, height: 96)
                    .foregroundColor(scanType == type ? .blue : .gray)
                Text(type)
                    .padding(scanType == type ? 10 : 0)
                    .background(scanType == type ? Color.blue : Color.clear)
                    .cornerRadius(25)
                    .frame(width: 82, height: 36)
                    .foregroundColor(scanType == type ? .white : .gray)
            }
            .onTapGesture {
                withAnimation(.easeInOut(duration: 2.0)) {
                    scanType = type
                }
            }
        }
    }



public enum scanType {
    /// QRコードでスキャンを行う場合
    case QR

    /// NFCでスキャンを行う場合
    case NFC

}

ただのテキストのみのラジオボタンだけではなく、画像付きだとより分かりやすいですね。