UIViewにCAGradientLayerを使ってグラデーションをかける

はじめまして。もうすぐ１年ですがピッチピチの新人と言い張るmatsumi（中年）です！

今回のお題は、iOS7がフラットデザイン風になったことで、
すっかり肩身の狭くなった感があるグラデーションについてです。

肩身が狭くなったとは言え、デザイン上なにかと必要になるグラデーションなのですが、
「CAGradientLayer」を使用すればUIViewに簡単にグラデーションをかける事ができます。

手順は、
１．「CGGradientLayer」を作る
２．サイズ、色、開始位置と終了位置を指定
３．UIViewのlayerにグラデーションのレイヤーを追加
これだけ。



では、実際に書いてみましょう。

//条件作成
UIView *view = [[UIView alloc]init];
view.frame = CGRectMake(50, 50, 150, 150);
UIColor *startColor = [UIColor blueColor]; //開始色は青
UIColor *endColor = [UIColor yellowColor]; //終了色は黄
NSInteger angle = angle0;                  //角度は0度

//１．「CGGradientLayer」を作る
CAGradientLayer* gradientLayer = [CAGradientLayer layer];

//２．サイズ、色、開始位置と終了位置を指定
gradientLayer.frame = view.bounds;
gradientLayer.colors = [NSArray arrayWithObjects:
                   (id)startColor.CGColor, //開始色
                   (id)endColor.CGColor,   //終了色
                   nil];

CGPoint startPoint = CGPointMake(0.0f, 0.0f);
CGPoint endPoint = CGPointMake(0.0f, 0.0f);

//グラデーションの角度
switch (angle) {
    case angle0:
        //0度
        startPoint = CGPointMake(0.5f, 0.0f);
        endPoint = CGPointMake(0.5f, 1.0f);
        break;
    case angle45:
        //45度
        startPoint = CGPointMake(1.0f, 0.0f);
        endPoint = CGPointMake(0.0f, 1.0f);
        break;
    case angle90:
        //90度
        startPoint = CGPointMake(1.0f, 0.5f);
        endPoint = CGPointMake(0.0f, 0.5f);
        break;
    default:
        startPoint = CGPointMake(0.5f, 0.0f);
        endPoint = CGPointMake(0.5f, 1.0f);
        break;
}

[gradientLayer setStartPoint:startPoint];
[gradientLayer setEndPoint:endPoint];

//３．UIViewのlayerにグラデーションのレイヤーを追加
[view.layer insertSublayer:gradientLayer atIndex:0];
[self.view addSubview:view];

簡単ですね。結果がこれです。

途中で角度の分岐させてる所は以下の構造体を指定しています。

//グラデーションの角度
typedef enum {
    angle0,
    angle45,
    angle90,
} angle;

角度を0度、45度、90度に変えた結果がこちら。

ちなみに、途中の「colors」に複数の色を入れると、

gradientLayer.colors = [NSArray arrayWithObjects:
                        (id)[UIColor redColor].CGColor,
                        (id)[UIColor orangeColor].CGColor,
                        (id)[UIColor yellowColor].CGColor,
                        (id)[UIColor greenColor].CGColor,
                        (id)[UIColor blueColor].CGColor,
                        (id)[UIColor purpleColor].CGColor,
                        nil];

こんなこともできます。

レインボーマン。いや、なんでもないです…

ちょっとグラデったい時に試してみてはどうでしょう。