2015年4月12日日曜日

Core Animation Lesson.(Lesson1-4〜)

前回(Core Animation Lesson1(Lesson1-1〜)) から引き続きCALayerのプロパティについて調査しました。

contentsScaleプロパティ(CALayer)

本プロパティ値はレイヤ上の背景画像とView上のピクセルサイズ比率を定義するプロパティです。要するにRetinaディスプレイか否かを設定します。contentsScaleの値は通常のディスプレイで1.0を指し、Retinaディスプレイの場合は2.0となります。デフォルト値は1.0です。 この値は以下の様にUIScreenクラスから取得するのが一般的のようです。 

  1.     // set contentsScale to The Retina value
  2.     myView.layer.contentsScale = UIScreen.mainScreen().scale

但し、CALayerのcontentsGravityにfill/fit系の拡大縮小のオプションを指定している場合、contentsScaleの値意味を持たなくなるので、注意が必要です。

表. CALayerのcontentsScaleの値について
contentsScale 概要
1.0 1Pointが1Pixcelの通常ディスプレイを指す。
2.0 1Pointが2x2(4Pixcels)のRetinaディスプレイを指す。


下の表示イメージは同一画像をRetina/非Retinaで表示してみた例です。
図. Retinaディスプレイ[←左図](contentsScale=2.0)と
非Retinaディスプレイ[右図→](contentsScale=1.0)
masksToBoundsプロパティ(CALayer)

Viewよりも大きい画像はViewからはみ出して表示されてしまいますが、CALayerのmasksToBoundsプロパティを設定することで抑止できます。値はBool値でtrueが設定されるとマスクされます。また、このプロパティはUIViewのclipesToBindsプロパティと同等の機能となります。

図. masksToBounds=false

図. masksToBounds=true


以下、サンプルコードです。SegmentedControlボタンでcontentsScale, SwitchボタンでmasksToBoundsのオンオフを設定しています。 

  1. import UIKit
  2.  
  3. class Lesson1_4ViewController: UIViewController {
  4.  
  5.     @IBOutlet weak var myView: UIView!
  6.     @IBOutlet weak var mySegmentedControl: UISegmentedControl!
  7.     @IBOutlet weak var mySwitch: UISwitch!
  8.  
  9.     override func viewDidLoad() {
  10.         super.viewDidLoad()
  11.  
  12.         // Do any additional setup after loading the view.
  13.         
  14.         // image
  15.         let image = UIImage(named: "chess.png")
  16.         myView.layer.contents = image?.CGImage
  17.         myView.layer.contentsGravity = kCAGravityCenter
  18.         
  19.         // set default contentsScale to The Retina value
  20.         myView.layer.contentsScale = UIScreen.mainScreen().scale
  21.         // set default clip setting
  22.         myView.layer.masksToBounds = true
  23.         
  24.         // set action for segmented control
  25.         mySegmentedControl.addTarget(self, action: "segmentedValueChanged:", forControlEvents: UIControlEvents.ValueChanged)
  26.         // set action for switch
  27.         mySwitch.addTarget(self, action: "switchValueChanged:", forControlEvents: UIControlEvents.ValueChanged)
  28.         
  29.         // dump contentsScale
  30.         println("contentsScale : \(myView.layer.contentsScale)")
  31.         println("image Scale   : \(image?.scale)")
  32.         println("UIScreen scale: \(UIScreen.mainScreen().scale)")
  33.         
  34.     }
  35.  
  36.     override func didReceiveMemoryWarning() {
  37.         super.didReceiveMemoryWarning()
  38.         // Dispose of any resources that can be recreated.
  39.     }
  40.     
  41.     
  42.     func segmentedValueChanged(target: UISegmentedControl) {
  43.         if (target.selectedSegmentIndex == 0) {
  44.             myView.layer.contentsScale = 1.0
  45.             
  46.         } else {
  47.             myView.layer.contentsScale = 2.0
  48.             
  49.         }
  50.     }
  51.     
  52.     func switchValueChanged(target: UISwitch) {
  53.         if target.on {
  54.             myView.layer.masksToBounds = true
  55.         } else {
  56.             myView.layer.masksToBounds = false
  57.         }
  58.     }
  59. }
contentsRectプロパティ(CALayer)

指定された範囲をクリップするイメージですが、大きな画像ファイルに小さいイメージをパックする事で、小さいイメージを個々に読み込むより、大きなファイルを一回だけ読み込ませる方が読み込み時間、使用メモリ量のパフォーマンスに優れています。ゲームの様に小さな画像を多数使用する場合にメリットが大きい様です。また、contentsRectの単位はpoint単位では無くunit coordinate単位であることにも注意が必要です。

以下の図は、1枚の画像ファイルにAとBが横並びで描画されています。その画像ファイルを1回だけ読み込み、contentsRectプロパティを利用し元画像の必要な部分(AとB)をクリッピングし縦並びで表示しています。


以下、ソースコードですが、CALayerのcontentsには元画像を設定しcontentsRectプロパティにてそれぞれ必要な領域を指定しています。contentsRectはCGRect型で指定する値はUnitCoordinate単位となります。UnitCoordinate単位については後述します。 

  1. import UIKit
  2.  
  3. class Lesson1_5ViewController: UIViewController {
  4.  
  5.     @IBOutlet weak var viewA: UIView!
  6.     @IBOutlet weak var viewB: UIView!
  7.     
  8.     override func viewDidLoad() {
  9.         super.viewDidLoad()
  10.  
  11.         // Do any additional setup after loading the view.
  12.         // load image once.
  13.         let image = UIImage(named: "AB.png")
  14.         
  15.         // A
  16.         viewA.layer.contents = image?.CGImage
  17.         viewA.layer.contentsRect = CGRectMake(0, 0, 0.5, 1.0)
  18.         
  19.         // B
  20.         viewB.layer.contents = image?.CGImage
  21.         viewB.layer.contentsRect = CGRectMake(0.5, 0, 0.5, 1.0)
  22.         
  23.     }
  24.  
  25.     override func didReceiveMemoryWarning() {
  26.         super.didReceiveMemoryWarning()
  27.         // Dispose of any resources that can be recreated.
  28.     }
  29. }
Point, Unit単位について
表. Point, Unit単位について
Coordinate Type 概要
Point Pointは仮想的なPixelであり、デバイスの解像度によって変化する。通常デバイスでは1Pointが1Pixelとなるが、Retina Display では、2x2の計4Pixelsとなる。
Unit Unit単位は0.0〜1.0まで指定可能な比率で指定する便利な指定方法で、1.0が100%のサイズを意味している。比率で指定しているため、元の画像のサイズが変更されても再調整する必要が無いのが利点。

以下図はUnit単位を表しています。右下が最大値である(1, 1)を表し、中心点は(0,5, 0,5)となります。

図. Unit単位について
contentsCenterプロパティ(CALayer)

このプロパティは、プロパティ名から想像される機能と異なり、イメージの伸縮エリアについての設定が行われます。これは、インターフェースビルダーからも設定可能な値で、デフォルト値はUnit単位で(0,0,1,1)となり全域が一様に伸縮する設定となっています。contentCenterで指定した矩形の外側はそれぞれの位置により伸縮の方向が異なります。

以下のイメージを考えてみます。分かりやすいように方眼紙のようなマス目をが描かれているイメージを描画しています。この画像イメージにcontentsCenterプロパティを指定してみます。

図(↓)contentsCenterとして(0.25, 0.25, 0.5, 0.5)を指定しました。方眼紙のイメージで分かりやすいかと思ったのですが、全然分かり難いですね。良く見てみると分かりますが、方眼紙のマス目の高さや幅ががcontentsCenterで指定した矩形内と外で異なっていることに気づくと思います。

図(↓)contentsCenterで指定した矩形枠内と外での引き伸ばしについて、赤枠は縦横均等、緑は縦、青は横、黄色は無しとなっています。

contentsCenterはViewのプロパティとしてGUIからも設定可能です。

今回使用したサンプルプログラムはGithub上のCoreAnimationLessonに置いています。

投稿者 takuran 時刻: 1:24
ラベル: , , ,

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )