Swift 인스타그램 앱 클론 코딩(2)

Swift 인스타그램 UI 클론 코딩(2)

Swift 인스타그램 UI 클론 코딩(1)

TabBarController 구현

• TabBarController를 구현할 TabBarController이라는 이름에 Swif file을 만들겠습니다.
• 처음에 앱이 실행될 때 TabBarController가 rootViewController가 되야 하기 때문에 SceneDelegate를 수정하겠습니다.

window?.rootViewController = TabBarController()

TabBarController UITabBarItem

• TabBarController에 들어갈 두개의 아이템을 만들겠습니다
• 피드를 보여줄 feedViewController 그리고 프로필을 보여줄 profileController
• UITabBarItem은 아이템의 타이틀과 이미지 그리고 선택된 이미지들을 설정 할 수 있습니다.
• UIImage(systemName: "")을 쓰시면 sf symbol을 사용할 수 있습니다.
• 이 두 아이템을 viewControllers에 담아줍니다.
• https://developer.apple.com/documentation/uikit/uitabbaritem

import UIKit

final class TabBarController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let feedViewController = UIViewController()
        feedViewController.tabBarItem = UITabBarItem(
            title: nil,
            image: UIImage(systemName: "house"),
            selectedImage: UIImage(systemName: "house.fill"))
        
        let profileViewController = UIViewController()
        profileViewController.tabBarItem = UITabBarItem(
            title: nil,
            image: UIImage(systemName: "person"),
            selectedImage: UIImage(systemName: "person.fill"))
        
        viewControllers = [feedViewController, profileViewController]
    }
}

• 실행을 해보면 탭바가 생성이 됬습니다.

• 탭바의 Tint 색상을 검정색으로 바꿀것이기 때문에 SceneDelegate에 가서 window의 TintColor를 .label로 지정하겠습니다.
• .label로 지정을 해주면 light모드일 때는 검정색 Dark모드일때는 하얀색으로 표시를 해줍니다.

window?.tintColor = .label

UINavigationController 구현

• 기존의 ViewController를 삭제하지 않고 Rename을 해서 사용하겠습니다.
• Rename은 cmd키를 누른상태에서 class를 선택을 하면 이미지와 같이 옵션이 나타납니다.
• FeedViewController로 바꾸겠습니다.

uploadButton 구현

• NavigationControllerBar에 업로드 버튼을 구현을 할 것이기 때문에 FeedViewController에서 setupNavigationBar라는 메서드를 선언해주겠습니다. 따로 extension으로 빼주는 이유는 viewDidLoad에 코드가 계속 점점 쌓일것이기 때문에 지저분해지는걸 방지하여 따로 빼준것입니다.

import SnapKit
import UIKit

class FeedViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupNavigationBar()
    }


}

private extension FeedViewController {
    func setupNavigationBar() {
        navigationItem.title = "Instagram"
        
        let uploadButton = UIBarButtonItem(
            image: UIImage(systemName: "plus.app"),
            style: .plain,
            target: self,
            action: nil
        )
        navigationItem.rightBarButtonItem = uploadButton
    }
}

• TabBarController에 가셔서 UIViewController를 UINavigationController로 바꿔주시고 rootViewController에 FeedViewController를 호출해줍니다.

let feedViewController = UINavigationController(rootViewController: FeedViewController())

• 실행 화면