読者です 読者をやめる 読者になる 読者になる

Swiftで遊ぼう! on Hatena

あしたさぬきblogでやってた初心者オヤジのiOSプログラミング奮闘記がHatenaに来ました

Swiftで遊ぼう! - 249 - UIViewの座標システム: iOS10

2016年11月17日:7、7 Plusをテーブルに加える*1

今日はUIViewで使用される座標システムを勉強しておこう。何度やっても忘れるので何度でも繰り返して覚えるしかない。

  • CGFloat

素人には意味が分からなかったけど、iOSフレームワークの開発過程の中で、UIViewの座標系を扱う型は、SwiftのDouble型でもFloat型でもなく、CGFloatを使わなければならない。ということは、SwiftのDouble型もしくはFloat型から変換(イニシャライザーを使って作る)してやらなければならない。APIのパラメータもCGFloat型なので間違えてDouble型を与えるとエラーになるので注意。

let cfg = CGFloat(aDouble)
  • CGPoint

単純なstruct型で2つのCGFloat型のプロパティ「x」と「y」を持ちます。

var point = CGPoint(x: 37.0, y: 55.2)
point.y -= 30
point.x += 20.0
  • CGSize

言わずと知れた大きさを表すCGFloat型のプロパティ「width」と「height」を持ちます。

var size = CGSize(width: 10.0, height: 50.5)
size.width += 43.5
size.height -= 76
  • CGRect

先ほどのCGPointとCGSizeをプロパティに持つStruct型で長方形の情報を持ちます。

struct CGRect {
    var origin: CGPoint
    var size: CGSize
}

let rect = CGRect(origin: aCGPont, size: aCGSize)

CGRectには数多くのプロパティやメソッドが用意されています。

var minX: CGFloat          // 左端
var midY: CGFloat          // 垂直方向の中点
intersects(CGRect) -> Bool // 交差部分があるかどうか?
intersect(CGRect)          // 交差させる
contains(CGPoint) -> Bool  // ポイントが含まれるかどうか?

ここまでがデータストラクチャで座標システムは次のエントリーのように考えます。

f:id:yataiblue:20150126142413j:plain

そして単位がピクセルではなくポイントという話もしました。

f:id:yataiblue:20161117110422j:plain
1ポイントのピクセル数を調べたいときはUIViewのプロパティ var contentScaleFactor: CGFloatを見ます。

UIViewのポジショニングのまとめ

superviewから見てUIViewの位置を決めるために「frame」と「center」を使います。

次のシェーマで説明します。ViewAがsuperviewの場合、実際はViewBのようにローテートされているケースはほとんどありませんが。これを見るとbounds.sizeframe.sizeが全く違うということが分かり易いと思います。
f:id:yataiblue:20150317170402j:plain

  • ViewBの 「bounds」はViewBの描画エリアを示していて 「 ( (0, 0), (200, 250) )」になります。
  • ViewBの 「frame」はViewA(スーパービュー)からみてViewBの描画エリアの範囲を示しているので「 ( (140, 65), (320, 320) )」になります。
  • ViewBの「center」は 「(300, 225)」ということになり、これはViewA(スーパービュー)からみたViewBの中心点です。
  • ViewB自身の中心は、「(bounds.midX, bounde.midY) = (100, 125)」ということです。

Scroll Viewを扱う場合は画面サイズより大きなイメージを扱うことになります。

yataiblue.hatenablog.com

ゲーム開発をするためにSKSpriteKitを使うならUIViewの派生クラスSKViewは異なる座標システムを持っています。

yataiblue.hatenablog.com


ということで今日はここまで。

*1:2015年12月5日改訂:テーブルを変更、2016年5月16日:少し整理