【Swift x iOSアプリ開発】Viewの背景色にグラデーションを設定する方法

swiftgradiOSアプリ開発/Swift
この記事は約3分で読めます。

はじめに

iOSアプリ開発で、いい感じのグラデーションをViewの背景色に設定する方法を紹介します。

コード

作業の流れとしては、グラデーション色を設定したいUIViewのsubLayerに、グラデーション用のレイヤーを挿入していきます。

言葉で説明してもわかりにくので、早速やっていきましょう。

 

まずは、背景色を設定するViewを定義します。

let sampleView = UIView(frame: CGRect(x: x, y:y, width:width, height:height))

次に、グラデーション用のレイヤーを定義していきます。

let gradientLayer = CAGradientLayer()

また、gradientLayerのframeサイズはsampleViewと同じサイズになるように設定しておきましょう。

gradientLayer.frame = sampleView.bounds

次に、gradientLayer上でグラデーションしたい色の設定をしていきましょう。今回は以下の3色をつかいますが、基本的に任意の数の色を設定できます。

//色を定義
let color1 = UIColor(red: 0.4, green: 0.7, blue: 0.9, alpha: 1.0).CGColor as CGColorRef
let color2 = UIColor(red: 0.1, green: 0.5, blue: 0.8, alpha: 1.0).CGColor as CGColorRef
let color3 = UIColor.whiteColor().CGColor


//グラデーションレイヤーに色を設定
gradientLayer.colors = [color1, color2,color3]

そして、graidientLayer上でのグラデーションの始点と終点位置の設定をしていきます。具体的には、水平方向にグラデーション、垂直方向にグラデーション、斜め方向にグラデーションなどの調整ができます。

//始点・終点の設定
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1.0, 1.0);

そして、最後にsampleViewのsubLayerにグラデーションを表示するためのgradientLayerを挿入していきます。このとき、もし、gradientLayer以外の他のLayerも同時に挿入しないといけない場合、gradientLayerの下にそのLayerが挿入されるとそのLayerが見えなくなってしまうので、それを防ぐためにatIndex:0を指定しています。この指定により常にgradientLayerが一番下のLayerとなります。

sampleView.layer.insertSublayer(gradientLayer, atIndex:0)

iOS開発のためのオススメ書籍はこちら!

オススメのプログラミングスクール紹介

【TechAcademy】自宅で学べる!プログラミングスクール

まずは無料体験からでも始められます

★ここがポイント!

 自宅にいながらオンラインで勉強できる
◎ パーソナルメンターがついて指導!

◎ チャットで質問もOK
◎ あなたのオリジナルサービスの開発をサポート!

iOSアプリ開発/Swiftプログラミング
あれは魔法だろうか?
タイトルとURLをコピーしました