システム開発＜基本編＞SwiftUIで色（RGB）のスライダ調整アプリ：Slider

Swift
2025.11.27
システム開発＜基本編＞SwiftUIで色選択アプリ：ColorPicker
今回は、SwiftUIで、ColorPicker を利用して、色（カラー）を選択するアプリケーションを開発する記事を紹介します。 光の三原色（RGB）や、色の三属性（HSB）、モーダル表示：sheet() 等を学びましょう。
www.stella-karin.website
2025.11.21

前回は、SwiftUIで、ColorPicker を利用して、色（RGB）を選択するアプリケーションを

開発する記事を紹介しました。

 

 

今回は、SwiftUIで、Slider を利用して、色（RGB）をスライダ調整が出来る

アプリケーションを開発する記事を紹介します。

SwiftUIで色（RGB）のスライダ調整アプリ：Slider

 

上記のように、ColorPicker でも、スライダ機能は搭載されていますが、単独で

動作する Slider を実装してみましょう。

 

習得内容

今回、SwiftUIで色（RGB）をスライダ調整が出来るアプリケーションを生成する事で、

下記の内容を習得する事が出来ます。

  • スライダ：SwiftUIで色（RGB）のスライダ調整（Slider）
  • 画面サイズの取得：GeometryReader で UIの部品の幅や高さの設定に便利

 

動作環境

今回も、アプリが動作する環境は下記になります。

  • mac OS：Sequoia 15.6.1
  • iOS：26.0
  • Xcode：26.0.1
  • Swift：6.2.1

 

 

色（RGB）スライダ調整アプリ

では、色（RGB）スライダ調整アプリを作成していきます。

 

Xcode の上部タブメニューより、File → New → File from Template を選択します。

 

SwiftUI View を選択します。

 

名称は、ColorSliderRGBView を入力してみます。

 

Create ボタンを押して、ColorSliderRGBView.swift を作成します。

 

ContentView：メインメニュー（ランチャー）

前回の記事で作成したメインメニュー（ランチャー）：ContentView を確認します。

 


import SwiftUI

struct ContentView: View {

    @State var isPopupView_1 = false
    @State var isPopupView_2 = false

    var body: some View {
        
        VStack{
            Button {
                self.isPopupView_1.toggle()
            } label: {
                Text("QRCodeView")
                    .font(.title2)
            }
            .fullScreenCover(isPresented: $isPopupView_1, content: {
                QRCodeView(isPopupView_1: $isPopupView_1)
            })
            .padding()

            Button {
                self.isPopupView_2.toggle()
            } label: {
                Text("ColorPickerView")
                    .font(.title2)
            }
            .sheet(isPresented: $isPopupView_2, content: {
                ColorPickerView(isPopupView_2: $isPopupView_2)
            })
            .padding()
        }
    }
}

#Preview {
    ContentView()
}

 

メインメニュー（ランチャー）は、以下の内容です。

  • QRCodeView
  • ColorPickerView

 

モーダル表示：sheet()

先程、作成した ColorSliderRGBView を ContentView のメニューに追加します。

 


import SwiftUI

struct ContentView: View {

    @State var isPopupView_1 = false
    @State var isPopupView_2 = false
    @State var isPopupView_3 = false

    var body: some View {
        
        VStack{
            Button {
                self.isPopupView_1.toggle()
            } label: {
                Text("QRCodeView")
                    .font(.title2)
            }
            .fullScreenCover(isPresented: $isPopupView_1, content: {
                QRCodeView(isPopupView_1: $isPopupView_1)
            })
            .padding()

            Button {
                self.isPopupView_2.toggle()
            } label: {
                Text("ColorPickerView")
                    .font(.title2)
            }
            .sheet(isPresented: $isPopupView_2, content: {
                ColorPickerView(isPopupView_2: $isPopupView_2)
            })
            .padding()

            Button {
                self.isPopupView_3.toggle()
            } label: {
                Text("ColorSliderRGBView")
                    .font(.title2)
            }
            .sheet(isPresented: $isPopupView_3, content: {
                ColorSliderRGBView(isPopupView_3: $isPopupView_3)
            })
            .padding()
        }
    }
}

#Preview {
    ContentView()
}

 

ColorPickerView と同様に ColorSliderRGBView を呼び出す際、モーダル表示を

させる sheet() を指定しました。

 

ColorSliderRGBView：色スライダ調整アプリ

色（Color）スライダ調整アプリを作ってみます。

 

ソース例：ColorSliderRGBView

次に、ContentView（親画面）から呼び出される ColorSliderRGBView（子画面）の

ソースを紹介します。

 


import SwiftUI

struct ColorSliderRGBView: View {

    @Binding var isPopupView_3: Bool
    @State private var color: Color = .white

    @State private var redRatio = 1.0  // 赤の割合
    @State private var greenRatio = 0.2  // 緑の割合
    @State private var blueRatio = 0.3  // 青の割合
    @State private var opacity = 1.0  // 不透明

    var body: some View {
        ZStack {
            Color(red: 0.03, green: 1.0, blue: 1.0, opacity: 0.2)
                .edgesIgnoringSafeArea(.all)

            VStack {

                HStack {
                    Image(systemName: "party.popper.fill")
                        .font(.system(size: 100))
                        .foregroundColor(Color(red:redRatio, green: greenRatio, blue: blueRatio, opacity: opacity))
                        .scaledToFill()
                        .padding()

                    Image(systemName: "car.side.fill")
                        .font(.system(size: 100))
                        .foregroundColor(Color(red:redRatio, green: greenRatio, blue: blueRatio, opacity: opacity))
                          .scaledToFill()
                        .padding()
                }

                VStack {
                    AdjustView(parameterName: "Red", parameterColor: .red, parameterConst: 255.0, parameterUnit: " ", parameter: $redRatio)

                    AdjustView(parameterName: "Green",parameterColor: .green, parameterConst: 255.0, parameterUnit: " ", parameter: $greenRatio)

                    AdjustView(parameterName: "Blue", parameterColor: .blue, parameterConst: 255.0, parameterUnit: " ", parameter: $blueRatio)

                    AdjustView(parameterName: "Opacity", parameterColor: .purple, parameterConst: 100.0, parameterUnit: "%", parameter: $opacity)
                }
                .padding()

                Spacer()

                let adjust_color: Color = Color(red:redRatio, green: greenRatio, blue: blueRatio, opacity: opacity)

                Text("HEX : #\(adjust_color.hex)")
                    .font(.system(size:20))
                    .foregroundColor(.orange)
                    .padding()

                Button(action: {
                    withAnimation {
                        self.isPopupView_3.toggle()
                    }
                }, label: {
                    Text("Close")
                        .font(.title2)
                        .foregroundColor(.black)
                })
                .padding()
                
            }
        }
    }
}

#Preview {
    ColorSliderRGBView(isPopupView_3: .constant(false))
}
  • ZStack { Color(red: 0.03, green: 1.0, blue: 1.0, opacity: 0.2) ：メインメニューから呼び出されて、覆い被さるので、メインメニューと区別する為、画面の土台となる部分に水色を設定しています。
  • Image(systemName: “party.popper.fill“)：システムシンボル（SF Symbols）より、クラッカーのアイコンを設定しています。
  • .foregroundColor(Color(red:redRatio, green: greenRatio, blue: blueRatio, opacity: opacity))：アイコンの色を設定している部分です。Slider で色を調整すると同時に、こちらの設定でアイコンの色が変わります。
  • Image(systemName: “car.side.fill“)：システムシンボル（SF Symbols）より、自動車のアイコンを設定しています。
  • .foregroundColor(Color(red:redRatio, green: greenRatio, blue: blueRatio, opacity: opacity))：アイコンの色を設定している部分です。Slider で色を調整すると同時に、こちらの設定でアイコンの色が変わります。

 

こちらは、SF Symbols で、party.popper.fill のアイコンを表示した画面です。

 

こちらは、SF Symbols で、car.side.fill のアイコンを表示した画面です。

 


                VStack {
                    AdjustView(parameterName: "Red", parameterColor: .red, parameterConst: 255.0, parameterUnit: " ", parameter: $redRatio)

                    AdjustView(parameterName: "Green",parameterColor: .green, parameterConst: 255.0, parameterUnit: " ", parameter: $greenRatio)

                    AdjustView(parameterName: "Blue", parameterColor: .blue, parameterConst: 255.0, parameterUnit: " ", parameter: $blueRatio)

                    AdjustView(parameterName: "Opacity", parameterColor: .purple, parameterConst: 100.0, parameterUnit: "%", parameter: $opacity)
                }
                .padding()
  • AdjustView：下記で記載している共通スライダ（View）を呼び出しています。
  • parameterName：対象となるスライダの名称を設定しています。
  • parameterColor：対象となるスライダの色（Color）を設定しています。
  • parameterConst：対象となるスライダの倍率（定数）を設定しています。
  • parameterUnit：対象となるスライダの単位を設定しています。
  • parameter：対象となるスライダのswift内部で保持している値（割合）を設定しています。

 


                let adjust_color: Color = Color(red:redRatio, green: greenRatio, blue: blueRatio, opacity: opacity)

                Text("HEX : #\(adjust_color.hex)")
                    .font(.system(size:20))
                    .foregroundColor(.orange)
                    .padding()
  • let adjust_color: Color =：adjust_color（Color：拡張版）へ、スライダで調整した色（情報）を代入しています。
  • Text(“HEX : #\(adjust_color.hex)”)：ColorExtensions で拡張した16進数（HEX）表現を呼び出して、Textで表示しています。

 

AdjustView：共通スライダ

上記の ColorSliderRGBView で、スライダ機能を共通化しているので、

作成していきます。

 

Xcode の上部タブメニューより、File → New → File from Template を選択します。

 

SwiftUI View を選択します。

 

名称は、AdjustView を入力してみます。

 

Create ボタンを押して、AdjustView.swift を作成します。

 

ソース例：AdjustView、GeometryReader

AdjustView のソースを紹介します。


import SwiftUI

struct AdjustView: View {

    var parameterName: String
    var parameterColor: Color = .black
    var parameterConst: Double = 1.0
    var parameterUnit: String = ""

    @Binding var parameter: Double

    var body: some View {
        GeometryReader { geometry in

            VStack {
                HStack {
                    Text("\(parameterName) : \(parameter * parameterConst, specifier: "%.1f") \(parameterUnit)")
                        .foregroundColor(parameterColor)
                        .font(.system(size: 18))

                    Spacer()

                    Text("swift : \(parameter, specifier: "%.2f")")
                        .foregroundColor(Color.blue)
                        .font(.system(size: 18))

                }

                let geo_width: CGFloat = geometry.size.width

                Slider(value: $parameter, in: 0...1, step: 0.01)
                    .frame(width: geo_width * 0.9)
                    .accentColor(parameterColor)
            }
            .padding()
        }
    }
}

#Preview {
    AdjustView(parameterName: "Red", parameter: Binding.constant(0.5))
}
  • GeometryReader { geometry in：画面サイズを取得する為に、GeometryReader を利用しています。
  • Text(“\(parameterName) : \(parameter * parameterConst, specifier: “%.1f“) \(parameterUnit)”)：Slider の左上に、ColorSliderRGBView で設定した parameterName、parameter、 parameterConst、parameterUnit を取得して、Red : 21.2 のように値を小数点第一位まで表示しています。
  • Text(“swift : \(parameter, specifier: “%.2f“)”)：Slider の右上に、ColorSliderRGBView で設定した parameter を取得して、swift：0.20 のように値を小数点第二位まで表示しています。
  • let geo_width: CGFloat = geometry.size.width：GeometryReader で取得した画面サイズ（幅）をgeo_width に代入しています。
  • Slider(value: $parameter, in: 0…1, step: 0.01)：Sliderに、ColorSliderRGBView で設定した parameter を取得して、値に設定しています。Sliderの範囲は0～1、刻みは0.01の単位で設定しています。
  • Slider(…).frame(width: geo_width * 0.9)：Sliderの幅に、geo_width の0.9倍の長さに設定しています。
  • Slider(…).accentColor(parameterColor)：Sliderの左端からツマミまでの色に、ColorSliderRGBView で設定した parameterColor を取得して、設定しています。

 

Slider の幅に、GeometryReader を利用する事で、iPhone の多様な機種の大きさでも、

相対的に長さを合わせるので、とても便利です。

 

色（RGB）でスライダ調整する方法は、下記のサイトを参考にしています。

 

【SwiftUI】色の指定方法（Color）
（2023/11/04 更新） SwiftUIでの色の指定方法を解説します。 色の指定にはColor構造体を使用します。
capibara1969.com

 

アプリ実行：シミュレータ起動

では、実際にアプリを実行してみます。

Xcode の上部タブメニューより、Product → Run を選択するか、command + R を

押してみて下さい。

 

エラーが無ければ、iPhoneシミュレータが起動します。

 

ContntVeiw（メインメニュー）に追加した ColorSliderRGBViewボタンが

表示されている事が確認出来ました。

 

ColorSliderRGBView：起動画面

では、ColorSliderRGBViewボタンを押してみます（タップします）。

 

初期値で、クラッカーと自動車のアイコンの色（RGB）が赤で表示されています。

Red：255.0 / swift：1.00

Green：51.0 / swift：0.20

Blue：76.5 / swift：0.30

Opacity：100.0 % / swift：1.00

HEX：#FF334C

 

前回、作成したColorPickerView（色選択アプリ）と同様に、ContntVeiw（メインメニュー）

の上に ColorSliderRGBView（色スライダ調整アプリ） が重なって、表示された事が

確認出来たと思います。

 

ColorSliderRGBView：スライダ調整

では、実際にスライダを移動させて、色（RGB）を調整してみます。

 

スライダを移動させて、クラッカーと自動車のアイコンの色（RGB）が緑で表示されました。

Red：21.2 / swift：0.08

Green：204.6 / swift：0.80

Blue：122.8 / swift：0.48

Opacity：100.0 % / swift：1.00

HEX：#15CD7B

 

今度は、透明度も含めて、スライダを移動させて、別の色（RGB）を調整してみます。

 

 

スライダを移動させて、クラッカーと自動車のアイコンの色（RGB）が空色で表示されました。

Red：86.5 / swift：0.34

Green：126.8 / swift：0.50

Blue：246.2 / swift：0.97

Opacity：78.8 % / swift：0.79

HEX：#FF334C

 

まとめ

今回は、SwiftUIで、Slider を利用して、光の三原色（RGB）で色を調整する

アプリケーションを開発する記事を紹介しました。

 

次回は、SwiftUIで、Slider を利用して、色の三属性（HSB）で色を調整する

アプリケーションを開発する記事を紹介しようと思います。

 

コメント

タイトルとURLをコピーしました