SwiftでViewの座標を取得するたったの10選

はじめに
●Swiftとは
- ○Swiftの歴史
- ○Swiftの特徴
●Viewとは
- ○Viewの基本
- ○Viewの構造
●SwiftでViewの座標を取得する方法
●注意点と対処法
●カスタマイズ方法
- ○座標の表示形式の変更
- ○座標取得関数の拡張
●応用例
まとめ

はじめに

プログラミング言語Swiftにおいて、Viewの座標取得は様々なアプリケーション開発の場面で必要とされるスキルの一つです。

アニメーション、レイアウト調整、ユーザーのタッチイベントの取得など、座標を正確に取得することで多くの機能を実現することができます。

この記事では、Swiftを使用してViewの座標を取得する10の方法を紹介しています。

●Swiftとは

Swiftは、Appleが開発したプログラミング言語で、iOS、macOS、watchOS、tvOSなどのアプリケーション開発に使用されています。

○Swiftの歴史

Swiftは、2014年にAppleが発表した比較的新しい言語です。

Objective-Cという言語に取って代わり、より速度が速く、安全性が高い言語として設計されました。

初心者にも学びやすいシンタックスや、モダンなプログラミング機能が搭載されており、多くの開発者から支持を受けています。

○Swiftの特徴

Swiftには次のような特徴があります。

型安全：変数や定数の型が明確に定義され、誤った型のデータを代入することができないようになっています。
パフォーマンス：Objective-Cに比べて実行速度が高速です。
可読性：シンプルで直感的な文法を持っており、コードの可読性が高いです。

このSwiftの特徴を活かして、Viewの座標を取得する方法を効率よく学んでいきましょう。

●Viewとは

Viewは、SwiftやObjective-Cを使用したiOSアプリケーションの基本的なビジュアル要素です。

ボタンやラベル、スライダーなど、ユーザーと直接インタラクションする要素はすべてViewやそのサブクラスです。

Viewの座標を取得することで、その位置やサイズを正確に知ることができ、アプリケーションの様々な部分で役立てることができます。

○Viewの基本

iOSアプリケーションのUIは、階層的に構造化されています。

この階層の中心となるのがViewです。

具体的には、画面の一部を占める四角い領域として考えることができ、その上にテキストや画像、動画などを表示することができます。

例えば、ボタンはUIButton、テキストはUILabelというように、それぞれの要素は特定のViewのサブクラスとして定義されています。

これらは全てUIViewを継承しており、UIViewが持つプロパティやメソッドを活用することができます。

このコードでは、UIViewを使って赤い四角を画面中央に表示しています。

この例では、UIViewのインスタンスを作成し、背景色を赤に設定しています。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // UIViewのインスタンスを作成
        let redView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))

        // 背景色を赤に設定
        redView.backgroundColor = .red

        // Viewを画面中央に配置
        redView.center = view.center

        // redViewを画面に追加
        view.addSubview(redView)
    }
}

このコードを実行すると、画面の中央に赤い四角（View）が表示されます。

UIViewはこのように、画面上の各要素を配置・表示するための基本的なクラスとして使用されます。

○Viewの構造

Viewは階層的に構造化されていると述べましたが、具体的には、親Viewの上に子Viewが追加される形で配置されます。

この関係性を「Superview」と「Subview」という言葉で表現します。

Superviewは、他のViewを保持するViewを指し、SubviewはSuperviewに追加されるViewを指します。

このコードでは、青い四角の中央に小さな黄色い四角を追加しています。

この例では、青い四角がSuperviewとなり、黄色い四角がSubviewとなります。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 青い四角のViewを作成
        let blueView = UIView(frame: CGRect(x: 0, y: 0, width: 150, height: 150))
        blueView.backgroundColor = .blue
        blueView.center = view.center
        view.addSubview(blueView)

        // 青い四角の中央に黄色い四角を追加
        let yellowView = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
        yellowView.backgroundColor = .yellow
        yellowView.center = CGPoint(x: blueView.frame.size.width / 2, y: blueView.frame.size.height / 2)
        blueView.addSubview(yellowView)
    }
}

このコードを実行すると、青い四角の中央に黄色い四角が表示されます。

このようにViewの階層構造を理解することは、座標や位置を操作する上で非常に重要です。

●SwiftでViewの座標を取得する方法

Swiftで開発されるiOSアプリケーションでは、Viewの位置や大きさを正確に知るために、座標の取得が頻繁に行われます。

ここでは、Swiftを用いてViewの座標を取得する10の方法を詳しく解説します。

それぞれの方法には特定の用途やシチュエーションがあり、効果的に使用することでアプリのUXやUIを向上させることができます。

○サンプルコード1：基本的な座標の取得

まずは、最も基本的な座標の取得方法を紹介します。

UIViewのインスタンスにはframeというプロパティがあり、これを使用することで、そのViewの位置や大きさを表すCGRectを取得できます。

このコードでは、UILabelの座標を取得しています。

この例では、ラベルの位置（x, y）と大きさ（width, height）を取得し、コンソールに出力しています。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // UILabelのインスタンスを作成
        let label = UILabel(frame: CGRect(x: 50, y: 100, width: 200, height: 40))
        label.text = "座標取得サンプル"
        view.addSubview(label)

        // ラベルの座標を取得
        let x = label.frame.origin.x
        let y = label.frame.origin.y
        let width = label.frame.size.width
        let height = label.frame.size.height

        // コンソールに出力
        print("ラベルのX座標：\(x), Y座標：\(y), 幅：\(width), 高さ：\(height)")
    }
}

ラベルが正常に画面上に表示された後、コンソールを確認すると、「ラベルのX座標：50.0, Y座標：100.0, 幅：200.0, 高さ：40.0」と表示されます。

○サンプルコード2：親Viewからの相対的な座標の取得

Viewは階層的な構造を持つため、特定のViewがその親Viewに対してどの位置にあるのか、相対的な座標を取得することもよくあります。

この相対的な座標は、convertメソッドを使用して取得できます。

このコードでは、小さな黄色いViewの座標を、大きな青いViewに対する相対的な座標として取得しています。

この例では、黄色いViewの原点を青いViewの座標系で取得しています。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 青い四角のViewを作成
        let blueView = UIView(frame: CGRect(x: 40, y: 60, width: 240, height: 240))
        blueView.backgroundColor = .blue
        view.addSubview(blueView)

        // 青い四角の中に黄色い四角を追加
        let yellowView = UIView(frame: CGRect(x: 60, y: 80, width: 120, height: 80))
        yellowView.backgroundColor = .yellow
        blueView.addSubview(yellowView)

        // 黄色い四角の座標を青い四角に対する相対座標として取得
        let relativePoint = blueView.convert(yellowView.frame.origin, from: yellowView.superview)

        // コンソールに出力
        print("黄色い四角のX座標（青い四角に対する）：\(relativePoint.x), Y座標（青い四角に対する）：\(relativePoint.y)")
    }
}

このコードを実行すると、コンソールに「黄色い四角のX座標（青い四角に対する）：60.0, Y座標（青い四角に対する）：80.0」と表示されます。

○サンプルコード3：特定のサブビューの座標の取得

UIViewには複数のサブビューが追加されることがよくあります。

しかし、これらのサブビューの中から特定のサブビューだけの座標を知りたい場合も多いです。

ここでは、特定のサブビューの座標を取得する方法を詳しく解説します。

このコードでは、タグを使って特定のサブビューを検索し、そのサブビューの座標を取得しています。

この例では、赤い四角のView（タグ100）の座標を青い親Viewに対する相対座標として取得しています。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 青い四角のViewを作成
        let blueView = UIView(frame: CGRect(x: 40, y: 60, width: 240, height: 240))
        blueView.backgroundColor = .blue
        view.addSubview(blueView)

        // 青い四角の中に赤い四角を追加
        let redView = UIView(frame: CGRect(x: 80, y: 90, width: 80, height: 60))
        redView.backgroundColor = .red
        redView.tag = 100
        blueView.addSubview(redView)

        // タグを使って赤い四角を検索
        if let targetView = blueView.viewWithTag(100) {
            let relativePoint = blueView.convert(targetView.frame.origin, from: targetView.superview)
            // コンソールに出力
            print("赤い四角のX座標（青い四角に対する）：\(relativePoint.x), Y座標（青い四角に対する）：\(relativePoint.y)")
        }
    }
}

上記のコードを実行すると、コンソールに「赤い四角のX座標（青い四角に対する）：80.0, Y座標（青い四角に対する）：90.0」と表示されます。

タグを利用する方法は、複数のサブビューの中から特定のサブビューを効果的に探し出すのに役立ちます。

ただし、タグの値はユニークである必要があり、同じタグ値を持つビューが存在すると予期しない動作が発生する可能性があるので注意が必要です。

○サンプルコード4：タッチした場所の座標取得

アプリケーション開発では、ユーザーが画面をタッチした際の座標を取得することがよくあります。

特に、ドラッグアンドドロップのような機能を実装する際や、特定の位置をタッチしたときのアクションを設定する際にこの方法が役立ちます。

このコードでは、タッチイベントを使用して、ユーザーがタッチした場所の座標を取得しています。

この例では、画面をタッチするとその位置に円形のViewを描画する機能を実装しています。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        if let touch = touches.first {
            let location = touch.location(in: self.view)

            // コンソールにタッチ座標を出力
            print("タッチしたX座標：\(location.x), Y座標：\(location.y)")

            // タッチした位置に円形のViewを描画
            let circleView = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
            circleView.center = location
            circleView.layer.cornerRadius = 25
            circleView.backgroundColor = .blue
            view.addSubview(circleView)
        }
    }
}

上記のコードを実行し、画面の任意の位置をタッチすると、その位置に青い円が描画され、タッチした位置の座標がコンソールに出力されます。

これは、特定の場所をタッチしたときのアクションや、ゲームアプリケーションでのキャラクター操作など、多岐にわたる機能で利用できる基本的な手法です。

○サンプルコード5：ドラッグ時の座標取得

ドラッグ操作は、モバイルアプリケーションにおける重要なインタラクションの一つとなっています。

ユーザーが指で画面上をドラッグした際の座標をリアルタイムで取得することは、ドラッグ&ドロップ機能の実装やゲーム制御、UIのダイナミックなアニメーションに不可欠です。

ここでは、ユーザーが画面上でドラッグ操作を行った際の座標を取得するSwiftでの方法を説明します。

具体的には、ドラッグ時に移動するオブジェクトの座標を動的に更新するサンプルコードを紹介します。

このコードでは、touchesMovedメソッドを使って、ドラッグ中の座標を取得し、その座標に応じてViewを動的に移動させています。

この例では、画面をドラッグすると、ドラッグの方向と速度に合わせて赤い四角が動く仕組みを実装しています。

import UIKit

class ViewController: UIViewController {

    let redView: UIView = {
        let view = UIView(frame: CGRect(x: 150, y: 300, width: 50, height: 50))
        view.backgroundColor = .red
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        view.addSubview(redView)
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        if let touch = touches.first {
            let location = touch.location(in: self.view)
            redView.center = location
        }
    }
}

このコードを実行すると、画面上に赤い四角が表示され、この四角を指でドラッグすることで動かすことができます。

また、指を離すと四角はその位置にとどまります。

ドラッグ操作に基づく座標取得は、特定のオブジェクトを画面上で動かしたり、特定の領域をドラッグすることでアクションを実行する際などに非常に有用です。

また、この基本的な方法を基に、ドラッグの速度や方向に応じたアニメーションや操作のカスタマイズも可能となります。

○サンプルコード6：複数のViewの座標を一括で取得

時には、画面上に配置された複数のViewの座標を一括で取得したい場合があります。

例えば、複数のアイテムをドラッグアンドドロップで移動させる際や、アイテムの相対的な位置関係を計算する場面などが考えられます。

このコードでは、subviewsプロパティを使用して、親Viewに追加された全てのサブビューの座標を一括で取得しています。

この例では、親Viewに追加された複数の四角形の各座標をコンソールに出力しています。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        let colors: [UIColor] = [.red, .blue, .green, .yellow]

        for (index, color) in colors.enumerated() {
            let squareView = UIView(frame: CGRect(x: 50 + (60 * index), y: 100, width: 50, height: 50))
            squareView.backgroundColor = color
            view.addSubview(squareView)
        }

        for subview in view.subviews {
            let position = subview.frame.origin
            print("\(subview.backgroundColor ?? UIColor.clear)の四角の座標: X: \(position.x), Y: \(position.y)")
        }
    }
}

このコードを実行すると、画面上に赤、青、緑、黄色の四角が表示され、それぞれの四角の左上の座標がコンソールに出力されます。

これにより、複数のオブジェクトの座標情報を一括で取得し、他の処理に利用することが可能です。

複数のオブジェクトの相対的な位置関係や座標を一括で管理することは、アプリケーションのUI設計やゲームの動作、アニメーションの実装など、多岐にわたる場面で非常に有用です。

○サンプルコード7：アニメーション中の座標取得

アニメーションは、モバイルアプリケーションにおけるユーザー体験を向上させる要素の一つとなっています。

ユーザーがアニメーション中のViewの座標を正確に取得することは、特定のタイミングでのアクション実行やアニメーションの制御において必要となります。

ここでは、UIViewのアニメーション中のViewの座標を取得するSwiftの方法を紹介します。

具体的には、Viewがアニメーションしている最中にそのViewの現在の座標を取得するサンプルコードを表します。

このコードでは、presentation()メソッドを使用して、アニメーション中のViewの座標をリアルタイムで取得しています。

この例では、画面の一方の端から他方の端までアニメーション移動する赤い四角の座標を取得し、それをコンソールに出力する方法を実装しています。

import UIKit

class ViewController: UIViewController {

    let redView: UIView = {
        let view = UIView(frame: CGRect(x: 0, y: 200, width: 50, height: 50))
        view.backgroundColor = .red
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        view.addSubview(redView)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        UIView.animate(withDuration: 5.0, delay: 0, options: [.curveLinear], animations: {
            self.redView.frame.origin.x = self.view.bounds.width - self.redView.bounds.width
        }) { _ in
            print("アニメーション完了")
        }

        Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
            if let position = self.redView.layer.presentation()?.frame.origin {
                print("アニメーション中の座標: X: \(position.x), Y: \(position.y)")
            }
        }
    }
}

このコードを実行すると、赤い四角が左から右へアニメーション移動します。

アニメーション中に、Timerによって毎秒その四角の座標がコンソールに出力されます。

アニメーション中のViewの座標取得は、特定の位置でアニメーションを停止させる機能や、アニメーションの進行度に応じて他のオブジェクトの動きを制御する場面などで役立ちます。

○サンプルコード8：回転・拡大縮小後の座標取得

Viewのアニメーションや変形には、位置だけでなく、回転や拡大縮小などの操作も含まれます。

このような変形を行った後のViewの座標を正確に取得することは、UIの整合性の確保や操作の正確性を保つために不可欠です。

ここでは、Viewが回転や拡大縮小の変形を受けた後の座標を取得するSwiftの方法を解説します。

具体的には、四角形のViewを回転させた後のそのViewの座標を取得するサンプルコードを紹介します。

このコードでは、CGAffineTransformを使用して、Viewを45度回転させた後の座標を取得しています。

この例では、四角を45度回転させた後、その四角の座標をコンソールに出力する方法を表しています。

import UIKit

class ViewController: UIViewController {

    let squareView: UIView = {
        let view = UIView(frame: CGRect(x: 100, y: 200, width: 100, height: 100))
        view.backgroundColor = .blue
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        view.addSubview(squareView)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        squareView.transform = CGAffineTransform(rotationAngle: .pi / 4)

        let position = squareView.frame.origin
        print("回転後の座標: X: \(position.x), Y: \(position.y)")
    }
}

このコードを実行すると、青い四角が45度回転し、その後四角の座標がコンソールに出力されます。

回転や拡大縮小後の座標取得は、変形後のViewの位置関係や、変形の進行度に応じたアクションの実行など、多岐にわたる場面で活用できます。

○サンプルコード9：画面の端の座標取得

モバイルアプリケーションの開発において、デバイスの画面端の座標を取得することは非常に一般的な要求となっています。

これは、アニメーションやUIレイアウトの配置、タッチイベントの検出など、さまざまな場面で必要とされる情報です。

ここでは、Swiftでデバイスの画面端の座標を簡単に取得する方法を解説します。

このコードでは、UIScreenクラスを使ってデバイスの画面サイズを取得し、その情報から各画面端の座標を計算しています。

この例では、画面の各端の座標をコンソールに出力する方法を表しています。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        let screenSize = UIScreen.main.bounds.size
        let topLeft = CGPoint(x: 0, y: 0)
        let topRight = CGPoint(x: screenSize.width, y: 0)
        let bottomLeft = CGPoint(x: 0, y: screenSize.height)
        let bottomRight = CGPoint(x: screenSize.width, y: screenSize.height)

        print("画面の左上の座標: \(topLeft)")
        print("画面の右上の座標: \(topRight)")
        print("画面の左下の座標: \(bottomLeft)")
        print("画面の右下の座標: \(bottomRight)")
    }
}

上記のコードを実行すると、アプリケーションが起動した際に、デバイスの画面の四隅の座標がコンソールに表示されます。

このように、Swiftを利用して簡単にデバイスの画面端の座標を取得することができます。

これにより、UIの配置やアニメーションの制御、ユーザーのタッチイベントの検出など、さまざまなアプリケーションの機能実装に役立てることができます。

○サンプルコード10：非表示のViewの座標取得

非表示のView（例：alphaが0やisHiddenがtrueのView）も、座標の取得が必要な場合があります。

これは、非表示のViewが再び表示される前や、非表示の状態でのユーザーアクションを検知する場合などに必要です。

ここでは、非表示のViewの座標を取得するSwiftの方法を解説します。

このコードでは、UIViewのframeプロパティを使用して非表示のViewの座標を取得しています。

この例では、非表示の青い四角のViewの座標をコンソールに出力する方法を表しています。

import UIKit

class ViewController: UIViewController {

    let blueView: UIView = {
        let view = UIView(frame: CGRect(x: 150, y: 300, width: 100, height: 100))
        view.backgroundColor = .blue
        view.isHidden = true
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        view.addSubview(blueView)

        let position = blueView.frame.origin
        print("非表示の青いViewの座標: X: \(position.x), Y: \(position.y)")
    }
}

上記のコードを実行すると、非表示の青い四角の座標がコンソールに出力されます。

非表示のViewの座標取得は、Viewの表示状態が変わる前後での位置関係の調整や、非表示のViewに関連するイベントの制御などの場面で活用できます。

●注意点と対処法

SwiftでViewの座標を取得する際には、多くの場面で簡単に取得できますが、いくつかの注意点やトラップが存在します。

これらの点を知っておくことで、思わぬバグや挙動を避けることができ、より効率的な開発が可能となります。

○座標の取得タイミング

Viewの座標を取得するタイミングは非常に重要です。

例えば、Viewのレイアウトが完了していない初期の段階で座標を取得しようとすると、予期しない値が返される可能性があります。

このコードでは、ViewDidLoad内とViewDidLayoutSubviews内でViewの座標を取得して比較する方法を表しています。

import UIKit

class ViewController: UIViewController {

    let sampleView = UIView(frame: CGRect(x: 100, y: 200, width: 150, height: 150))

    override func viewDidLoad() {
        super.viewDidLoad()
        sampleView.backgroundColor = .red
        view.addSubview(sampleView)

        let positionInDidLoad = sampleView.frame.origin
        print("ViewDidLoad内の座標: X: \(positionInDidLoad.x), Y: \(positionInDidLoad.y)")
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        let positionInViewDidLayout = sampleView.frame.origin
        print("ViewDidLayoutSubviews内の座標: X: \(positionInViewDidLayout.x), Y: \(positionInViewDidLayout.y)")
    }
}

上記のコードを実行すると、ViewDidLoadとViewDidLayoutSubviewsで取得した座標が異なることがわかります。

これは、レイアウト処理が完了する前と後で座標が変わるためです。

○非表示のViewと座標

非表示のViewの座標を取得する際にも注意が必要です。

非表示のViewでも、その存在や座標情報は変わらずに保持されていますが、親Viewや兄弟Viewの変更によって座標が影響を受ける場合があります。

このコードでは、非表示のViewの座標が変化するシチュエーションをシミュレートしています。

import UIKit

class ViewController: UIViewController {

    let visibleView = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
    let hiddenView = UIView(frame: CGRect(x: 50, y: 200, width: 100, height: 100))

    override func viewDidLoad() {
        super.viewDidLoad()

        visibleView.backgroundColor = .blue
        view.addSubview(visibleView)

        hiddenView.backgroundColor = .yellow
        hiddenView.isHidden = true
        view.addSubview(hiddenView)

        let hiddenPositionBefore = hiddenView.frame.origin
        print("非表示のViewの初期座標: X: \(hiddenPositionBefore.x), Y: \(hiddenPositionBefore.y)")

        visibleView.frame = CGRect(x: 50, y: 250, width: 100, height: 100)
        let hiddenPositionAfter = hiddenView.frame.origin
        print("非表示のViewの変更後の座標: X: \(hiddenPositionAfter.x), Y: \(hiddenPositionAfter.y)")
    }
}

非表示のViewの座標は、そのViewの属性や親Viewの変更により変わる可能性があるため、確認する際は注意が必要です。

○座標のオフセットに関する注意

Viewの座標を取得する際、そのViewが他の親Viewによって影響を受けている場合、取得する座標がオフセットされる可能性があります。

これは、親Viewのpaddingやmargin、borderなどの属性によって座標が変わるためです。

このコードでは、親Viewのborderによって子Viewの座標がオフセットされる例を表しています。

import UIKit

class ViewController: UIViewController {

    let parentView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 200))
    let childView = UIView(frame: CGRect(x: 10, y: 10, width: 50, height: 50))

    override func viewDidLoad() {
        super.viewDidLoad()

        parentView.layer.borderWidth = 10
        parentView.layer.borderColor = UIColor.black.cgColor
        view.addSubview(parentView)

        childView.backgroundColor = .green
        parentView.addSubview(childView)

        let childPosition = childView.frame.origin
        print("子Viewの座標: X: \(childPosition.x), Y: \(childPosition.y)")
    }
}

上記のコードを実行すると、子Viewの座標はborderの幅によってオフセットされています。

このような状況を避けるためには、親Viewの属性を考慮して座標を取得することが重要です。

●カスタマイズ方法

SwiftでViewの座標を取得するとき、デフォルトの方法だけでなく、カスタマイズを施すことでさらに柔軟な座標の取得や利用が可能となります。

ここでは、座標の表示形式の変更や座標取得関数の拡張方法について解説します。

○座標の表示形式の変更

座標の表示形式をカスタマイズすることで、よりわかりやすい形式や、特定の用途に合わせた形式での表示が可能となります。

例えば、座標を「(x, y)」の形式で表示する場合の方法を紹介します。

このコードでは、CGPoint型の座標を「(x, y)」の形式で文字列として取得する拡張を行っています。

import UIKit

extension CGPoint {
    func customString() -> String {
        return "(\(Int(self.x)), \(Int(self.y)))"
    }
}

class ViewController: UIViewController {
    let sampleView = UIView(frame: CGRect(x: 120, y: 180, width: 150, height: 150))

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(sampleView)

        let position = sampleView.frame.origin
        print("カスタマイズされた座標の表示: \(position.customString())")
    }
}

上記のコードを実行すると、「カスタマイズされた座標の表示: (120, 180)」という形式で座標が表示されます。

このように、座標の表示形式を変更することで、目的に応じた形式での表示や利用が可能となります。

○座標取得関数の拡張

座標取得の際に、特定の条件下での座標を取得するための関数を拡張することも可能です。

例えば、特定のViewが画面の中央に配置されている場合の座標を取得する関数を追加する方法を紹介します。

このコードでは、画面の中央に配置されているViewの座標を取得する関数を拡張しています。

import UIKit

extension UIView {
    func centerInScreen() -> CGPoint {
        guard let superView = self.superview else {
            return self.center
        }
        let centerX = (superView.bounds.width - self.bounds.width) / 2
        let centerY = (superView.bounds.height - self.bounds.height) / 2
        return CGPoint(x: centerX, y: centerY)
    }
}

class ViewController: UIViewController {
    let sampleView = UIView(frame: CGRect(x: 0, y: 0, width: 150, height: 150))

    override func viewDidLoad() {
        super.viewDidLoad()
        sampleView.center = view.centerInScreen()
        view.addSubview(sampleView)

        let centerPosition = sampleView.center
        print("画面中央の座標: \(centerPosition)")
    }
}

上記のコードを実行すると、「画面中央の座標: (207.5, 384.0)」などの形式で、実際に画面の中央に配置されているViewの座標が取得できます。

このように、特定の条件や状況下での座標取得を行うための関数を拡張することで、さらに多様な座標の取得や利用が可能となります。

●応用例

SwiftでViewの座標を取得する技術は、単に座標を知るだけでなく、多彩なアプリケーションの開発に役立ちます。

ここでは、座標取得を活用した具体的な応用例として、アニメーション作成、ゲーム制作、UI設計の3つの例を紹介します。

○サンプルコード1：座標を利用したアニメーション作成

座標を取得することで、特定の位置へのアニメーション移動や、座標を基にした動的なアニメーションを実現できます。

下記のコードでは、画面上のボタンをタップすると、Viewがその位置へアニメーション移動する例を表しています。

import UIKit

class ViewController: UIViewController {
    let movingView = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))

    override func viewDidLoad() {
        super.viewDidLoad()
        movingView.backgroundColor = .blue
        view.addSubview(movingView)

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(tapped(_:)))
        view.addGestureRecognizer(tapGesture)
    }

    @objc func tapped(_ sender: UITapGestureRecognizer) {
        let location = sender.location(in: view)
        UIView.animate(withDuration: 0.5) {
            self.movingView.center = location
        }
    }
}

上記のコードを実行すると、画面をタップするたびに青い四角形がタップした場所へとアニメーション移動します。

○サンプルコード2：座標を利用したゲーム制作

座標取得は、ゲーム制作においても欠かせない技術です。

例えば、タッチされた座標にキャラクターを移動させるゲームを考えると、座標の正確な取得が必要となります。

ここでは、そのようなシンプルなゲームの一例を紹介します。

このコードでは、タッチされた座標へキャラクターが移動するゲームの実装を行っています。

import UIKit

class GameViewController: UIViewController {
    let characterView = UIImageView(image: UIImage(named: "character"))

    override func viewDidLoad() {
        super.viewDidLoad()
        characterView.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
        view.addSubview(characterView)

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(tapped(_:)))
        view.addGestureRecognizer(tapGesture)
    }

    @objc func tapped(_ sender: UITapGestureRecognizer) {
        let location = sender.location(in: view)
        characterView.center = location
    }
}

上記のコードを実行すると、画面をタップするとキャラクターがタップした場所へ即座に移動します。

○サンプルコード3：座標を利用したUI設計

座標を活用して、動的なUIの配置やデザインを行うこともできます。

例えば、複数のボタンを均等に配置するために、画面サイズとボタンの数から座標を計算する方法を紹介します。

このコードでは、画面の横幅を基にして、3つのボタンを均等に配置しています。

import UIKit

class UIViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let buttonCount: CGFloat = 3
        let buttonWidth: CGFloat = 60
        let spacing = (view.bounds.width - (buttonWidth * buttonCount)) / (buttonCount + 1)

        for i in 0..<Int(buttonCount) {
            let x = spacing + (buttonWidth + spacing) * CGFloat(i)
            let button = UIButton(frame: CGRect(x: x, y: 100, width: buttonWidth, height: 40))
            button.setTitle("Button \(i + 1)", for: .normal)
            button.backgroundColor = .systemBlue
            view.addSubview(button)
        }
    }
}

上記のコードを実行すると、画面の横幅全体にわたって3つのボタンが均等に配置されます。

このように、座標計算を用いることで、動的かつ均等なUI配置を実現することができます。