異なる階層の View の座標を取得しよう #Swift

今回も初学者向けに階層の異なる特定の View の座標を取得したい時に使用する convert() 関数の使い方を簡単に紹介したいと思います。

実際に使ってみる👨‍💻

下記のような階層の View を参考に convert() メソッドを使って見て座標を取得してみます。

緑色からみた黄色

これは、そもそも緑色の View の中に 黄色の View が含まれている(addSubView()されている)ので、黄色の View の Frame を取得すれば座標が分かります。

let greenToYellowRect = yellowView.frame
print(greenToYellowRect.toString) // (x: 19.0, y: 38.5)

また、toString というプロパティは下記のように CGRect の Extension プロパティとして追加すると独自に値を取得するためのプロパティを追加することができるようになります🙃 特に iOS 開発ではこの Extension 記法は頻繁に使用するので、どんどん書いて使い方をマスターしましょう！

extension CGRect {
    var toString: String {
        return "(x: \(self.origin.x), y: \(self.origin.y))"
    }
}

赤色からみた黄色

次に、赤色の View から見た黄色の View の座標を取得していきましょう。先ほどと同じように frame を使って座標を取得したいところですが、今回は赤色から見た黄色の座標を取得したいので、frame で取得してしまうと緑色から見た黄色になってしまうので気をつけましょう。

それでは早速、convert()メソッドを使って赤色から見た黄色の座標を取得してみます。

let redToYellowRect = greenView.convert(yellowView.frame, to: redView)
print(redToYellowRect.toString) // (x: 94.5, y: 146.0)

それぞれの View の指定方法は、最後のセクションにまとめてあります。

白色からみた黄色

次に、白色の View からみた黄色の View の座標を取得していきます。コードは下記のようになります。

let whiteToYellowRect = greenView.convert(yellowView.frame, to: self.view)
print(whiteToYellowRect.toString) // (x: 181.5, y: 315.0)

それぞれの View からみた黄色の View の正しい座標が取れるようになりました🎉

まとめ

convert() メソッドは、どこにどの View を指定するのか忘れがちなので下記のように覚えておくと便利です。

`convert(to:)` の場合

let redToYellowRect = 座標を知りたいViewの親View.convert(座標を知りたいView.frame, to: 座標変換の基準となるView)

`convert(from:)` の場合

let redToYellowRect = 座標変換の基準となるView.convert(座標を知りたいView.frame, from: 座標を知りたいViewの親View)

異なる階層の View の座標を取得しよう