Navigation Bar & Tab Bar - 1[Beginning Level]

Navigation Bar & Tab Bar 기초편입니다.

제 기준 너무 뻔하지 않고 인상 깊었던 내용을 다루려고 합니다. 게시글 하나 쓰는데 어떤 컨텐츠를 다룰지 정말 고민 많이하는데 잡소리는 각설하고, 오늘은 SceneDelegate에 Tab Bar를 내장시키는게 신기해서 다루게 되었습니다.

1. programmaticaly
   : SceneDelegate, FirstViewController, LoginViewController

-- SceneDelegate

// 첫화면이 뜨기전에, 탭바를 내장시키기⭐️⭐️⭐️
    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()
    }

-- FirstViewController

class FirstViewController: UIViewController {

   // 로그인 여부에 관련된 참/거짓 저장하는 속성
   var isLoggedIn = true
   
   //var navigationController: UINavigationController?
   
   override func viewDidLoad() {
       super.viewDidLoad()
   
       makeUI()

       // ⭐️ 로그인이 되어있지 않다면 로그인화면 띄우기
       if !isLoggedIn {
           let vc = LoginViewController()
           vc.modalPresentationStyle = .fullScreen
           present(vc, animated: false, completion: nil)
       }
       
       
   }
   
   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"
       
   }
}

-- LoginViewController

class LoginViewController: UIViewController {
    
    // 로그인 버튼
    private let loginButton: UIButton = {
        let button = UIButton(type: .custom)
        button.backgroundColor = .blue
        button.setTitle("Login", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.titleLabel?.font = .systemFont(ofSize: 20, weight: .bold)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.addTarget(self, action: #selector(loginButtonTapped), for: .touchUpInside)
        return button
    }()

    // 굳이 뷰를 따로 만들지 않았음 (MVC패턴으로 만들지 않았음)
    override func viewDidLoad() {
        super.viewDidLoad()
        makeUI()
    }

    // UI설정하는 코드, 버튼의 오토레이아웃
    func makeUI() {
        view.backgroundColor = #colorLiteral(red: 0.8321695924, green: 0.985483706, blue: 0.4733308554, alpha: 1)
        view.addSubview(loginButton)
        
        NSLayoutConstraint.activate([
            loginButton.widthAnchor.constraint(equalToConstant: 120),
            loginButton.heightAnchor.constraint(equalToConstant: 45),
            loginButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            loginButton.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
        
    }
    
    // 버튼 누르면 동작하는 코드 ===> 로그인하면, 디스미스 (탭바가 더 아래에 깔려있음)
    @objc func loginButtonTapped() {
        dismiss(animated: true, completion: nil)
    }
}