반응형
토이 프로젝트 첫번째 과제
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]
}
}
728x90
반응형
'Project > ToyProject_Couple App' 카테고리의 다른 글
[Swift iOS] Open Weather Map API 사용해 날씨 데이터 불러오기 (0) | 2021.02.09 |
---|---|
[Swift iOS] calculate date 날짜 계산하기 (0) | 2021.01.27 |
[Swift iOS] 캘린더 라이브러리 _FSCalendar 설치 및 사용하기 (0) | 2021.01.23 |
[Swift iOS] Font Awesome 설치 및 아이콘 사용하기 (0) | 2021.01.23 |
첫 번째 토이프로젝트 (1) | 2021.01.21 |