iOS 출시 프로젝트 5일차 - 뷰 구성(탭바, 플로팅 버튼)

오늘은 스토리보드 및 컨트롤러 설정을 해놓고 플로팅 버튼을 고민했다.

각 뷰마다 하나의 스토리보드 컨트롤러를 설정하기 위해 Storyboard Reference를 이용해 연결해줬고 아이템을 잘 보기 위해서 네비게이션을 심어줬다.

그리고 각 스토리보드의 is Initial View Controller를 세그로 이동하기 때문에 꼭 체크해줘야 한다.

각 뷰마다 스토리보드 및 뷰컨트롤러

 

그다음 가장 고민한 것은 탭 바 가운데 플로팅 버튼을 두는 것이었다.

버튼을 커스텀해서 넣을지 플로팅 버튼 라이브러리를 쓸지 고민이 되어 두 개다 해보기로 했다.

 

일단 코드부터 보면

import UIKit
import JJFloatingActionButton //플로팅 버튼 라이브러리 https://github.com/jjochen/JJFloatingActionButton

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        addFloatingButton()
        //setupMiddleButton()
    }
    
    //플로팅 버튼 라이브러리 사용
    func addFloatingButton(){
        let actionButton = JJFloatingActionButton()
        
        actionButton.addTarget(self, action: #selector(self.addButtonAction(sender:)), for: UIControl.Event.touchUpInside)
        actionButton.buttonColor = .lightGray
        self.view.addSubview(actionButton)
        actionButton.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint(item: actionButton, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0).isActive = true
        actionButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -28).isActive = true
    }
    
    //코드로 탭바 가운데 버튼 넣기
    func setupMiddleButton(){
        let addButton = UIButton()
        addButton.backgroundColor = .clear
        addButton.setImage(UIImage(systemName: "plus"), for: UIControl.State.normal)
        
        addButton.backgroundColor = #colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1)
        addButton.layer.cornerRadius = 16
        
        addButton.contentMode = .scaleAspectFit
        addButton.addTarget(self, action: #selector(self.addButtonAction(sender:)), for: UIControl.Event.touchUpInside)
        addButton.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(addButton)
        
        NSLayoutConstraint(item: addButton, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: addButton, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: -50).isActive = true
        addButton.heightAnchor.constraint(equalToConstant: 64).isActive = true
        addButton.widthAnchor.constraint(equalToConstant: 64).isActive = true
        
        
        self.view.layoutIfNeeded()
    }
    
    @objc func addButtonAction(sender: UIButton){
        self.selectedIndex = 700
        
        //1. 스토리보드 특정
        let storyboard = UIStoryboard(name: "Record", bundle: nil)
        //2. 스토리보드 내 많은 뷰컨트롤러 중 전환하고자 하는 뷰컨트롤러 가져오기
        let vc = storyboard.instantiateViewController(withIdentifier: "RecordViewController") as! RecordViewController
        
        //2-1. 네비게이션 컨트롤러 임베드 (옵션)
        let nav = UINavigationController(rootViewController: vc)
        
        //(옵션)
        nav.modalTransitionStyle = .crossDissolve //기본은 coverVertical
        nav.modalPresentationStyle = .fullScreen // 풀스크린 만들기 그럼 dismiss 만들어야함
        
        //3. present
        self.present(nav, animated: true, completion: nil)
        
        
    }

}

플로팅 라이브러리

커스텀 버튼

두 개 다 해본 결과 사실 거기서 거기서다.

 

각 장점

라이브러리 : 버튼 클릭 시 아이템을 더 추가해 애니메이션 효과 주기

커스텀 : 자유도

 

내 프로젝트에서는 그저 모달 액션용으로 쓰여 비슷하다.

그럼 중요한 것은 탭 바 중앙에 UX적으로 잘 맞춰주기이다!

 

//탭바 높이
let tabBarheight = self.tabBar.frame.size.height
//safe area 높이
let window = UIApplication.shared.windows.first
let bottomPadding = window!.safeAreaInsets.bottom
//밑에 패딩
let bottomConstant = tabBarheight/2 + bottomPadding

//바닥에서 탭바 높이 만큼
NSLayoutConstraint(item: actionButton, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: -bottomConstant).isActive = true
//x중앙배치
NSLayoutConstraint(item: actionButton, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0).isActive = true

self.view.layoutIfNeeded()//즉시 적용 동기

self.tabBar.frame.size.height를 통해 탭 바 높이를 가져와 바닥에서부터 -높이를 줬다.

이 정도면 이쁘게 가운데 정렬된 거 같다.

 

layoutIfNeeded()

이 메서드는수동으로 layoutSubviews를 예약하고 해당 예약을 바로 실행시킨다. 즉 동기적이다.

update cycle이 올 때까지 기다려 layoutSubviews를 호출시키는 것이 아니라 그 즉시 layoutSubviews를 실행 

따라서 layoutIfNeeded는 그 즉시 값이 변경되어야 하는 애니메이션에서 많이 사용된다고 한다!

그래서 공부한 겸 넣어줬다.