[Swift iOS] Bottom Navigation Bar 만들기 + switch views

토이 프로젝트 첫번째 과제 

UITabBarController 사용하여 Bottom Navigation Bar 만들기 

 

MaterialComponents를 이용하여 BottomNavigation을 만들어보았다. 

아이콘 이미지는 fontawesome에서 받아오기 ㅎㅎㅎ

*swift에서의 fontawesome 사용법은 fontawesome.swift 참고

이렇게 자꾸 외부 라이브러리의 UI기능들을 받아와서 만들어도 되는가 싶지만 뭐 편리하고 빠르게 만들어볼 수 있으니 우선은 감사합니다 하고 쓰겠다. 

1. Xcode 프로젝트 생성

2. 코드로 UI 작성하기 위해 Storyboard 없애주기

3. podfile에 'MaterialComponents'와 'FontAwesome.swift' 추가해주고 pod install

4. UIViewController에서 MDC 내장 BottomNavigatonBar 만들고 속성 추가 및 설정

 

Bottom Navigation을 구현하기 위해 다양한 방법을 시도해봤는데, 컨트롤러로 뷰를 이동시키는 게 구현이 잘 안돼서

네비게이션 버튼 터치할 때마다 view를 바꿔치기 하는 방법으로 구현을 해보았다. 이방법은 작동이 아주 잘 됨. 

 

import UIKit
import Foundation
import MaterialComponents
import FontAwesome_swift

class BottomNavigation: UITabBarController, MDCBottomNavigationBarDelegate {
    let bottomNavBar = MDCBottomNavigationBar()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemGray6
        let view1 = HomeViewController()
        let view2 = CalendarViewController()
        let view3 = WishListViewController()
        let image1 = UIImage.fontAwesomeIcon(name: .home, style: .solid, textColor: .darkGray, size: CGSize(width: 30, height: 30))
        let image2 = UIImage.fontAwesomeIcon(name: .calendarAlt, style: .regular, textColor: .darkGray, size: CGSize(width: 30, height: 30))
        let image3 = UIImage.fontAwesomeIcon(name: .listAlt, style: .regular, textColor: .darkGray, size: CGSize(width: 30, height: 30))
        
        view1.tabBarItem = UITabBarItem(title: "Home", image: image1, tag: 0)
        view2.tabBarItem = UITabBarItem(title: "Calendar", image: image2, tag: 1)
        view3.tabBarItem = UITabBarItem(title: "WishList", image: image3, tag: 2)
        view3.tabBarItem.badgeValue = "2"
        view3.tabBarItem.badgeColor = MDCPalette.deepOrange.tint500
        UITabBar.appearance().tintColor = MDCPalette.deepOrange.tint300
        UITabBar.appearance().unselectedItemTintColor = .systemGray
        
        bottomNavBar.unselectedItemTintColor = .systemGray
        bottomNavBar.selectedItemTintColor = MDCPalette.deepOrange.tint300
        self.viewControllers = [view1, view2, view3]
    }
}