[Swift] iOS 앱 개발(Xcode) Byte Degree - week.07

[Review] (6주차) 실습

2022.07.22 - [Development/Swift] - [Swift] iOS 앱 개발(Xcode) Byte Degree - week.06

[Swift] iOS 앱 개발(Xcode) Byte Degree - week.06

---

당근 페이지(CarrotHomeTab)

Class: HomeViewController, DetailViewController 구성 (Subclass: UIViewController)

Main의 View Controller에서 상단바 Editor > Embed In > Navigation Controller / Tab Bar Controller 클릭

Class: MainNavigationViewController(UINavigationController), MainTabBarController(UITabBarController)

이후 Class 연결

DetailViewController의 Storyboard는 별도로 생성

    @IBAction func ctaButtonTapped(_ sender: Any) {
        let sb = UIStoryboard(name: "Detail", bundle: nil)
        let vc = sb.instantiateViewController(withIdentifier: "DetailViewController") as! DetailViewController
        navigationController?.pushViewController(vc, animated: true)
    }

실행했을 때 다음과 같은 에러 발생

Main의 entry point 설정

우측 Is Initial View Controller 체크 및 좌측 시작 화살표 확인

다시 실행하면 다음과 같이 UI 생성

Navigation Bar 조절 및 하단 이미지 등 UI 변경

홈: HomeViewController

동네 생활: MyTownViewController 생성 및 연결

내 근처 (설정하지 않음)

채팅: ChatViewController 생성 및 연결

나의 당근: MyProfileViewController 생성 및 연결

 

추가 구성

탭이 눌릴 때마다, 그에 맞는 네비게이션 바를 구성하고자 함
- 탭이 눌리는 것을 감지
- 감지 후에, 그 탭에 맞게 네비게이션 바 구성 업데이트 필요

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        navigationItem.leftBarButtonItem = UIBarButtonItem(title: "hello", style: .plain, target: nil, action: nil)
        navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .bookmarks, target: nil, action: nil)
        
        delegate = self
    }
}

extension MainTabBarController: UITabBarControllerDelegate {
    func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        print("--> 어떤 vc가 선택:\(viewController)")
        
        switch viewController {
        case is HomeViewController:
            let titleItem = UIBarButtonItem(title: "정자동", style: .plain, target: nil, action: nil)
            let feedItem = UIBarButtonItem(barButtonSystemItem: .bookmarks, target: nil, action: nil)
            navigationItem.leftBarButtonItem = titleItem
            navigationItem.rightBarButtonItem = feedItem
            
        case is MyTownViewController:
            let titleItem = UIBarButtonItem(title: "정자동", style: .plain, target: nil, action: nil)
            let feedItem = UIBarButtonItem(barButtonSystemItem: .bookmarks, target: nil, action: nil)
            navigationItem.leftBarButtonItem = titleItem
            navigationItem.rightBarButtonItem = feedItem
            
        case is ChatViewController:
            let titleItem = UIBarButtonItem(title: "채팅", style: .plain, target: nil, action: nil)
            let feedItem = UIBarButtonItem(barButtonSystemItem: .bookmarks, target: nil, action: nil)
            navigationItem.leftBarButtonItem = titleItem
            navigationItem.rightBarButtonItem = feedItem
            
        case is MyProfileViewController:
            let titleItem = UIBarButtonItem(title: "나의 당근", style: .plain, target: nil, action: nil)
            let feedItem = UIBarButtonItem(barButtonSystemItem: .bookmarks, target: nil, action: nil)
            navigationItem.leftBarButtonItem = titleItem
            navigationItem.rightBarButtonItem = feedItem
            
        default:
            let titleItem = UIBarButtonItem(title: "당근 당근", style: .plain, target: nil, action: nil)
            let feedItem = UIBarButtonItem(barButtonSystemItem: .bookmarks, target: nil, action: nil)
            navigationItem.leftBarButtonItem = titleItem
            navigationItem.rightBarButtonItem = feedItem
        }
    }
}

CustomBarItem 생성

MainTabBar 구성 변경하여 좌측 상단 text UI 설정

---

우측 상단 Item 개수 조절

MainTabBarController, delegate = self 하단에...

// 각 탭에 맞게 네비게이션바 아이템 구성하기
// - 홈: 타이틀, 피드, 서치
// - 동네활동: 타이틀, 피드
// - 내 근처: 타이틀
// - 채팅: 타이틀, 피드
// - 나의 당근: 타이틀, 설정

let searchConfig = CustomBarItemConfiguration(image: UIImage(systemName: "magnifyingglass"), handler: { print("--> search tapped") })
let searchView = CustomBarItem(config: searchConfig)
let searchItem = UIBarButtonItem(customView: searchView)

let feedConfig = CustomBarItemConfiguration(image: UIImage(systemName: "bell"), handler: { print("--> feed tapped") })
let feedView = CustomBarItem(config: feedConfig)
let feedItem = UIBarButtonItem(customView: feedView)

하단 let feedItem 삭제 및 수정

navigationItem.leftBarButtonItem = titleItem
navigationItem.rightBarButtonItems = [feedItem, searchItem]

 

실행하여 search 확인

            let searchConfig = CustomBarItemConfiguration(image: UIImage(systemName: "magnifyingglass"), handler: { print("--> search tapped") })
            let searchView = CustomBarItem(config: searchConfig)
            NSLayoutConstraint.activate([
                searchView.widthAnchor.constraint(equalToConstant: 30)
            ])
            
            let searchItem = UIBarButtonItem(customView: searchView)
            
            let feedConfig = CustomBarItemConfiguration(image: UIImage(systemName: "bell"), handler: { print("--> feed tapped") })
            let feedView = CustomBarItem(config: feedConfig)
            NSLayoutConstraint.activate([
                feedView.widthAnchor.constraint(equalToConstant: 30)
            ])
            
            let feedItem = UIBarButtonItem(customView: feedView)

UIBarButtonItem+CustomView 생성(command + N)

//
//  MainTabBarController.swift
//  CarrotHomeTab
//
//  Created by sehee on 2022/08/24.
//

import UIKit

// 1. 탭이 눌릴 때마다, 그에 맞는 네비게이션 바를 구성하고자 함
// - 탭이 눌리는 것을 감지
// - 감지 후에, 그 탭에 맞게 네비게이션 바 구성 업데이트 필요


// 3. 앱이 시작할 때, 네비게이션바 아이템 설정을 완료하고 싶음
// - 네비게이션 바를

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        delegate = self
    }
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        updateNavigaitionItem(vc: self.selectedViewController!)
        //self.selectedIndex
        //self.selectedViewController
    }
    
    private func updateNavigaitionItem(vc: UIViewController) {
        switch vc {
        case is HomeViewController:
            let titleConfig = CustomBarItemConfiguration(
                title: "정자동",
                handler: { })
            
            let titleItem = UIBarButtonItem.generate(with: titleConfig)
            
            let searchConfig = CustomBarItemConfiguration(
                image: UIImage(systemName: "magnifyingglass"),
                handler: { print("--> search tapped") })
            
            let searchItem = UIBarButtonItem.generate(with: searchConfig, width: 30)
            
            let feedConfig = CustomBarItemConfiguration(
                image: UIImage(systemName: "bell"),
                handler: { print("--> feed tapped") })
            let feedItem = UIBarButtonItem.generate(with: feedConfig, width: 30)
            
            //let titleItem = UIBarButtonItem(title: "정자동", style: .plain, target: nil, action: nil)
            //let feedItem = UIBarButtonItem(barButtonSystemItem: .bookmarks, target: nil, action: nil)
            navigationItem.leftBarButtonItem = titleItem
            navigationItem.rightBarButtonItems = [feedItem, searchItem]
            navigationItem.backButtonDisplayMode = .minimal
            
        case is MyTownViewController:
            let titleConfig = CustomBarItemConfiguration(
                title: "정자동",
                handler: { })
            
            let titleItem = UIBarButtonItem.generate(with: titleConfig)
            
            let feedConfig = CustomBarItemConfiguration(
                image: UIImage(systemName: "bell"),
                handler: { print("--> feed tapped") })
            let feedItem = UIBarButtonItem.generate(with: feedConfig, width: 30)
            
            navigationItem.leftBarButtonItem = titleItem
            navigationItem.rightBarButtonItems = [feedItem]
            navigationItem.backButtonDisplayMode = .minimal
            
        case is ChatViewController:
            let titleConfig = CustomBarItemConfiguration(
                title: "채팅",
                handler: { })
            
            let titleItem = UIBarButtonItem.generate(with: titleConfig)
            
            let feedConfig = CustomBarItemConfiguration(
                image: UIImage(systemName: "bell"),
                handler: { print("--> feed tapped") })
            let feedItem = UIBarButtonItem.generate(with: feedConfig, width: 30)
            
            navigationItem.leftBarButtonItem = titleItem
            navigationItem.rightBarButtonItems = [feedItem]
            navigationItem.backButtonDisplayMode = .minimal
            
        case is MyProfileViewController:
            let titleConfig = CustomBarItemConfiguration(
                title: "나의 당근",
                handler: { })
            
            let titleItem = UIBarButtonItem.generate(with: titleConfig)
            
            let settingConfig = CustomBarItemConfiguration(
                image: UIImage(systemName: "magnifyingglass"),
                handler: { print("--> setting tapped") })
            
            let settingItem = UIBarButtonItem.generate(with: settingConfig, width: 30)
            
            navigationItem.leftBarButtonItem = titleItem
            navigationItem.rightBarButtonItems = [settingItem]
            navigationItem.backButtonDisplayMode = .minimal
            
        default:
            let titleConfig = CustomBarItemConfiguration(
                title: "정자동",
                handler: { })
            
            let titleItem = UIBarButtonItem.generate(with: titleConfig)
            
            //let titleItem = UIBarButtonItem(title: "정자동", style: .plain, target: nil, action: nil)
            //let feedItem = UIBarButtonItem(barButtonSystemItem: .bookmarks, target: nil, action: nil)
            navigationItem.leftBarButtonItem = titleItem
            navigationItem.rightBarButtonItems = []
            navigationItem.backButtonDisplayMode = .minimal
        }
    }
}

// 2. 각 탭에 맞게 네비게이션바 아이템 구성하기
// - 홈: 타이틀, 피드, 서치
// - 동네활동: 타이틀, 피드
// - 내 근처: 타이틀
// - 채팅: 타이틀, 피드
// - 나의 당근: 타이틀, 설정

extension MainTabBarController: UITabBarControllerDelegate {
    func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        print("--> 어떤 vc가 선택:\(viewController)")
        
        updateNavigaitionItem(vc: viewController)
    }
}

내비게이션 바 UI 설정

//
//  MainNavigationViewController.swift
//  CarrotHomeTab
//
//  Created by sehee on 2022/08/24.
//

import UIKit

class MainNavigationViewController: UINavigationController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let backImage = UIImage(systemName: "arrow.backward")
        navigationBar.backIndicatorImage = backImage
        navigationBar.backIndicatorTransitionMaskImage = backImage
        navigationBar.tintColor = .white
    }
}