職人が教える!iOSアプリ開発で使いこなしたいとっておきのOSS

第5回 グラデーション描画や色のアニメーションの実装を簡単にする色処理関連の便利OSS3選

この記事を読むのに必要な時間:およそ 4.5 分

何とも地味なテーマですが,色処理まわりは技術的にだいぶ枯れており,実装でやりたいこともある程度パターン化されています。ゆえに便利なOSSが多く出揃っている部分でもあります。

今回はそんな色処理まわりの便利なOSSを3種類紹介します。

グラデーション描画のヘルパークラスLBGradient

CocoaにはNSGradientというグラデーション描画用のクラスがあるのですが,iOSにはそれがないため,

画像

このようなグラデーションを描こうと思ったらCore Graphicsを用いて

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();   
    CGContextSaveGState(context);
    
    CGContextAddRect(context, self.frame);
    
    CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
    
    CGFloat components[] = {
        0.0f, 0.0f, 1.0f, 1.0f, // Blue
        1.0f, 0.0f, 0.0f, 1.0f, // Red
        0.0f, 1.0f, 0.0f, 1.0f  // Green
    };
    CGFloat locations[] = {0.0f, 0.5f, 1.0f};
    
    size_t count = sizeof(components) / (sizeof(CGFloat) * 4);
    
    CGRect frame = self.bounds;
    CGPoint startPoint = frame.origin;
    CGPoint endPoint = CGPointMake(frame.origin.x + frame.size.width, frame.origin.y);
    
    CGGradientRef gradientRef = CGGradientCreateWithColorComponents(colorSpaceRef, components, locations, count);
    
    CGContextDrawLinearGradient(context,
                                gradientRef,
                                startPoint,
                                endPoint,
                                kCGGradientDrawsAfterEndLocation);
    
    CGGradientRelease(gradientRef);
    CGColorSpaceRelease(colorSpaceRef);
    
    CGContextRestoreGState(context);
}

こんなに長いコードを書く必要があります。

コードをよく見れば,UIGraphicsGetCurrentContext()をはじめCore Graphicsではおなじみの手続きが多く占めているものの,このコードをサラサラと書けるかというとなかなか辛いものがあります。

そこでLBGradientというクラスを使うと,この部分がこんなにシンプルになります(実行結果は上と同じ)⁠

-(void)drawRect:(CGRect)rect {
    LBGradient* gradient = [[LBGradient alloc] initWithColorsAndLocations:
                            [UIColor blueColor], 0.0f,
                            [UIColor redColor], 0.5f,
                            [UIColor greenColor], 1.0f, nil];
    [gradient drawInRect:self.bounds angle:0];
    [gradient release];
}

LBGradientクラスのinitWithColorsAndLocations:というメソッドが可変長引数をとるようになっていて,ここにグラデーションの基準となる色と位置をセットで複数個指定します。グラデーションを指定するためのAPIとしては直観的でわかりやすいのではないでしょうか。

上記ではグラデーションの描画にdrawInRect:angle:を用いて「指定した矩形内を指定した角度でグラデーション描画」していますが,他にも次のようなメソッドも用意されており,

-(void)drawInBezierPath:(UIBezierPath *)path angle:(CGFloat)angle;

任意のベジェ曲線に沿ってグラデーションを描画することも可能です。

LBGradientのソースを見ると,initWithColorsAndLocations:メソッドではグラデーション基準点の色と位置の配列を生成し,描画メソッド内でCGGradientCreateWithColorsメソッドとCGContextDrawLinearGradientメソッドを用いてグラデーション描画していて,要するに最初に載せた長いコードをうまくラップしてくれている,ということがわかります。

LBGradientのリポジトリのURLは以下になります。

サクッとグラデーションをかけて色をつけたい,といった場合にいかがでしょうか。

Core Graphics のややこしい手続きをラップするクラスを自作する際の参考としてもよいかと思います。

著者プロフィール

堤修一(つつみしゅういち)

1978年生まれ。京都大学工学部を卒業後,同大学院修了。その後,NTTデータにて音声認識技術の研究開発,キヤノンにて画像処理機能の設計に携わる。

2010年より面白法人カヤックに入社。3年間ほぼiOSアプリ開発に専念し,フルスクラッチで開発しリリースしたアプリは30本以上。代表作は150万ユーザを突破した「バウンドモンスターズ」,AppStore Best of 2012を獲得した「タップ忍者」,カンヌ国際広告祭でブロンズを獲得した「Domino's App」など。

現在は,米国シリコンバレーのマウンテンビューにあるAppSocially社の一員として活躍中。

著書=『iOSアプリ開発 達人のレシピ100―開発現場で実証された実用コード集』

ブログ=Over&Outその後

Github=shu223

Twitter=shu223

コメント

コメントの記入