SwiftのViewをグラデーション(gradation)(優良記事まとめ)

概要

SwiftでViewをグラデーションするのは２通り

IBDesignableでカスタムクラス作ってStoryboardで設定いじいじ

※透明度まで考慮してgradationを考える際の注意点
ex. 透明→黒というgradationを作成する場合
Top Color: Clear
Bottom Color: Black
→gradationがおかしくなる(透明度だけでなくrgbも差異が生じていてgradationしてしまう)
Top Color: BlackかつOpacity 0%
Bottom Color: Black
→これならrgbが一致した状態で透明度のみgradationしてくれる

シンプルにカスタムクラス作ってコード側でパラメータいじいじ

IBDesignableでカスタムクラス

・Swift IBDesignable入門 - Qiita
・@IBDesignableをハックしてコードでの設定をRunせず確認する - Qiita
→上記2つは基本からきちんと理解できます
・IBDesignableがウザい - Qiita
→デメリットがサクッとまとまってます

シンプルにカスタムクラス

2つとも似たような感じ。

・Swiftで背景にグラデーションを設定する - Qiita
→簡単なコードと使い方が載ってます(↓はコメント省いたやつ)

simpleCustomClassView.swift

let topColor = UIColor(red:0.07, green:0.13, blue:0.26, alpha:1)
let bottomColor = UIColor(red:0.54, green:0.74, blue:0.74, alpha:1)
let gradientColors: [CGColor] = [topColor.CGColor, bottomColor.CGColor]
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.frame = self.view.bounds
self.view.layer.insertSublayer(gradientLayer, atIndex: 0)

・ios - Programmatically create a UIView with color gradient - Stack Overflow
↓一番参考になりそうなやつ？(Swift3.0らしいし)

var gradientView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 35))
 let gradientLayer:CAGradientLayer = CAGradientLayer()
 gradientLayer.frame.size = self.gradientView.frame.size
 gradientLayer.colors = 
 [UIColor.white.cgColor,UIColor.red.withAlphaComponent(1).cgColor] 
 gradientView.layer.addSublayer(gradientLayer)
 gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
 gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

制約(AutoLayoutとか入ってるとき)

上記のようにsubLayerを用いたやり方だと対象ViewがAutoLayoutで配置されていて幅や高さが決定していない状態だとgradationがおかしくなったりするらしい

override public class var layerClass: Swift.AnyClass {
    get {
        return CAGradientLayer.self
    }
}

ViewのlayerごとCALayer→CAGradientLayerにするとAutoLayoutにも対応してくれるみたいです

他参考記事

・swiftでグラデーションがかかったViewを作成する[CAGradientLayer][swift3.0] - MILLEN BOX
→少しややこしめVer.
・Swift UIViewの背景をグラデーションさせる方法　-iPhoneアプリ開発-
・[Swift]グラデーション設定できるViewとかなんとか｜杏z 学習帳（旧）