감자주먹밥

[IOS] Tab Bar Controller 사용법 본문

IOS/UIKit

[IOS] Tab Bar Controller 사용법

JustHm 2022. 1. 22. 22:19
728x90

오늘은 UITabBarController 사용하는 법을 알아보겠습니다.

 

TabBarController 기본

처음에 UI를 만들어주면 initial View로 설정이 안 되어 있을 텐데, TabBarController를 initial VC로 설정해주고 원래 있던 VC는 삭제해주면 됩니다!

 

이렇게만 하면 정말 간단하게 화면이 이동되는것을 볼 수 있습니다만...

탭 화면에서 다른 화면으로 넘어가게 만드는게 되지 않습니다.

 

그래서 단일 화면을 사용하는게 아니라면! NavigationController 화면을 relationship segue로 설정해줘야 합니다.

 

NavigationController를 만들면 처음엔 2개의 화면이 나올 텐데, NavigationController만 남겨두고 지우고 사용하시면 됩니다.

그리고 Segue를 설정해주시면 됩니다.

 

그 다음 tab bar의 inspector를 확인해보겠습니다.

NavigationController에 생긴 tabBar를 선택하면 볼 수 있는 inspector 화면입니다.

 

가장 위 Tab Bar Item에 Selected Image를 설정해주면 아이콘을 넣을 수 있습니다.

위에 것만 해 놓아도 현재 탭일 때 tint가 입혀지고 아니라면 tint가 없는 무채색이 나오지만, 아래 Bar Item의 이미지를 설정하게 되면?

현재 탭 - tray.fill 아이콘이 보이고    아니라면 tray 아이콘이 표시됩니다.

 

TabBar Inspector창에서 ImageTint와 BackGround 등 설정을 간단하게 할 수 있습니다.

아니면 UITabBarController 클래스를 만들어서 storyboard에 연결해주어 코드로도 설정이 가능합니다.

 

class TabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.tabBar.layer.borderWidth = 0.5
        self.tabBar.layer.borderColor = UIColor.gray.cgColor
    }
}

간단하게 경계를 만들어주는 선을 만들어 봤습니다.

 

UITabBarController에는 tabBar, tabBarItem, title 등 기본적으로 사용할 수 있는 변수들이 있습니다!

tabBar의 레이아웃을 조절하거나 item의 이미지, 이름 등 코드로 간단하게 설정이 가능합니다.


TabBar, NavigationBar 할 때 공부하는 자료는 경계가 있는데 내 화면은 경계가 없어서 한참을 찾아봤는데

https://nrin.tistory.com/11

 

[iOS/Objective-C] iOS 15에서 Navigation Bar / Tab Bar 배경 색이 새까맣게 나오는 현상

iOS 15가 새로 나오고 나서 XCode를 업데이트 했더니 스토리보드의 View controller 에 Appearance 라고 새로 생겼다. Standard / Compact / Scroll Edge / Compact Scroll Edge 4가지 항목이 있는데 각각의 항목..

nrin.tistory.com

IOS15 부터 Appearance가 Transparent 하게 설정되어 있어서 그렇다고 합니다. 어쩐지 내 화면만 투명에 경계도 없더라니

위 블로그 글을 보고 전부 대응을 할 수 있습니다.

 

아니면 그냥 커스텀을 조금 해 주면 경계를 만들 수 있겠죠!

728x90

'IOS > UIKit' 카테고리의 다른 글

[IOS] CollectionView 정리  (0) 2022.02.06
[IOS] DatePicker  (0) 2022.01.23
[IOS] UserDefaults 알아보기  (0) 2022.01.13
[IOS] Alert 알아보기  (0) 2022.01.13
[IOS] TableView 알아보기!  (0) 2022.01.12
Comments