boraBong

[iOS] TabBar 탭바 배경색 바꾸는 방법 (+ iOS 15 추가) 🎨 본문

iOS/Feat

[iOS] TabBar 탭바 배경색 바꾸는 방법 (+ iOS 15 추가) 🎨

보라봉_ 2021. 4. 12. 03:46
728x90

#Swift how to change TabBar BackgroundColor

 

안녕하세요ㅎㅅㅎ

보라봉입니다💜

 

오늘은 iOS에서 탭바 배경색을 바꿔볼 거에요!!


탭바 배경색 바꾸기

1️⃣ 프로젝트 내에 SubClass가 UITabBarController인 클래스를 하나 생성해줍니다.

 

 

 

2️⃣ 생성한 클래스를 탭바 컨트롤러의 Custom Class로 설정해줍니다. 

 

 

 

3️⃣ TabBarController내에서 탭바의 속성을 정의해줄 수 있는데요!

func setTabBarBackgroundColor() {
        tabBar.barTintColor = .purple
    }

tabBar.barTintColor 속성을 이용해서 원하는 색으로 탭바의 색을 정해줄 수 있습니다!

 

💡그런데 탭바가 살짝 반투명하다구요?

 

 

👉🏻바로바로 isTranslucent 속성 때문에 그렇답니다 ㅎㅎ

isTranslucent 속성이 켜져 있으면 반투명해 보이는 효과가 있습니다.

 

왼쪽은 살짝 반투명해보이고 오른쪽은 완전한 진한 보라색인 것을 확인할 수 있죠? 

따라서 완전하게 불투명한 탭바를 만들고 싶다면 isTranslucent 속성을 꺼주면 됩니다!

 

1) 탭바 Inspector창에서 속성 꺼주기

 

2) 코드로 속성 꺼주기

func setTabBarBackgroundColor() {
        tabBar.barTintColor = .purple
        tabBar.isTranslucent = false
    }

 

 

 

짜잔! 완성된 탭바의 모습입니다  ✨✨

 

 

< 전체 코드 >

//
//  TabBarController.swift
//  TabBarBackgroundColorChange
//
//

import UIKit

class TabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        setTabBarBackgroundColor()
    }
    

    func setTabBarBackgroundColor() {
        tabBar.barTintColor = .purple
        tabBar.isTranslucent = false
    }
}

 

 

https://github.com/hwangJi-dev/iOS-Practice/tree/master/TabBarBackgroundColorChange

 

hwangJi-dev/iOS-Practice

지은 iOS 기록장🍎. Contribute to hwangJi-dev/iOS-Practice development by creating an account on GitHub.

github.com

 


 

+) iOS 15 이상

Appdelegate에서 아래의 코드를 작성해주시면 됩니다!

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        //탭바 배경색 변경
        if #available(iOS 15.0, *) {
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground()
        
        //바꾸고 싶은 색으로 backgroundColor를 설정
        UITabBar.appearance().backgroundColor = UIColor.white
        }
        return true
}

 

 

 

 

오늘은 이렇게 탭바 배경색 바꾸는 방법에 대해서 공부를 해봤습니다 :)

여러분들께 유익한 정보가 되었으면 좋겠네요 ㅎㅎ

도움이 되셨다면 공감 눌러주세용 👍🏻

반응형
Comments