質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

1回答

1169閲覧

swiftui geometryで取得した座標に基づいて処理を走らせたい

zakkiblog

総合スコア3

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

0クリップ

投稿2023/01/30 03:41

swiftuiのgeometryreaderについての質問です。

インスタのストーリーのような複数の画像が横に並びそれをスクロールしていく画面を作っています。
スクロール中の複数の画像から一つを選択した場合の処理は.onTapGestureなどを使えば書けるのですが、その画像が特定位置に来た時に処理を走らせる方法が分かりません。
具体的にはgeometryで取得したx座標がある特定の位置に達した時に処理を走らせたいです。

以下にコードを記載します。
geometry.frame(in: .global).origin.xの値が特定位置に達した時に、17行目のonTapGestureようにfocusnumberをその画像のindexに書き換えるという処理をしたいです。

geometry.frame(in: .global).origin.xでそれぞれの画像の座標がリアルタイムで取得できるのは20行目で確認済みです。

swiftui

1@State var focusNumber:Int = 1 2 3ScrollView(.horizontal, showsIndicators: false) {//横スクロール、選手写真 4 HStack(alignment: .center) { 5 ForEach(0..<image.count, id: \.self) { index in 6 GeometryReader { geometry in 7 Image(image[index]) 8 .resizable() 9 .scaledToFit()//縦横比維持 10 .overlay(RoundedRectangle(cornerRadius: 40)//写真の縁取り、枠を円にする 11 .stroke(colorChange[String(teamnumber[index])]!, lineWidth: 4))//チーム毎に色を変える 12 .frame(width: 80, height: 80) 13 .clipShape(Circle()) 14 .scaleEffect(max(1,-abs(self.magnification / self.halfScreenWidth * (geometry.frame(in: .global).midX - self.halfScreenWidth)) + self.magnification))//サイズの変更 15 .shadow(radius:10) 16 .onTapGesture{ 17 focusNumber = index 18 } 19 20 Text("x : \(geometry.frame(in: .global).origin.x), y : \(geometry.frame(in: .global).origin.y)") 21 22 23 }//geometry 24 .frame(width: 80, height: self.magnification * 80) 25 .padding() 26 }//foreach 27 }//hstack 28 }//横スクロールビュー 29 30

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ScrollView 直下の HStack の background で
このように処理してしまうのは如何でしょうか?

SwiftUI

1import SwiftUI 2 3struct ContentView: View { 4 @State var focusNumber:Int = 1 5 6 var body: some View { 7 Text("focusNumber : " + String(focusNumber)) 8 ScrollView(.horizontal, showsIndicators: false) {//横スクロール、選手写真 9 HStack(alignment: .center) { 10 ForEach(0..<10, id: \.self) { index in 11 GeometryReader { geometry in 12 Image(systemName: "pencil") 13 .resizable() 14 .scaledToFit()//縦横比維持 15 .onTapGesture{ 16 focusNumber = index 17 } 18 19 Text("x : \(geometry.frame(in: .global).origin.x), y : \(geometry.frame(in: .global).origin.y)") 20 }//geometry 21 .frame(width: 80, height: 80) 22 .padding() 23 }//foreach 24 }//hstack 25 .background( 26 GeometryReader { proxy -> Color in 27 DispatchQueue.main.async { 28 let pointX = -proxy.frame(in: .named("scroll")).origin.x 29 var target = Int(pointX / 80) 30 target = max(target, 0) 31 target = min(target, 10) 32 focusNumber = target 33 } 34 return Color.clear 35 } 36 ) 37 }//横スクロールビュー 38 } 39}

投稿2023/01/31 05:30

uniuni

総合スコア57

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zakkiblog

2023/01/31 18:10

なるほど、こんな方法があるのですね。 とても参考になりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問