コードでグラデーションのUIViewを作る

こんばんわ、daihaseです。 久々の投稿です。

今日はSwiftでグラデーションのUIViewの作り方を。StoryboardやXibは使わずにコードだけでやってみます。

まずファイル名は何でもいいので、UIViewを継承したカスタムViewを作りましょう。ここではGradientView.swiftというファイルを作り、以下のようなコードを書きました。

import UIKit

class GradientView: UIView {
    fileprivate let startColor: UIColor
    fileprivate let endColor: UIColor
    
    override private init(frame: CGRect) {
        fatalError("init(coder:) has not been implemented")
    }
    
    required public init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    init(frame: CGRect = CGRect.zero, startColor: UIColor, endColor: UIColor) {
        self.startColor = startColor
        self.endColor = endColor
        super.init(frame: frame)
    }

    override func draw(_ rect: CGRect) {
        let colorSpace: CGColorSpace = CGColorSpaceCreateDeviceRGB()
        let context: CGContext = UIGraphicsGetCurrentContext()!
        context.saveGState()
        
        let colors = [self.startColor.cgColor, self.endColor.cgColor]
        let locations: [CGFloat] = [0, 1]
        let gradient: CGGradient = CGGradient(colorsSpace: colorSpace, colors: colors as CFArray, locations: locations)!
        
        let startPoint: CGPoint = CGPoint(x:rect.minX, y: rect.midY)
        let endPoint: CGPoint = CGPoint(x: rect.maxX, y: rect.midY)
        
        context.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: [])
        context.restoreGState()
    }
}

カスタムViewを生成する際に、開始時点と終了時点の色情報を与えてグラデーションを表現する感じですね。

ではさっそくUIViewControllerから色情報をセットしカスタムViewを生成してみます。

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let startColor = UIColor(red: 134.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0)
        let endColor = UIColor(red: 249.0/255.0, green: 37.0/255.0, blue: 0.0/255.0, alpha: 1.0)
        let gradientView = GradientView(frame: CGRect(x: 0 , y: 0, width: 100, height: 100), startColor: startColor, endColor: endColor)
        gradientView.center = view.center
        
        self.view.addSubview(gradientView)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

最初からあるViewController.swiftを使っています。 生成する際にサイズと、開始地点の色情報（ここでは濃い赤）、終了地点の色情報（明るい赤）をセットし、それを画面の中央にくるよう調整。 addSubviewで画面に表示させています。

今回のこれは横方向にグラデーションがかかってますが、方向をenumで定義してやってグラデーションView生成時にその値をセットしてやることで、縦方向のグラデーションViewを表示させたりも簡単に出来ます。

今日はここまで。 それではよいSwiftライフを〜