TIL - UITabBarController에서 Gradient Background 적용하기

jeongmuyamette·2025년 1월 15일

TIL

목록 보기

27/72

📝 학습 내용

오늘은 UITabBarController에 그라데이션 배경을 적용하는 방법에 대해 알아보았습니다.

💡 주요 포인트

CAGradientLayer를 사용하여 그라데이션 효과 구현
UITabBar의 배경을 커스터마이징하는 방법
색상 관리를 위한 extension 활용

📚 상세 내용

1. CAGradientLayer 설정

let gradientLayer = CAGradientLayer()
gradientLayer.frame = tabBar.bounds
gradientLayer.colors = [
    UIColor(hex: "#4A90E2").cgColor,
    UIColor(hex: "#50E3C2").cgColor
]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 0)

2. UIColor Extension으로 HEX 색상 지원

extension UIColor {
    convenience init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int = UInt64()
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3:
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6:
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8:
            (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)
    }
}

3. TabBar에 그라데이션 적용

func setupTabBarGradient() {
    let gradientImage = createGradientImage(for: tabBar)
    tabBar.backgroundImage = gradientImage
    tabBar.shadowImage = UIImage()
}

func createGradientImage(for view: UIView) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0.0)
    guard let context = UIGraphicsGetCurrentContext() else { return nil }
    
    gradientLayer.render(in: context)
    let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    return gradientImage
}