iOSアプリ開発!背景色にグラデーションを与える。

 
iOSでこんな感じのグラデーションみたことがあるかと思います↓
いいかんじに色がかわっていくやつ。
 

スクリーンショット 2016-02-13 13.36.04
参照元:http://ios8colors.com
 

これを実際にUIViewで実装していく方法を紹介します。
 
 

例えば、ストリートボードからIBOutletされたUIView(header view)の背景色に
3色のグラデーションを適用するとしたらこんな感じ
 

</p>
<p>@IBOutlet weak var headerview: UIView!</p>
<p>//普通の色設定</p>
<p>headerview.backgroundColor = UIColor.greenColor()</p>
<p>//グラデーションの設定</p>
<p>グラデーションレイヤーをinit</p>
<p>let gradientLayer = CAGradientLayer()</p>
<p>//フレームを用意<br />
gradientLayer.frame = headerview.bounds<br />
//色を定義<br />
let color1 = UIColor(red: 0.4, green: 0.7, blue: 0.9, alpha: 1.0).CGColor as CGColorRef<br />
let color2 = UIColor(red: 0.1, green: 0.5, blue: 0.8, alpha: 1.0).CGColor as CGColorRef<br />
let color3 = UIColor.whiteColor().CGColor<br />
//グラデーションレイヤーに色を設定<br />
gradientLayer.colors = [color1, color2,color3]<br />
//始点・終点の設定<br />
gradientLayer.startPoint = CGPointMake(0, 0);<br />
gradientLayer.endPoint = CGPointMake(1.0, 0.8);<br />
//headerviewにグラデーションレイヤーを挿入<br />
headerview.layer.insertSublayer(gradientLayer,atIndex:0)</p>
<p>

 
やっていることのイメージとしては、色を設定したいUIViewの上にグラデーション用のレイヤーを重ねているようなイメージ。

なので、もしUIViewになにか別のオブジェクト(例えば画像とか、文字)を重ねている場合、
このグラデーション背景設定をViewDidLoadでしてしまうとそれらの上に重なってしまうという問題が起きたりするので、
それを防ぐためにグラデーションレイヤーの挿入時には、atIndex:0を指定しています。

<br />
headerview.layer.insertSublayer(gradientLayer,atIndex:0)<br />

グラデーションの色の変化数は、色の定義数とグラデーションレイヤーへの色の設定数でカスタマイズできますよ。
 

初心者の方におすすめの書籍はこちら↓