グラデーションをコードで書いてみた@Swift4

こんちは。渡部です。

現在社内アプリを(勝手に)作っています。
が、徐々にモチベーションが下がってきたので
気分が乗るようにデザイナーに画面作ってくれ！と依頼しました。

そして上がってきた画面がこれ

あらオシャレ。
女性のデザイナーなのですがブッチャーあたりを入れてくるのはさすがです。
きっとみんな知りません。
そんな方はこちら(閲覧注意)。
　
　
イマドキっぽいデザインで良いのですが、
機能が少々追加されてますね。。。
　
　
それにデザイナーはみんな忙しそうです。
あと7画面、複数サイズ、素材の切り出しとか依頼したら
ヒールホールドで足を破壊されそうです。
　
　
仕方ない、自分でやるか。と思いSketchを立ち上げましたが
普通にやっても面白くありません。というかSketchが使いこなせません。
　
そうだ！京都に行こうコーディングしよう！
だって一応コーダーですし。おすし。
　
ということでこんな感じでやりました。
(前置き長ぇ)
　

白黒でグラデーションを書いてみる

適当にプロジェクトを用意してviewDidLoad内にこんな感じでコードを書きます。

override func viewDidLoad() {
    super.viewDidLoad()
        
    // 白黒半々になる
    let startColor = UIColor(white: 1, alpha: 0).cgColor
    let endColor = UIColor(white: 0, alpha: 1).cgColor

    let layer = CAGradientLayer()
    layer.colors = [startColor, endColor]
    layer.frame = view.bounds

    view.layer.addSublayer(layer)
}

実行するとこんな感じです。

シンプルですね。

それっぽい色でやってみる

次にもらったデザインの色でやってみます。
同じく以下のようにコードを書きます。

override func viewDidLoad() {
    super.viewDidLoad()
    // もらったデザインの色を指定
    // 02ADB0 ~ 00CDAC
    let gradientLayer:CAGradientLayer = CAGradientLayer()
    let startColor = UIColor(red: 2/255.0, green: 173/255.0, blue: 176/255.0, alpha: 1.0).cgColor
    let endColor = UIColor(red: 0/255.0, green: 205/255.0, blue: 172/255.0, alpha: 1.0).cgColor

    // viewの左上から右下へ
    gradientLayer.colors = [startColor, endColor]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradientLayer.frame = view.bounds

    view.layer.addSublayer(gradientLayer)
}

実行すると・・・

それっぽくなりました。
値の調整をすれば良い感じになりそうです。

昔のインスタのログイン画面も

こんな感じでやると

override func viewDidLoad() {
    super.viewDidLoad()
    // 昔のインスタ風
    //97347F ~ 873BA0
    let gradientLayer:CAGradientLayer = CAGradientLayer()
    let startColor = UIColor(red: 151/255.0, green: 52/255.0, blue: 127/255.0, alpha: 1.0).cgColor
    let endColor = UIColor(red: 135/255.0, green: 59/255.0, blue: 160/255.0, alpha: 1.0).cgColor

    // viewの左から右へ
    gradientLayer.colors = [startColor, endColor]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
    gradientLayer.frame = view.bounds

    view.layer.addSublayer(gradientLayer)
}

こう！

うぇい！
　
　

まとめ

コーダーは全部コードでやりたいですよね。
Storyboardができる以前のInterfaceBuilderは使い物になりませんでした使いこなせませんでした。
なのでボタンから何から全部コードで書いたのも懐かしいです。
今回はソースを見てもらえばわかる通り、
CAGradientLayerを使えば一発でグラデーションが描画できます、という記事です。

この書き方は単色のグラデーションなら可能ですが
複数色の場合は諦めて画像作ってもらいましょう！