이전글 보러가기!
2022.02.14 - [iOS] - [iOS] 프로젝트에 탭바(TabBar) 만들기 (같은 스토리보드)
[iOS/Swift] 프로젝트에 탭바(TabBar) 만들기 (같은 스토리보드)
iOS 앱을 개발하다보면 탭바가 없는 앱을 찾아보기 힘들다 간단하게 탭바 구성하는 방법입니다! (특별한 커스텀을 하는 방법은 나중에 올려보겠습니다~!) 먼저 Tab Bar Controller 선택하기 그럼 이렇
meenyweeny.tistory.com
2022.02.14 - [iOS] - [iOS] 프로젝트에 탭바(TabBar) 만들기 (다른 스토리보드)
[iOS/Swift] 프로젝트에 탭바(TabBar) 만들기 (다른 스토리보드)
이전글 보러가기! 2022.02.14 - [iOS] - [iOS] 프로젝트에 탭바(TabBar) 만들기 이전 글에 이어서, 2. 만든 Tab Bar Controller 스토리보드 밖에 연결할 View Controller들이 존재할 때 storyboard에서 연결하기..
meenyweeny.tistory.com
스토리보드로만 구성을 하는 두 방법에 이어서,
3. 그냥 코드로 구성하기! (1,2번 어느 상황이든 다 가능)
방법에 대해 설명해보겠습니다!
시작상태입니다! 그냥 텅 빈, 아무 세그도 연결되어있지 않은 외로운 탭바 컨트롤러 하나에서 시작할게요!
그리고, 두번째 튜토리얼 글에서 썼던 스토리보드 세개를 재사용해보겠습니다..!
각 View Controller의 시작 상태예요!
(두번째 설명 글을 혹시 따라하신 분이 계시다면, tabbar item 추가해줬던거 지워주시면 됩니다!)
아무것도 없는 상태에서 시작을 해볼게요!
그리고, 각각 스토리보드에 존재하는 View Controller에
연결해줄 Cocoa Touch Class 파일을 만들어줄게요!
Class는 UIViewController이고, 이것도 역시
One, Two, Three 세개 만들어줬어요!
각각 스토리보드에 있는 View Controller에, 만든 ViewController 파일을 이렇게 연결도 시켜줄게요!
그럼 이제 코드로 Tabbar를 구성하러 가봅시다~!
Subclass가 UITabBarController인 Cocoa Touch Class 파일 하나 더 만들어주세요!
그리구 이 친구도 storyboard에 가서 TabBar controller와 연결시켜줄게요!
그럼 이제, 만든 TabBarViewController 파일로 이동해봅시다!
앞에 두개의 글에서 했던 일 중 크게 두가지가 있었는데요
바로
1. tabbar icon을 누르면 연결될 view controller 설정해주기!
2. tabbar icon의 이미지, title 설정해주기!
이 두개였습니다!
두가지 일을 하나의 함수로 설정해볼게요!
코드의 과정은
뷰컨트롤러 세개 변수로 만들기 -> 변수마다 item의 icon 설정해주기 -> 그 친구들을, 탭바 컨트롤러가 보여줄 수 있는 애들로 추가해주기!
먼저, 세개의 guard let ~VC 구문으로, 이동을 원하는 View Controller에 대해서 변수로 만들어주었어요!
각각 다른 스토리보드라, 다른 스토리보드로 이동하는 코드인데, 같은 스토리보드에 View Controller를 만드셨다면
스토리보드 부분에 self.storyboard?.instantiateViewController(~) 으로 해주시면 될 것 같아요!
화면 전환하기는 아주 기본적인 것이지만 매우매우 중요하니 다음에 기회가 되면 써보겠습니닷
그리고, 각각에 대해 tabBarItem 속성을 설정해주었습니다!
마지막으로, 자기 자신에게 setViewControllers 메서드를 통해, 배열로 넘겨준 이 친구들 보여주라고 알려줍니다!
열심히 만든 이 함수를 viewDidLoad에 꼭! 추가해야 제대로 적용이 됩니다!!
아래에 전체 코드를 붙여드릴게요!
먼저 실행시켜봅시다!
잘 실행이 됩니다!
코드입니다!
import UIKit
class TabBarViewController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
setTabBar()
}
private func setTabBar() {
guard let oneVC = UIStoryboard.init(name: "One", bundle: nil).instantiateViewController(withIdentifier: "OneViewController") as? OneViewController else { return }
guard let twoVC = UIStoryboard.init(name: "Two", bundle: nil).instantiateViewController(withIdentifier: "TwoViewController") as? TwoViewController else { return }
guard let threeVC = UIStoryboard.init(name: "Three", bundle: nil).instantiateViewController(withIdentifier: "ThreeViewController") as? ThreeViewController else { return }
oneVC.tabBarItem.image = UIImage(systemName: "star")
oneVC.tabBarItem.selectedImage = UIImage(systemName: "star.fill")
oneVC.tabBarItem.title = "별"
twoVC.tabBarItem.image = UIImage(systemName: "heart")
twoVC.tabBarItem.selectedImage = UIImage(systemName: "heart.fill")
twoVC.tabBarItem.title = "하트"
threeVC.tabBarItem.image = UIImage(systemName: "circle")
threeVC.tabBarItem.selectedImage = UIImage(systemName: "circle.fill")
threeVC.tabBarItem.title = "동그라미"
self.setViewControllers([oneVC,twoVC,threeVC], animated: true)
}
}
그럼 긴 글 봐주셔서 감사합니다!
'iOS' 카테고리의 다른 글
[iOS/Swift] UIView, UILabel에 그라데이션 색깔 적용 Extension (0) | 2022.03.14 |
---|---|
[iOS] MVC 디자인 패턴은 뭘까? 를 듣고 정리 (0) | 2022.03.01 |
[iOS/Swift] ViewController Life Cycle (뷰의 생명주기) (3) | 2022.02.20 |
[iOS/Swift] 프로젝트에 탭바(TabBar) 만들기 (다른 스토리보드) (0) | 2022.02.14 |
[iOS/Swift] 프로젝트에 탭바(TabBar) 만들기 (같은 스토리보드) (0) | 2022.02.14 |