[XCODE] UIViewの背景をグラデーションにする方法

こんにちは、@yoheiMuneです。
今日はiPhoneで、UIViewの背景にグラデーション色を表示する実装方法をブログに書きたいと思います。

UIViewの背景をグラデーションで表現する一番簡単にする

UIViewの背景をグラデーションにする一番手っ取り早い方法は、グラデーション画像を背景に置く方法です。
こんな感じで簡単に出来ます。

#import <QuartzCore/QuartzCore.h>

-(void)makeGradientBackground:(UIView *)view {
	view.layer.contens = (id)[UIImage imageNamed:@"gradientBg"];
}

米 QuartzCoreライブラリをプロジェクトに追加しておく必要あります。


これが一番簡単な方法で、デザイナーさんがいるとか、自分がデザインツールを使いこなせるなどの環境であれば、 これから紹介するプログラムでグラデーションを作る必要はないかもしれません。

ただViewのサイズが可変になるとか、いろいろと色味を調整してみたいとか、デザインをプログラムで解決したいなどの希望があれば、 以下で紹介するグラデーションの実装方法が参考になるかもしれません。

UIViewの背景をグラデーションをプログラムで作成する方法

UIViewの背景を自由に制作するためには、CGContextなどを利用して描画内容を作成します。
グラデーションを表現するには、以下のように実装します。

// 処理対象のView
UIView *amountBGView = [UIView createBGView];

// グラデーションの内容を作ります。
float width = amountBGView.frame.size.width, height = amountBGView.frame.size.height;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 4 * width, colorSpace, kCGImageAlphaNoneSkipFirst);
size_t numOfComponent = 2;
CGFloat locations[2] = {0.0, 1.0};
CGFloat components[8] = {
    99.0f/255.0f, 217.0f/255.0f, 76.0f/255.0f, 1.0f,
    157.0f/255.0f, 217.0f/255.0f, 76.0f/255.0f, 1.0f
};
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, numOfComponent);

// 制作したグラデーション内容で画像を生成する
CGContextDrawLinearGradient(bitmapContext, gradient, CGPointMake(0, 0), CGPointMake(0, height), 0);
CGImageRef imageRef = CGBitmapContextCreateImage(bitmapContext);
UIImage *image = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);
CGContextRelease(bitmapContext);
CGColorSpaceRelease(colorSpace);

// 生成したグラデーション画像を背景に指定する。
[self.amountBGView setBackgroundColor:[UIColor colorWithPatternImage:image]];

コード量が多いですが、こんな感じでグラデーション画像を生成してそれをViewの背景に設定できます。

最後に

iPhoneアプリを作っているとInterface Builderでかなりのデザインが出来るので、 わざわざデザインツールでカンプを作るのも面倒な気がしてきます。
そんなときに、上記のようなコードでデザインを解決すると良いかもしれません☆

最後までご覧頂きましてありがとうございます。