상단 탭 페이징 - CollectionView를 활용한 직접 구현

페이징을 할 수 있는 탭을 구현할 때, 기존에서는 탭맨(Tabman) 라이브러리를 사용해 손쉽게 구현했었다.

그러나 오로지 선택 / 미선택 시 색깔만 지정할 수 있는 것을 알았고,

이는 디자이너님의 요구사항과는 맞지 않기에... 직접 CollectionView로 작업을 해보기로 했다.

 

 

디자이너님 요구사항

'재치'와 '가치' 클릭 시 글씨와 Indicator바 색상 변경

그러나 기존의 Tabman 라이브러리에서는 색상 구분을 못하고, 바 길이도 조절할 수 없다는 이슈가 있다.

 

 

먼저 구조부터 살펴보자.

상단 탭은 CollectionView, 그 밑의 Indicator바는 UIView, 그 아래의 페이징되는 페이지들은 CollectionView로 구현하였다.

 

코드

 

1. 상단탭을 구성하는 CustomMenuBar 클래스

CollectionView와 Indicator UIView가 같이 정의되어있다.

상단 탭을 customTabBarCollectionView로 정의

바를 IndicatorView로 정의.

class CustomMenuBar: UIView {
    weak var delegate: CustomMenuBarDelegate?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = .white
        setupCustomTabBar()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    var customTabBarCollectionView: UICollectionView = {
        let collectionViewLayout = UICollectionViewFlowLayout()
        collectionViewLayout.scrollDirection = .horizontal
        let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: 0, height: 0), collectionViewLayout: collectionViewLayout)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.backgroundColor = .white
        return collectionView
    }()
    // 탭 바
    var indicatorView = UIView().then{
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.backgroundColor = .clear
    }
    var indicatorLineView = UIView().then{
        $0.backgroundColor = .zatchPurple
    }
    //MARK: Properties
    var indicatorViewLeadingConstraint:NSLayoutConstraint!
    var indicatorViewWidthConstraint: NSLayoutConstraint!
    //MARK: Setup Views
    func setupCollectionView(){
        customTabBarCollectionView.then{
            $0.delegate = self
            $0.dataSource = self
            $0.showsHorizontalScrollIndicator = false
            $0.register(CustomCell.self, forCellWithReuseIdentifier: CustomCell.reusableIdentifier)
            $0.isScrollEnabled = false
        }
        let indexPath = IndexPath(item: 0, section: 0)
        customTabBarCollectionView.selectItem(at: indexPath, animated: false, scrollPosition: [])
    }
    
    func setupCustomTabBar(){
        setupCollectionView()
        self.addSubview(customTabBarCollectionView)
        customTabBarCollectionView.snp.makeConstraints { make in
            make.leading.trailing.top.equalTo(self)
            make.height.equalTo(54)
        }
        
        self.addSubview(indicatorView)
        indicatorViewWidthConstraint = indicatorView.widthAnchor.constraint(equalToConstant: self.frame.width / 2)
        indicatorViewWidthConstraint.isActive = true
        indicatorView.heightAnchor.constraint(equalToConstant: 1.5).isActive = true
        indicatorViewLeadingConstraint = indicatorView.leadingAnchor.constraint(equalTo: self.leadingAnchor)
        indicatorViewLeadingConstraint.isActive = true
        indicatorView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
        
        indicatorView.addSubview(indicatorLineView)
        indicatorLineView.snp.makeConstraints { make in
            make.centerX.equalToSuperview()
            make.height.equalTo(1.5)
            make.width.equalTo(50)
        }
    }
}

 

CustomMenuBar클래스에서 CollectionView를 썼으니, delegate도 해준다.

첫번째 셀은 '재치', 두번째 셀은 '가치'로 선언.

//MARK:- UICollectionViewDelegate, DataSource
extension CustomMenuBar: UICollectionViewDelegate, UICollectionViewDataSource {
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CustomCell.reusableIdentifier, for: indexPath) as! CustomCell
        cell.index = indexPath.row
        if indexPath.row == 0 {
            cell.label.text = "재치"
        }
        else {
            cell.label.text = "가치"
        }
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 2
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: self.frame.width / 2 , height: 54)
        
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        delegate?.customMenuBar(scrollTo: indexPath.row)
        if indexPath.row == 0 {indicatorLineView.backgroundColor = .zatchPurple}
        else {indicatorLineView.backgroundColor = .zatchDeepYellow}
    }
    
    func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
        guard let cell = collectionView.cellForItem(at: indexPath) as? CustomCell else {return}
        cell.label.textColor = .black20
    }
}
//MARK:- UICollectionViewDelegateFlowLayout
extension CustomMenuBar: UICollectionViewDelegateFlowLayout {
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
}

그렇다면, 상단 탭에 쓰인 CollectionView셀도 정의해줘야할 것이다.

CustomCell 클래스 - 나는 선택지에 따라서 색상 구분을 해주었는데, 개인에 따라 구분 안해줘도 된다.

class CustomCell: UICollectionViewCell {
    static let reusableIdentifier = "CustomCell"
    
    var label = UILabel().then{
        $0.text = "Tab"
        $0.textAlignment = .center
        $0.font = UIFont.pretendard(size: 14, family: .Bold)
        $0.textColor = .zatchPurple
        $0.translatesAutoresizingMaskIntoConstraints = false
    }
    var index: Int!
    override var isSelected: Bool {
        didSet{
            print("Changed")
            if index == 0 {self.label.textColor = isSelected ? .zatchPurple : .black20}
            else if index == 1 {self.label.textColor = isSelected ? .zatchDeepYellow : .black20}
        }
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        self.addSubview(label)
        label.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

2. CustomMenuBarDelegate

클릭 시 화면을 원하는 인덱스로 스크롤해줄 수 있는 함수를 정의해준다.

protocol CustomMenuBarDelegate: class {
    func customMenuBar(scrollTo index: Int)
}
func customMenuBar(scrollTo index: Int) {
    let indexPath = IndexPath(row: index, section: 0)
    self.pageCollectionView.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
}

 

3. 메인 뷰컨트롤러로 돌아가보자.

상단탭의 클릭에 따라 페이징되는 pageCollectionView를 선언.

그 아래에다가 CustomMenuBar 객체도 살짜쿵 선언해준다.

var pageCollectionView: UICollectionView = {
    let collectionViewLayout = UICollectionViewFlowLayout()
    collectionViewLayout.scrollDirection = .horizontal
    let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: 100, height: 100), collectionViewLayout: collectionViewLayout)
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    return collectionView
}()
var customMenuBar = CustomMenuBar()

SetUp 해준다.

//MARK: Setup view
func setupCustomTabBar(){
    self.view.addSubview(customMenuBar)
    customMenuBar.then{
        $0.delegate = self
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.indicatorViewWidthConstraint.constant = self.view.frame.width / 2
    }
    customMenuBar.snp.makeConstraints { make in
        make.leading.trailing.equalToSuperview()
        make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top)
        make.height.equalTo(50)
    }
}
func setupPageCollectionView(){
    pageCollectionView.then{
        $0.delegate = self
        $0.dataSource = self
        $0.backgroundColor = .gray
        $0.showsHorizontalScrollIndicator = false
        $0.isPagingEnabled = true
        $0.register(PageCell.self, forCellWithReuseIdentifier: PageCell.reusableIdentifier)
    }
    self.view.addSubview(pageCollectionView)
    pageCollectionView.snp.makeConstraints { make in
        make.leading.trailing.equalToSuperview()
        make.bottom.equalTo(self.view.safeAreaLayoutGuide.snp.bottom)
        make.top.equalTo(self.customMenuBar.snp.bottom)
    }
}

CollectionView를 써줬으니 delegate도 해야할 것이다.

extension TempViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: pageCollectionView.frame.width, height: pageCollectionView.frame.height)
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
}

 

 

PageCell - 페이징되는 페이지 셀들도 정의해준다.

class PageCell: UICollectionViewCell {
    static let reusableIdentifier = "PageCell"

    var label = UILabel().then{
        $0.textColor = .black
        $0.textAlignment = .center
        $0.font = UIFont.systemFont(ofSize: 30, weight: .bold)
        $0.translatesAutoresizingMaskIntoConstraints = false
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        self.addSubview(label)
        self.backgroundColor = .systemGray6
        
        label.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

---

끝. 진짜 코드가 참 길다.

어찌저찌 성공은 했지만 ... 되도록이면 라이브러리를 쓰고 싶다.