안녕하세요. 개발하는 정주입니다.
오늘은 "모서리가 둥근 Rounded TabBar 만들기"에 대해 알아보겠습니다.
Custom TabBar로 위쪽 모서리가 둥근 Rounded TabBar를 만들어 보겠습니다.
결과 미리 보기
오늘 만들 TabBar는 위쪽 모서리가 둥글고 아래쪽은 평평한 모양입니다.
많은 앱에서 보셨을 모양이죠?
오늘은 이 모양의 탭 바를 만들어 보겠습니다.
UITabBarController 클래스 생성하기
TabBar를 커스텀해야 하니 UITabBarController를 상속하는 클래스를 하나 생성합니다.
class CustomTabBarController: UITabBarController {
...
}
UITabBarController는 UIViewController를 상속합니다.
open class UITabBarController : UIViewController, UITabBarDelegate, NSCoding {
따라서 viewDidLoad( ) 같은 Life Cycle 메서드를 이용할 수 있다는 장점이 있습니다.
viewDidLoad( )에 ViewController를 설정하고 UI setup 메서드를 넣으면 됩니다.
UITabBar 모양 설정하기
UITabBarController의 UITabBar의 모양을 설정해야 합니다.
UITabBar는 UITabBarController에 get property로 선언되어 있습니다.
open var tabBar: UITabBar { get }
따라서 Custom 탭바 클래스에서는 self.tabBar 혹은 그냥 tabBar만 써서 접근이 가능합니다.
이제 tabBar의 모양을 설정해 줍시다.
private func setupTabBar() {
tabBar.tintColor = UIColor.mainColor
tabBar.backgroundColor = UIColor(named:"TabBarColor")
tabBar.layer.cornerRadius = tabBar.frame.height * 0.41
tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
}tintColor와 backgroundColor를 설정합니다.
tintColor는 TabBar의 메뉴 색상이고 backgroundColor는 탭 바의 색상입니다.
오늘 알아볼 모서리가 둥근 탭 바는 cornerRadius와 maskedCorners로 구현됩니다.
cornerRadius는 자주 보셨을 속성으로 생각됩니다.
The radius to use when drawing rounded corners for the layer’s background. Animatable.
cornerRadius는 공식 홈페이지에서 말 그대로 layer의 background를 rounded corners로 그릴 때 사용하라고 나와있습니다.
그래서 UITabBar에 cornerRadius를 설정하면 모서리가 둥글어집니다.
바로 이렇게요!
네 모서리가 모두 둥글게 처리된 모습입니다.
저희는 위쪽 모서리만 둥글게 하고 싶기 때문에 maskedCorners 속성도 설정해야 합니다.
maskedCorners는 머쓱하게도 공식 홈페이지에 설명이 기재되어 있지 않습니다.
Xcode에서 Jump Definition 기능으로 해당 속성으로 이동하면 주석이 적혀 있습니다.
Defines which of the four corners receives the masking when using
`cornerRadius' property. Defaults to all four corners.
마스킹을 받는다는 의미는 cornerRadius의 영향을 받는다로 이해하면 쉽습니다.
즉, cornerRadius를 적용할 모서리를 설정하는 속성입니다.
네 모서리는 각각
layerMinXMinYCorner, layerMaxXMinYCorner,
layerMinXMaxYCorner, layerMaxXMaxYCorner 입니다.
저희는 위쪽 모서리만 cornerRadius 적용을 할 것이므로 layerMinXMinYCorner, layerMaxXMinYCorner를 설정해준 것입니다.
반대로 아래쪽만 설정하고 싶다면 layerMinXMaxYCorner, layerMaxXMaxYCorner로 설정하면 됩니다.
마무리
오늘은 특정 모서리가 둥근 Custom TabBar를 만들어 보았습니다.
생각보다 흔하게 보이는 탭 바 모양인 만큼 기록해두면 좋을 것 같아 포스팅을 해보았습니다.
다음에는 탭 바에 테두리를 넣는 방법에 대해 포스팅해보겠습니다.
감사합니다!
아직은 초보 개발자입니다.
더 효율적인 코드 훈수 환영합니다!
공감과 댓글 부탁드립니다.
swift, iOS, iOS 개발, 아이폰, 앱 개발, 개발, 코딩