scrollviewのスナップ機能の実装

Question

scroll viewを使って、真ん中の透明なimageを枠と見立てて、スクロールが終わると近い方の白いImageが真ん中の枠の中に収まるようなスナップ機能を実装しようと思っています。

ここで、
①真ん中のImageの位置の取得
②二つのImageのどちらが真ん中の枠に近いかの判定

の方法がわかりません。

https://qiita.com/TakafumiFukuyo/items/9cb37044f388a81cd841

このサイトを参考に実装してみようとしましたが、現在のpage数の取得、targetpositionをどう取得しているのかいまいちわかりませんでした。
拙い説明で申し訳ありません。どなたかご教授お願いします。

Answer 1

まずスクロールの位置は「0〜1」を取ります。
横スクロールの場合、「0」なら一番左、「0.5」なら真ん中、「1」なら一番右です。（※設定により逆にも出来る）

「白いImageがスクロール内のどの位置にあるのか」がまず必要な情報です。
例えば１番目のImageの位置をa、２番目の位置をbとした場合、
「a-現在地」と「b-現在地」の絶対値を比較して小さい方が「近い」ので、
近い方のaまたはbを目標地点とすれば良い、となります。

（リンク先コードは「スクロール領域をｎ分割する」ことが前提なので、UpdateやUpdateIndexで何やってるか見るだけでいいかと。「hPerPage：分割した時の領域サイズ」「hIndex：現在のページ数」です）

Comments

[Piesuke]

回答ありがとうございます。
「現在地」の定義と、その取得方法を考えても出なかったので、その方法をご教授しただけたら幸いです。

[sakura_hana]

考えても出てきません。リファレンスを見てください。
https://docs.unity3d.com/ja/current/ScriptReference/UI.ScrollRect.html

normalizedPositionがスクロール位置＝現在地を示します。
今回は水平方向だけ必要なのでhorizontalNormalizedPositionでもいいでしょう。

これは0〜1を取る値なので、Imageの位置も0〜1となるように計算が必要です。
例えばスクロール領域の幅が100として、ImageのX値が10だとしたら、
10 / 100 = 0.1 がImageのスクロール内での位置になります。

[Piesuke]

上記についてですが、contentがscrollviewからはみ出ているので、horizontalNormalizedPosition = 現在地と出来ないと思ったのですが、どうででしょうか？
知識不足ですいません！

[sakura_hana]

スクロール領域の幅＝contentの幅
ImageのX値＝content（親）に対するローカル座標
現在地（horizontalNormalizedPosition）＝contentの幅に対する割合
これをベースにしつつ、ズレが必要ならそれも考慮した計算式にすれば幾らでも計算出来ると思いますが。

[Piesuke]

色々やってたら出来ました！ありがとうございます！