iOSのUIViewとCGRect関数色々図解まとめ

 プログラミング  Comments Off on iOSのUIViewとCGRect関数色々図解まとめ
Oct 092012
 

CGRectを使うときはframeやboundsを使う事となる。frameやboundsにはsizeとoriginがある。CGRectにはサイズや位置関係を判定・操作する便利な関数が元々備わっている。その関数機能の図解PDFの紹介。

iOSのUIViewのframeとboundsの関係、CGRect便利関数の図解チートシート(cheatsheet)のPDF。A4で印刷するとちょうどいいです。

ダウンロード(PDFファイル)は以下。

iOS CGRect図解PDF

今回は前記事(iPhoneのScreenやNavigationBarやTabbarやToolBarの高さ)の第二弾です。

いずれも無償でのPDFダウンロード及び、コピー印刷改変は自由です。

参考サイト

http://soulwithmobiletechnology.blogspot.jp/2011/08/how-to-divide-cgrect-using-cgrectdivide.html

 Posted by at 19:03
Oct 072012
 

UIViewと描画に関する一連のまとめ。setNeedsDisplayとdrawRectの関係、CALayer(CoreLayer)とdrawInContextの関係、setNeedsLayoutとlayoutSublayersの利用法。動作の流れの図解。

UIViewの描画の図解

UIViewの描画メソッドのまとめ記事である前回記事の図解による再まとめである。

UIViewControllerにUIViewが一つホストされている状態。そしてさらにLayerが入れ子になっている状態。以下は図中のUIViewとCALayer(subviews/sublayers)構造の概要。

  • controller(UIViewController)
    • view(self.viewであり、UIViewのインスタンス)
      • view(self.subviewsの中の一個、ユーザが貼付けた)
      • layer(self.layerであり、UIViewには必ず一個は存在する、システムが用意したlayer)
        • layer(ユーザが貼付けたレイヤー)
        • layer(ユーザが貼付けたレイヤー)
        • layer(ユーザが貼付けたレイヤー)

基本のセットはレイヤーもビューも同じである。

  • UIViewには描画を行うメソッドと再配置を行うメソッドがある。
  • CALayerには描画を行うメソッドと再配置を行うメソッドがある。
一般的に海外の開発者情報を集約していくと出来る限り再描画をしない事がパフォーマンス向上につながるという結論。描画の回数を減らし、描画範囲を減らしというイメージ。再配置と再描画は異なる。

時系列で追う描画メソッドの流れ

drawRectは描画メソッドであり、UIViewの再描画を行う。

通常UIView全体を再描画する為に使うが、描画高速化を睨んだ場合は、子のlayerやviewに細分化し、サイズ変更するオブジェクト(表示要素)を小さい単位で管理し、必要最低限のFrameサイズ変更、UIViewやCALayerの新たな追加や削除、CALayer内での再描画になるようにするのが望ましい。

つまりUIViewControllerが管理するUIView(self.viewに該当)のdrawRectで単一のviewで単一のlayerで構成されている状態で再描画を行うと画面全体が常に描画となる。背景が一切変化しないならUIView(self.view)に描画し、位置が変更出来るものはsublayerとして描画しておき、位置変更はlayerの再配置で行うという方法。

例えば、PCのDesktopの背景はUIView(self.view)のdrawRectで起動時に一度だけ描画(setNeedsDisplay)をする。DesktopのアイコンはサブレイヤーのCALayer(layer)で管理(addSublayer:)をする。layerのdrawInContextでアイコンの絵面を描画(setNeedsDisplay)する。位置変更はlayoutSublayersで行うようにしておく。アイコンのサムネが変化した時にはUIView(self.view)のdrawRectを呼ぶのではなく、そのサブレイヤー(self.view.sublayersの中の特定した一つ)のレイヤーの再描画メソッド(setNeedsDisplay)を呼ぶという流れ。

 

 

 Posted by at 07:17