마켓컬리 스타일 앱

(SnapKit & CollectionViewPractice)

기능

  • No Storyboard
  • SnapKit
  • UITabBarController
  • UICollectionView

구현

  • 상단 바

상세

  • No Storyboard에서 UITabBarController -> UINavigationController -> UIViewController 추가
    • MainTabBarController.swift

self.viewControllers = [recommendNC, homeNC] 이거 안써서 한시간 날렸다. 순서도 중요!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let homeVC = HomeViewController()
        let recommendVC = RecommendViewController()
        
        let homeNC = UINavigationController(rootViewController: homeVC)
        let recommendNC = UINavigationController(rootViewController: recommendVC)
        
        self.viewControllers = [recommendNC, homeNC]
        self.tabBar.backgroundColor = .white
        self.tabBar.tintColor = .purple
        self.tabBar.unselectedItemTintColor = .lightGray
    
        let homeTabBarItem = UITabBarItem(title: "홈", image: UIImage(systemName: "house"), tag: 1)
        let recommendTabBarItem = UITabBarItem(title: "추천", image: UIImage(systemName: "star"), tag: 0)
        
        homeTabBarItem.selectedImage = UIImage(systemName: "house.fill")
        recommendTabBarItem.selectedImage = UIImage(systemName: "star.fill")
        
        homeNC.tabBarItem = homeTabBarItem
        recommendNC.tabBarItem = recommendTabBarItem
    }
  • 추천 탭의 네비게이션 바 설정
    • 뷰 전체 색을 보라색, mainView를 흰색으로 하고 네비게이션 바 밑 부분 전체를 덮는다.
    • 바 버튼 추가할 때, 순서 중요
    • RecommendViewController.swift

직접 만들어 봤는데, 네비게이션 바를 이용하는게 더 간단하고 기기별로 동일한 UI를 보여줄 수 있어서 더 좋았다.

    let mainView = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
                
        // MARK: 네비게이션 바 설정
        self.view.backgroundColor = .purple
        self.title = "추천"
        // title 글자 색상 변경
        self.navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
        
        let locationBarButtonItem = UIBarButtonItem(
                                                    image: UIImage(systemName: "cart"),
                                                    style: .plain,
                                                    target: nil,
                                                    action: nil
                                                    )
        let basketBarButtonItem = UIBarButtonItem(
                                                    image: UIImage(systemName: "location"),
                                                    style: .plain,
                                                    target: nil,
                                                    action: nil
                                                    )
        // BarButtonItem 색생 변경
        self.navigationController?.navigationBar.tintColor = .white
        
        // 우측 바 버튼 아이템에 추가
        self.navigationItem.rightBarButtonItems = [locationBarButtonItem, basketBarButtonItem]
        
        self.view.addSubview(mainView)
        
        mainView.backgroundColor = .white
        mainView.snp.makeConstraints { make in
            make.leading.bottom.trailing.equalToSuperview()
            // top은 safeArea까지
            make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top)
        }

    }

GitHub

View Github