[iOS] CALayerを使ってみる

UIViewをカスタマイズして、カスタムコントローラを作ろうと思っています。

【目標】
・単純なプログレスバー
・表示はグラデーションでバーを表示して、伸びるときはアニメーション

CoreGraphicsでUIView内に描画しようと考えていましたが、CALayerという機能があるので試してみる。

UIView内に、階層的にレイヤーを追加して、表示を管理できるみたいです。
アニメーションさせたりできるみたいです。

最初に、レイヤー内にグラデーションで四角形を描画して、UIViewに追加してみた。

// レイヤー作成

CALayer* subLayer = [CALayer layer];

subLayer.frame = CGRectMake(0, 0, 200, 30);

// オフスクリーンに描画

UIGraphicsBeginImageContext(CGSizeMake(50, 50));

// グラデーションで描画する

CGContextRef context = UIGraphicsGetCurrentContext();

CGColorSpaceRef colorspace;

CGGradientRef gradient;

CGFloat locations[2]  = { 0.0, 1.0 };

CGFloat components[8] = {

0.290, 0.478, 0.710, 1.0,

0.427, 0.600, 0.804, 1.0

};

colorspace = CGColorSpaceCreateDeviceRGB();

gradient   = CGGradientCreateWithColorComponents (colorspace, components, locations, 2);

CGContextDrawLinearGradient(context, gradient, CGPointMake(0, 0), CGPointMake(50, 50), 0);

// オフスクリーン内容をUIImageに変換する

UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

// オフスクリーン描画を終了

UIGraphicsEndImageContext();

// レイヤーに画像をセットする

subLayer.contents = (id)img.CGImage;

// ビューのレイヤーに追加

[self.layer addSublayer:subLayer];

オフスクリーンで作成した画像をレイヤーにセットして、CALayerのframeで位置やサイズを変更します。

これで、プログレスバーの表示部分はできそうだ。
次は、アニメーションでバーを伸ばしたりするところをやってみよう。