[iOS - UI Custom] 8. 커스텀 클래스 - UITabBarController

*실습 : TabBarContoller를 custom하여, storyboard에서 클래스 지정으로 가져다 쓰기

1. 스토리보드 준비

2. 새로운 클래스 작성 후, storyboard의 Tab Bar Controller와 연결

 - 연결 후 tabBar안보이게 설정(isHidden = true)

class CSTabBarController: UITabBarController {
    let csView = UIView()
    let tabItem01 = UIButton(type: .system)
    let tabItem02 = UIButton(type: .system)
    let tabItem03 = UIButton(type: .system)
    
    override func viewDidLoad() {
        self.tabBar.isHidden = true
    }
}

탭바처럼 보이는 바 구현

        // CSTabBarController.swift, viewDidLoad()
        let width = self.view.frame.width
        let height: CGFloat = 50 // 기존 탭바의 디폴트 높이 = 50
        let x: CGFloat = 0
        let y = self.view.frame.height- height
        self.csView.frame = CGRect(x: x, y: y, width: width, height: height)
        self.csView.backgroundColor = .brown
        
        self.view.addSubview(csView)

 

4. 탭 바 아이템 구현

아이템 생성

1) 버튼 정의

        // CSTabBarController.swift, viewDidLoad()
        let tabBtnWidth = self.csView.frame.size.width / 3
        let tabBtnHeight = self.csView.frame.height
        
        self.tabItem01.frame = CGRect(x: 0, y: 0, width: tabBtnWidth, height: tabBtnHeight)
        self.tabItem02.frame = CGRect(x: tabBtnWidth, y: 0, width: tabBtnWidth, height: tabBtnHeight)
        self.tabItem03.frame = CGRect(x: tabBtnWidth * 2, y: 0, width: tabBtnWidth, height: tabBtnHeight)
        
// addTabBarBtn메서드 밑에 정의
        self.addTabBarBtn(btn: self.tabItem01, title: "첫 번째 버튼", tag: 0)
        self.addTabBarBtn(btn: self.tabItem02, title: "두 번째 버튼", tag: 1)
        self.addTabBarBtn(btn: self.tabItem03, title: "세 번째 버튼", tag: 2)

 

2) 버튼 추가

// CSTabBarController.swift
    func addTabBarBtn(btn: UIButton, title: String, tag: Int) {
        btn.setTitle(title, for: .normal)
        btn.tag = tag
        
        btn.setTitleColor(.white, for: .normal)
        btn.setTitleColor(.yellow, for: .selected)
        
        btn.addTarget(self, action: #selector(onTabBarItemClick(_:)), for: .touchUpInside)
        self.csView.addSubview(btn)
    }
    
    @objc func onTabBarItemClick(_ sender: UIButton){
        // UIButton의 프로퍼티에도 isSelected가 존재
        self.tabItem01.isSelected = false
        self.tabItem02.isSelected = false
        self.tabItem03.isSelected = false
        
        sender.isSelected = true
        
        self.selectedIndex = sender.tag
    }
    

 

3) 첫 번째 화면 눌러지게끔 세팅

    override func viewDidLoad() {
        self.tabBar.isHidden = true
        self.onTabBarItemClick(self.tabItem01) // 추가
 
    (..하략..)
 

 

*소스코드 출처 : 꼼꼼한 재은씨의 스위프트 실전편