Objective-CでPDFViewer ４回目

Objective-CでPDFViewer 4回目

Objective-Cを使用してちょっとしたアプリケーションを作成してみようということでPDFViewerを作成しています。
前回はModelControllerについてみましたので今回は
DataViewControllerを見ていこうと思ったのですが、単純にPDFを表示させるだけなら第1回で作成したクラスをそのまま使用するだけとなり、
今のところあまり処理がないため今後使用することになるCALayerについて取り上げたいと思います。

CALayer

CALayerというのは画面にイメージを表示したりアニメーションさせたりしたい場合などに使用できるクラスです。
このクラスを使用すると単に画像を表示させるだけではなく、角を丸めたり影を落としたり、動きをつけることなどができます。
ただいろいろイメージの表示に関してできるからといってUIImageView等を使用して行っていた内容をすべてCALayerに
置き換えることができるかというとそうではありません。
CALayerではクリックイベントがキャッチできません。そのため何か画面上の画像をクリックして画面を遷移させるといった
処理をしたい場合、そのままでは使用できず、自身でクリックの判定処理などを実装する必要がでてきます。
用途に合わせて使い分けるといった感じになると思います。

CALayerの使用

背景色の変更

では実際にCALayerを使用してみましょう。
ためしにUIViewが一つだけ表示されているようなプロジェクトを作成してください。
UIViewが最初から持っているCALayerを少し操作してみましょう。

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //RootLayerを取得
    CALayer *baseLayer = self.view.layer;
    //背景色をシアンに設定
    baseLayer.backgroundColor = [UIColor cyanColor].CGColor;


　　// Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

UIViewは最初からCALayerを一つ持っていてそれを取得しそのあと背景色をシアンに変更しています。
実行してみましょう。

画面の背景色がシアンになっていますね。
これだけでは面白くないのでさらにレイヤーを作成して追加してみましょう。

サブレイヤーの追加

CALayerには子レイヤーを追加することができます。先ほどのコードに付け加えます。

 for(int i = 0; i < 4; i++){
        CALayer *subLayer = [CALayer layer];
        subLayer.frame = CGRectMake(self.view.bounds.size.width/5 * ((i % 2) * 2 + 1),
                                    self.view.bounds.size.height/5 * ((i / 2) * 2 + 1),
                                    self.view.bounds.size.width/5,
                                    self.view.bounds.size.height/5);
        subLayer.backgroundColor = [UIColor whiteColor].CGColor;
        [baseLayer addSublayer:subLayer];


    }

CALayer *subLayer = [CALayer layer]でCALayerが作成できます。
このサブレイヤーの位置をその下で設定しています。元画面の縦横5分の1の大きさになるように作成しています。
色は今回白色としています。
実行結果は以下のようになります。

まあ白い長方形がただ並んでいるだけとなっています。
では次に角を丸めてみましょう。
以下のコードをfor文の中に追加してください。

subLayer.cornerRadius = 10;

これにより角が半径10で丸められます。
実行結果を見てみましょう。

影をつける

アイコンが並んでいるようなアプリケーションではそれぞれのアイコンに影がついていることがあります。
そこで次に画面に並んでいる白い長方形に影をつけてみましょう。
以下のプロパティを変更してみましょう。

subLayer.shadowOpacity = 1.0;

これは影の不透明度を表すものです。デフォルトでは0となるため影が表示されません。
試しに4つの長方形で少しづつ変えてみました。

左上0.4　右上0.6　左下0.8　右下1.0としています。
影の濃さが異なっているのがわかります。
ただこの影の感じは画面の下側から光が当たったようになっています。逆に上や斜め方向からなどに
変更したいと思う方もいると思います。そこで次に影の出る方向を変えてみましょう。

subLayer.shadowOffset = CGSizeMake(0,10);

CGSizeMakeの第一引数がX軸方向、第二引数がY軸方向にどれぐらい出すのかを指定するようです。
ただしY軸方向の場合マイナスが上側方向となっています。そのため例のように(0,10)を指定すると下に影が出てきます。
これも先ほどと同様に一つずつ変更してみた場合の違いを確認してみましょう。

左上(-10,-10)　右上(10,-10)　左下(-10,10)　右下(10,10)となっています。
影の出る方向がそれぞれ異なっていますね。数値を変更することでいろいろ見え方がかわりますので
試してみてください。

影の色を変更

今のところあまり使いどころがなさそうですが、影の色を変更することもできます。

subLayer.shadowColor = [UIColor yellowColor].CGColor;

この例では黄色にしています。
実行結果は以下のようになります。

アイコンなどのエフェクトとしてはありなのかもしれませんがなんか影って感じでは
なくなってしまった気もします。

影のぼかし具合を設定

今は結構はっきり影がでているので少しぼかしてみましょう。以下のプロパティを変更します。

subLayer.shadowRadius = 10;

実行結果は以下のようになります。色は元の黒色に戻しています。影の不透明度は0.6となってます。

先ほどよりもぼかされているのが確認できます。
最後のコードは以下のようになっています。

- (void)viewDidLoad
{
    [super viewDidLoad];
    //RootLayerを取得
    CALayer *baseLayer = self.view.layer;
    //背景色をシアンに設定
    baseLayer.backgroundColor = [UIColor cyanColor].CGColor;

    //子レイヤーを追加
    for(int i = 0; i < 4; i++){
        CALayer *subLayer = [CALayer layer];
        subLayer.frame = CGRectMake(self.view.bounds.size.width/5 * ((i % 2) * 2 + 1),
                                    self.view.bounds.size.height/5 * ((i / 2) * 2 + 1),
                                    self.view.bounds.size.width/5,
                                    self.view.bounds.size.height/5);
        subLayer.backgroundColor = [UIColor whiteColor].CGColor;
        subLayer.cornerRadius = 10;
        subLayer.shadowColor = [UIColor blackColor].CGColor;
        subLayer.shadowOffset = CGSizeMake(-10 + (i % 2) * 20, -10 + (i / 2) * 20);
        //subLayer.shadowOpacity = 0.2 + (i + 1) * 0.2;   //不透明度
        subLayer.shadowOpacity = 0.6;
        subLayer.shadowRadius = 10.0;
        [baseLayer addSublayer:subLayer];

    }
	// Do any additional setup after loading the view, typically from a nib.
}

このようにCALayerを使用することでかなり簡単にイメージに対してエフェクトをつけることが
できます。
このほかにも画像を表示したり枠をつけたりとできるのですが今回はここまでとしておきます。