iOS) 탭바 테두리, 그림자 설정 및 iOS 15.0 대응

let appearance = UITabBarAppearance()
// set tabbar opacity
appearance.configureWithOpaqueBackground()

// remove tabbar border line
appearance.shadowColor = UIColor.clear

// set tabbar background color
appearance.backgroundColor = .white

tabBar.standardAppearance = appearance

if #available(iOS 15.0, *) {
        // set tabbar opacity
        tabBar.scrollEdgeAppearance = tabBar.standardAppearance
}

// set tabbar tintColor
tabBar.tintColor = .black

// set tabbar shadow
tabBar.layer.masksToBounds = false
tabBar.layer.shadowColor = UIColor.black.cgColor
tabBar.layer.shadowOpacity = 0.3
tabBar.layer.shadowOffset = CGSize(width: 0, height: 0)
tabBar.layer.shadowRadius = 6

위의 코드로 iOS 13.0 에서도 대응이 된다. iOS 15.0 에서는 위의 scrollEdgeAppearance 코드를 추가해줘야하는데 scrollEdgeAppearance 가 무엇인지 알아보자!

📌 scrollEdgeAppearance

스크롤 가능한 엣지가 탭바의 엣지와 정렬될 때 표시줄의 모양 설정.

Discussion

탭바 컨트롤러가 탭바와 스크롤 뷰를 가지고 있을 때 스크롤 뷰의 컨텐츠의 일부가 탭바의 아래에 나타납니다. 스크롤된 컨텐츠의 엣지가 탭바에 닿으면 UIKit 은 이 프로퍼티의 appearance 세팅을 적용합니다.

---

if #available(iOS 15.0, *) {
        // set tabbar opacity
        tabBar.scrollEdgeAppearance = tabBar.standardAppearance
}

즉, 위의 코드의 의미는 스크롤이 되어 탭바에 닿을 때 탭바의 scrollEdgeAppearance 를 standardAppearance 로 세팅하는 것입니다! 설정하지 않으면 아래와 같이 탭바와 닿을 때 변한답니다!

iOS 13.0 에서도 적용되는지 실행해보자

먼저 프로젝트의 Deployment info 에서 최소버전을 설정할 수 있다! 여기서 13.0 을 설정하게 되면 아래처럼 시뮬레이터의 iOS 버전을 설정해서 사용할 수 있다.

그리고 iOS 13.0 으로 설정하게 되면 tabBar.scrollEdgeAppearance = tabBar.standardAppearance 와 같이 그 이후 버전에서 등장해서 사용할 수 없는 코드들이 에러로 잡히게 된다. 그러면 위에처럼 분기처리를 해주면 된다.