SwiftUIで、カラーを選択できるViewを作る方法

このコードでは、テーマカラーを選ぶための画面が作られているんだよ。テーマカラーってのは、アプリやウェブサイトの見た目や雰囲気を決めるカラーのことなんだ。そのテーマカラーを選ぶためのビューが、このThemeColorSelectionViewっていうものなんだ。

このビューでは、ユーザーが選んだカラーを覚えておくための変数があって、それがselectedColorって名前なんだ。それには最初に.blueっていう青いカラーが入っているよ。

さらに、選べるカラーがいくつかあって、それがthemeColorsっていう配列で保持されているんだ。.blueや.redや.greenなどのカラーが入っているよ。

このビューでは、まず"Theme Color"って書かれたテキストが表示されているんだよ。

そして、その下にはボタンが横並びに表示されているんだ。この部分では、themeColorsの中のカラーの数だけ繰り返し処理が行われているんだよ。それぞれのカラーに対して、ボタンが表示されるんだ。ユーザーがボタンをタップすると、選んだカラーがselectedColorに設定されるよ。ボタンには選んだカラーで塗りつぶされた円が表示されているよ。選んだカラーと同じなら、白い縁がついているよ。

さらに、"Selected Color:"って書かれたテキストが表示されているんだ。その下には選んだカラーを示す円が表示されているんだ。円の中は選んだカラーで塗りつぶされていて、白い縁がついているんだ。

最後に、ビューの周りにはpaddingが追加されていて、余白が設定されているんだ。

ContentViewでは、このテーマカラー選択ビューが表示されているんだよ。ContentViewはアプリやウェブサイトのメインの画面で、ここから始まるんだ。

ContentView_Previewsでは、このビューのプレビューが提供されているんだ。プレビューでは、ビューの見た目や動きを確認することができるよ。

struct ThemeColorSelectionView: View {
    // ユーザーが選択したカラーを管理する状態変数
    @State private var selectedColor: Color = .blue
    
    // 使用可能なテーマカラーの配列
    let themeColors: [Color] = [.blue, .red, .green, .orange, .purple]
    
    var body: some View {
        VStack(spacing: 20) {
            // テキストを表示
            Text("Theme Color")
                .font(.headline)
            
            HStack(spacing: 10) {
                // 使用可能なテーマカラーの数だけループ
                ForEach(themeColors, id: \.self) { color in
                    // ボタンを作成し、タップされた時に選択されたカラーを更新する
                    Button(action: {
                        selectedColor = color
                    }) {
                        // 円形のビューを表示し、選択されたカラーで塗りつぶす
                        Circle()
                            .fill(color)
                            .frame(width: 50, height: 50)
                            .overlay(
                                // 選択されたカラーと一致する場合は白い縁を表示し、それ以外は縁を表示しない
                                Circle()
                                    .stroke(Color.white, lineWidth: selectedColor == color ? 4 : 0)
                            )
                    }
                }
            }
            
            // 選択されたカラーを表示するテキストを表示
            Text("Selected Color:")
            
            // 選択されたカラーを示す円形のビューを表示
            Circle()
                .fill(selectedColor)
                .frame(width: 100, height: 100)
                .overlay(
                    // 白い縁を表示
                    Circle()
                        .stroke(Color.white, lineWidth: 4)
                )
        }
        .padding()
    }
}

struct ContentView: View {
    var body: some View {
        // テーマカラー選択ビューを表示
        ThemeColorSelectionView()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        // コンテンツビューをプレビュー表示
        ContentView()
    }
}

作ったアプリ。

では。