第5回 タップで値を設定できるようにする | SwiftUIでカラーピッカーを作る

SwiftUIでカラーピッカーを作るという連載記事です。今回はカラーピッカーのグラデーションビュー上をタップして、RGB値を設定できるようにするためのコードを実装します。

目次

SwiftUIでタップジェスチャーに対応するには

SwiftUIでタップジェスチャーに対応するには、onTapGestureモディファイアを使用します。onTapGestureモディファイアですが、引数違いのバリエーションがあります。iOS 16, iPadOS 16, macOS 13, watchOS 9.0でタップされた座標が渡されるモディファイアが追加されました。

例えば、次のコードは赤いビューの中でタップされた座標をラベルに表示します。

struct ContentView: View {
    @State private var tappedPoint = CGPoint()
    
    var body: some View {
        VStack {
            GeometryReader { geometry in
                Path { path in
                    path.addRect(CGRect(x: 0, y: 0, width: geometry.size.width, height: geometry.size.height))
                }
                .fill(.red)
            }
            .onTapGesture { point in
                tappedPoint = point
            }
            Text("Tapped: \(tappedPoint.x), \(tappedPoint.y)")
        }
        .padding()
    }
}
タップされた座標を表示する

座標から現在値計算する

座標から現在値を計算するコードを実装します。ColorPickerではPickerGradationViewの左端が0.0、右端が1.0なので、タップされた座標のX座標をPickerGradationViewの幅で割ればそのままチャネルの現在値になります。

Redチャネル用のコードは以下のようになります。

PickerGradationView(startColor: redStartColor, endColor: redEndColor)
	.frame(height: 100)
	.background {
		GeometryReader { geometry in
			Path { path in
				DispatchQueue.main.async {
					if geometry.size != redGradationViewSize {
						redGradationViewSize = geometry.size
					}
				}
			}
		}
	}
	.onTapGesture { point in
		channelValue.red = point.x / redGradationViewSize.width
	}

追加したのはonTapGestureモディファイアです。Greenチャネル、Blueチャネル用のコードも同様になります。

Xcode上のライブプレビューで実行した様子

コードのダウンロード

今回の記事で作成したコードのダウンロードはこちらです。

連載目次

著書紹介

Authored Books

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Akira Hayashi (林 晃)のアバター Akira Hayashi (林 晃) Representative(代表), Software Engineer(ソフトウェアエンジニア)

アールケー開発代表。Appleプラットフォーム向けの開発を専門としているソフトウェアエンジニア。ソフトウェアの受託開発、技術書執筆、技術指導・セミナー講師。note, Medium, LinkedIn
-
Representative of RK Kaihatsu. Software Engineer Specializing in Development for the Apple Platform. Specializing in contract software development, technical writing, and serving as a tech workshop lecturer. note, Medium, LinkedIn

目次