iOSでUIViewの背景をグラデーションにする方法

iPhoneアプリの画面で、計算機アプリのようにボタンや画面の背景色がグラデーションになっているものをよく見かけますが、これをObjective-Cを使ってXCodeで実現する方法をご紹介します。

UIViewに適用してみる

ここではUIViewのサブクラスであるUIViewController (=self)に適用させてみますが、UIButton等のボタンもUIViewのサブクラスなので同じように適用できます。

QuartzCoreフレームワークを導入

グラデーションを実現するにはまず、作成しているプロジェクトファイルに「QuartzCoreフレームワーク」を導入します。

導入方法は簡単です。　上の図のようにXCodeでプロジェクトのTARGETSに表示されているアプリアイコンを選択し、「Build Phases」タブを選んで「Link Binary with Libraries」の行の「＋」ボタンを押して「QuartzCore」のフレームワークを加えるだけです。

あとは、グラデーションを適用させたいクラスファイルを開いて以下のようにimport文でフレームワークをインポートします。

#import <QuartzCore/QuartzCore.h>

画面表示（viewDidLoad）のタイミングで適用

UIViewControllerに適用するには、CAGradientLayerインスタンスを生成し、導入先と同じ大きさにしたあと、colorsプロパティにCGColorRefの配列を指定します。

そして最後にUIViewControllerのlayerプロパティに insertSublayer して完了です。

ここでは黒（blackColor）からダークグレー（darkGrayColor）にグラデーションさせてみましょう。

- (void)viewDidLoad
{
[super viewDidLoad];
//背景色をグラデーションに
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.view.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor darkGrayColor] CGColor], nil];
[self.view.layer insertSublayer:gradient atIndex:0];
}

このグラデーション機能はiOS SDK 3.0以降で利用できるようになっているようです。