SwiftUIのビューには、明度・彩度・コントラストを設定することができるモディファイアが揃っており、設定値をSliderビューにバインドすることで、簡単に画像加工アプリを作ることができる。

今回、画像加工アプリのサンプルをたったの50行程度のコードで実装することができたので、モディファイアの説明を含めて解説していく。

完成したアプリ

完成したアプリがこちら。

初期配置した画像の明度・彩度・コントラストを調整するスライダーを用意し、また調整した値をクリアし「元に戻す」ボタンも用意した。

サンプルコード

それではまず、作成したアプリのコード全文を載せておく。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
struct ContentView: View {
    @State var brightness = 0.0
    @State var satur = 1.0
    @State var contrast = 1.0
     
    private func clear() {
        self.brightness = 0.0
        self.satur = 1.0
        self.contrast = 1.0
    }
     
    var body: some View {
        VStack {
            Image("pasta")
                .resizable()
                .scaledToFit()
                .padding(.bottom)
                .brightness(brightness)
                .saturation(satur)
                .contrast(contrast)
             
            VStack(alignment: .leading) {
                Text("明度\(brightness)")
                Slider(value: $brightness, in: -0.5...0.5)
            }.padding()
             
            VStack(alignment: .leading) {
                Text("彩度\(satur)")
                Slider(value: $satur, in: 0...2)
            }.padding()
             
            VStack(alignment: .leading) {
                Text("コントラスト\(contrast)")
                Slider(value: $contrast, in: 0.5...2)
            }.padding()
             
            Button(action: {
                self.clear()
            }) {
                Text("元に戻す")
            }
        }
    }
}

はじめに定義する3つの状態変数は、それぞれ明度・彩度・コントラストを表す。

また、別途定義しているclear()関数は「元に戻す」ボタンを押した時に実行する関数だ。

14行目でImageビューを表示させ、明度を調整するbrightnessモディファイア、彩度を調整するsaturationモディファイア、コントラストを調整するcontrastモディファイアに対し、それぞれ状態変数を渡している。

あとは、Sliderビューに状態変数をバインドするだけで、スライダーの動きに合わせて画像が加工されるようになる。