【Swift5】 실시간 그라데이션 배경을 구현하는 【IBDesignable】 【IBInspectable】

왜 표준으로 그라데이션 기능 붙어 있지 않은 거야! ! !

처음부터 큰 소리로 미안합니다. 평상시 Illustrator나 VSCode에서의 GUI 간편한 디자인에 달콤하게 되어 있기 때문에, 그라데이션을 구현하기 위해 코딩하는 것이 불만일 것이 없었습니다.
그리고 Apple에게 호소하기 위해 배우기의 정리와 여러분에게의 공유를 위해 기사화합니다.

초학자 때문에 부적절한 표현이나 코드가 있는지 생각합니다. 그 때는 부드럽게 지도하실 수 있으면 다행입니다.

우선 Google에서 선인의 지혜를 찾습니다.

techno monkey님의 기사를 참고로, 코멘트로 해설을 붙이면서 해 본다.
Swift UIView의 배경을 그라데이션시키는 방법 - iPhone 앱 개발 -

ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // グラデーションレイヤーを用意
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.view.bounds // gradientLayerのサイズを指定？

        // グラデーションさせる色の指定
        let color1 = UIColor.orange.cgColor // オレンジ
        let color2 = UIColor.red.cgColor // 赤

        // CAGradientLayerに色を設定（ここでたくさん色を指定することも可能？）
        gradientLayer.colors = [color1, color2]

        // グラデーションの開始点、終了点を設定（0~1）
        gradientLayer.startPoint = CGPoint.init(x: 0.5, y: 0) // 画面上中央
        gradientLayer.endPoint = CGPoint.init(x: 0.5, y: 1) // 画面下中央

        // ViewControllerの親Viewレイヤーにグラデレイヤーを挿入する
        self.view.layer.insertSublayer(gradientLayer, at: 0)
    }

}

좋은 느낌. 매우 깨끗한 그라데이션의 완성.

찬, StoryBoard에서 실시간으로 확인하고 싶습니다.

이것으로 요건은 충족하고 있지만, 이 구현 방법이라고StoryBoard에서는 그라데이션이 프리뷰되지 않는다.
StoryBoard에서 배경과의 겸용을 생각하면서 문자색이나 버튼의 배치를 실시하고 싶다.

@IBDesignable

Swift에는 @IBDesignable과 @IBInspectable이라는 StoryBoard GUI에서 설정할 수 있는 항목을 늘리는 방법이 준비되어 있는 것 같다.
과연, 이것으로 GUI에서의 커스터마이즈 기능이 추가되어 무제한이라고 하는 것이다. 과연 Apple님.

조속히 해보자!

File -> New -> File... 에서 새 Swift 파일을 만듭니다. 여기에서는 Gradient.swift와 명명(← 이런 파일명은 어떤 규칙에 따라 결정하면 좋을 것이다).

Gradient.swift

import UIKit

@IBDesignable
final class GradientView: UIView {

    @IBInspectable var Color1: UIColor = UIColor.orange
    @IBInspectable var Color2: UIColor = UIColor.red

    @IBInspectable var Position1: CGPoint = CGPoint.init(x: 0.5, y: 0)
    @IBInspectable var Position2: CGPoint = CGPoint.init(x: 0.5, y: 1)

    // 実際の描画
    override func draw(_ rect: CGRect) {
        // グラデーションレイヤーを用意
        let gradientLayer = CAGradientLayer()
        // gradientLayerのサイズを指定
        gradientLayer.frame = self.bounds

        // グラデーションさせる色の指定
        let color1 = Color1.cgColor
        let color2 = Color2.cgColor

        // CAGradientLayerに色を設定（ここでたくさん色を指定することも可能？）
        gradientLayer.colors = [color1, color2]

        // グラデーションの開始点、終了点を設定（0~1）
        gradientLayer.startPoint = Position1
        gradientLayer.endPoint = Position2

        // ViewControllerの親Viewレイヤーにレイヤーを挿入する
        self.layer.insertSublayer(gradientLayer, at: 0)
    }

}

이것으로 코딩 부분은 완료. ViewController.swift 에 쓸 때와 미묘하게 다른 부분이 있으므로 주의.

StoryBoard에 UIView 배치

클래스 지정

방금 배치한 UIView에 클래스 지정

제대로 되어 있으면 이런 느낌으로 입력 예측이 나온다.

완벽하니?

그리고는 이 UIView를 화면 전체에 펼치거나, Auto Layout 하거나 해 간단하게 그라데이션을 사용할 수 있다!

설정도 자유

이런 식으로 설정하면


왼쪽 상단(0, 0)에서 오른쪽 하단(1, 1)에 걸쳐 그라데이션하는 View를 할 수 있다(실시간 미리보기에서).

오시마

GUI로 할 수 있는 일은 GUI로 하고 싶네요.