[iOS/Swift] 네비게이션바+탭바 사용하는 방법

스토리보드로 네이게이션바 + 탭바 구현하기

• Button과 view controller를 추가한 뒤 뷰 전환을 위해 세그웨이를 추가한다.

• 첫번째 viewController를 잡고 하단의 버튼 클릭 후 Navigation Controller를 선택하거나, 상단의 Editor -> Embed In -> Navigation Controller를 선택한다.

• 그럼 아래과 같이 네이게이션바가 하위에 추가된다. 상단의 네모칸을 누르면 네비게이션 아이템이 선택되는데 Title에 입력하면은 아래와 같이 표시된다.
  
  

• 네비게이션바의 백그라운드를 변경하기 위해 클릭한 뒤 오른쪽 속성창에서 Scroll Edge 체크, Background Color를 white로 변경한다.
  

• 새로운 view Controller를 추가하고, 네비게이션 컨트롤러를 클릭한 뒤 Tap Bar Controller를 선택한다.

• 이제 첫번째 탭를 클릭했을 때 버튼이 있는 뷰가, 두번째 탭을 눌렀을 때는 노란색 뷰가 보여질 수 있게 탭바컨트롤러를 control버튼을 누른 후 노란색뷰와 'Relationship Segue -> view controllers'를 클릭하여 연결한다.

• 탭바 아이템에 이미지와 텍스트를 변경하기 위해 하단을 클릭하여 오른쪽 Bar Item에서 Title과 Image를 변경한다.

• 완성!

코드로 네비게이션바 + 탭바 구현하기

• 첫화면이 뜨기 전에 탭바를 내장시키기 위해, sceneDelegate.swift -> scene 메소드에 네비게이션바 + 탭바를 생성하는 코드를 추가한다.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        
        guard let windowScene = (scene as? UIWindowScene) else { return }
        
        window = UIWindow(windowScene: windowScene)

        // 탭바컨트롤러의 생성
        let tabBarVC = UITabBarController()
        
        // 첫번째 화면은 네비게이션컨트롤러로 만들기 (기본루트뷰 설정)
        let vc1 = UINavigationController(rootViewController: FirstViewController())
        let vc2 = SecondViewController()
        let vc3 = ThirdViewController()
        let vc4 = FourthViewController()
        let vc5 = FifthViewController()
        
        // 탭바 이름들 설정
        vc1.title = "Main"
        vc2.title = "Search"
        vc3.title = "Post"
        vc4.title = "Likes"
        vc5.title = "Me"
        
        // 탭바로 사용하기 위한 뷰 컨트롤러들 설정
        tabBarVC.setViewControllers([vc1, vc2, vc3, vc4, vc5], animated: false)
        tabBarVC.modalPresentationStyle = .fullScreen
        tabBarVC.tabBar.backgroundColor = .white
        
        // 탭바 이미지 설정 (이미지는 애플이 제공하는 것으로 사용)
        guard let items = tabBarVC.tabBar.items else { return }
        items[0].image = UIImage(systemName: "trash")
        items[1].image = UIImage(systemName: "folder")
        items[2].image = UIImage(systemName: "paperplane")
        items[3].image = UIImage(systemName: "doc")
        items[4].image = UIImage(systemName: "note")
            
        // 기본루트뷰를 탭바컨트롤러로 설정⭐️⭐️⭐️
        window?.rootViewController = tabBarVC
        window?.makeKeyAndVisible()
    }

• 그리고 첫 화면 뷰컨트롤러에서 viewDidLoad() 가 호출될 때 아래의 코드를 추가한다.

func makeUI() {
        view.backgroundColor = .gray
        
        // (네비게이션바 설정관련) iOS버전 업데이트 되면서 바뀐 설정⭐️⭐️⭐️
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()  // 불투명으로
        //appearance.backgroundColor = .brown     // 색상설정
        
        //appearance.configureWithTransparentBackground()  // 투명으로
        
        navigationController?.navigationBar.tintColor = .blue
        navigationController?.navigationBar.standardAppearance = appearance
        navigationController?.navigationBar.compactAppearance = appearance
        navigationController?.navigationBar.scrollEdgeAppearance = appearance
        
        title = "Main"
        
    }