iOS) Gradient 구현하기

 

개인적으로 공부하며 정리하는 블로그 입니다.
오류나 부족한 부분이 있을 수 있으니 감안하고 봐주시고 아낌없는 조언 감사드립니다 :D

 

 

자칫 잘못 사용하면 촌스러워보일 수 있지만 잘만 사용하면 세련됨의 극치를 보여주는 Gradient!  

Swift에서는 어떻게 사용하는지 한번 알아볼까요??

 

우선 방법 자체는 매우매우 간단합니다!

 

/

 

View에 CAGradientLayer 객체를 만들어 뷰 레이어에 붙여주면 끝!!

 

/

 

오늘은 밋밋한 배경에 Gradient로 세련됨을 추가시켜볼까 합니다 :D

( 배경을 입혀볼 기본 예제는 이전 Carousel 구현하기 를 참고해주세요! )

 

 

방법 자체는 정말정말 간단해요!

// CAGradientLayouer를 생성해주고
let gradient = CAGradientLayer()

// frame을 잡아주고
gradient.frame = view.bounds

// 섞어줄 색을 colors에 넣어준 뒤
gradient.colors = [
    UIColor(hexString: "#ff9a9e").cgColor,
    UIColor(hexString: "#fad0c4").cgColor,
]

// layer에 붙여주면 끝!
view.layer.addSublayer(gradient)

 

다만 여기서 문제가 한 가지 있죠! hexString ? UIColor에 그런 내장 함수는 없어요 ㅠㅠ 

직접 만들어 봅시다 ㅎㅎ

extension UIColor {
    convenience init(hexString: String) {
        let hex = hexString.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int = UInt32()
        Scanner(string: hex).scanHexInt32(&int)
        let a, r, g, b: UInt32
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (255, 0, 0, 0)
        }
        self.init(red: CGFloat(r) / 255, green: CGFloat(g) / 255, blue: CGFloat(b) / 255, alpha: CGFloat(a) / 255)
    }
}

 

여기에 대한 자세한 설명은 추후 공부한 뒤에 포스팅해보겠습니다.. 

 

 

짠, 어때요 전보다 훨씬 세련되보이지 않나요?!

 

---

 

여기서 끝내기는 조금 아쉽죠..?

상자에 그림자효과를 넣어보면 좀 더 예뻐질 거 같은데 말이죠! 

 

shadow는 view의 layer의 속성에서 설정해줄 수 있답니다!

 

 

shadow에서 선택해줄 수 있는 속성은 크게 5가지가 있어요!

이름에서 유추해볼 수 있지만 간단하게 설명을 붙여보자면,

 

shadowColor: shadow 의 색

 

shadowOffset: shadow가 뷰와 떨어져 있는 간격

(3D effect offset 쪽에서 주로 사용하는 것 같아요..)

 

shadowRadius: shadow의 너비

 

shadowOpacity: shadow의 투명도

 

shadowPath: shadow 의 방향

( 이 값을 설정하면 Swift가 자동으로 계산해주지 않는다고 하니 주의해서 사용해야겠어요 )

 

shadow를 설정해주는 함수를 하나 만들어서 cell을 넘거줬어요!

 func setupShadow(_ view: UIView) {
    view.layer.shadowColor = UIColor.black.cgColor
    view.layer.shadowOpacity = 0.5
    view.layer.shadowOffset = .zero
    view.layer.shadowRadius = 5
    view.layer.shadowPath = UIBezierPath(rect: view.bounds).cgPath
}

...

setupShadow(cell)

어때요 좀 더 나아졌나요?

 

이를 활용한 전체적인 코드는

제 github의  Carousel Effect 를 참고해주세요!

 

 

 

조금이라도 도움이 되셨으면 좋겠습니다.

긴 글 읽어주셔서 감사합니다 ^^