Xcode Swift 그라데이션 뷰, 버튼 만들기

Xcode Swift 그라데이션 뷰, 버튼 만들기

 

먼저 그라데이션이란?

그라데이션(Gradation)은 하나의 색채에서 다른 색채로 변하는 단계, 혹은 그러한 기법을 의미하는 단어

 

Xcode에서 이러한 그라데이션 효과를 주려면 어떻게 하면될까요?

 

 

그라데이션 뷰 만들기

 

CAGradientLayer() 를 사용하면 손쉽게 설정할 수 있습니다.

 

아래 코드를 보시면 되겠습니다.

 

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = view.bounds
        
        // 그라데이션 될 색 지정 
        gradientLayer.colors = [
            UIColor.blue.cgColor,
            UIColor.systemBrown.cgColor,
        ]
        // 뷰에 gradientLayer추가
        view.layer.addSublayer(gradientLayer)
}

색에 파랑색과, 갈색을 넣었으니 파랑과 갈색이 섞여야겠죠?

 

실행을 해봅시다!

 

정확하게 파랑 -> 갈색으로 변하는 이쁜 그라데이션이 설정이 되었습니다.

 

 

그라데이션 버튼 만들기

 

아까 만든 class는 잠시 두고 하나의 클래스를 더 만들겠습니다.

 

class GradientButton: UIButton {
    
    let gradient = CAGradientLayer()
    
    init(colors: [CGColor]) {
        super.init(frame: .zero)
        
        gradient.frame = bounds
        gradient.colors = colors
        layer.addSublayer(gradient)
    }
    required init?(coder: NSCoder) {
        fatalError()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        gradient.frame = bounds
    }
}

 

똑같이 CAGradientLayer를 사용했지만, 클래스가 UIButton을 받고 있습니다.

 

이렇게 만들어준 이유는 ViewController에서 버튼을 만들 때 그라데이션이 들어갈 버튼을 만들고자하면

 

쉽게 설정할 수 있도록 틀을 미리 짜둔것인데요.

 

이제 아까의 VC로 가서 위 코드를 추가해줍니다.

    let button = GradientButton(colors: [UIColor.red.cgColor,UIColor.blue.cgColor])
        button.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
        button.center = view.center
        button.setTitle("success", for: .normal)
        view.layer.addSublayer(gradientLayer)

 

위에 GradientButton Class를 통해서 init으로 초기값만 설정해주시면 그라데이션이 설정된 버튼이 쉽게 만들어집니다.

 

완성 !! 

 

전체 코드

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = view.bounds
        gradientLayer.colors = [
            UIColor.blue.cgColor,
            UIColor.systemBrown.cgColor,
        ]
        
        let button = GradientButton(colors: [UIColor.red.cgColor,UIColor.blue.cgColor])
        button.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
        button.center = view.center
        button.setTitle("success", for: .normal)
        view.layer.addSublayer(gradientLayer)
        view.addSubview(button)
    }
    
}

class GradientButton: UIButton {
    
    let gradient = CAGradientLayer()
    
    init(colors: [CGColor]) {
        super.init(frame: .zero)
        
        gradient.frame = bounds
        gradient.colors = colors
        layer.addSublayer(gradient)
    }
    required init?(coder: NSCoder) {
        fatalError()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        gradient.frame = bounds
    }
}