Tabbar Paging With CollectionView

Tabbar Paging With CollectionView

 

View구성은 총 세개로 구성

• Tab CollectionView
• Indicator HighlightView
• Page CollectionView

 

적용 방안

1. tab터치 시 하단 페이지 스크롤
2. 하단 페이지 스크롤 시 상단 탭메뉴 변경
3. 상단 탭변경시 Indicator 변경

• collectionView, highlightView 정의

private let tapBarCollectionView: UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    layout.itemSize = CGSize(width: 80, height: 30)
    layout.minimumLineSpacing = 10
    layout.scrollDirection = .horizontal
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    collectionView.decelerationRate = .fast
    collectionView.showsHorizontalScrollIndicator = false
    return collectionView
}()

private let pageCollectionView: UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    layout.itemSize = CGSize(width: 390, height: 600)
    layout.minimumLineSpacing = 0
    layout.scrollDirection = .horizontal
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    collectionView.decelerationRate = .fast
    collectionView.showsHorizontalScrollIndicator = false
    
    return collectionView
}()

private let highlightView: UIView = {
    let view = UIView()
    view.backgroundColor = .darkGray
    return view
}()

 

• 초기 tapBar selectedItem 설정

let firstIndex = IndexPath(item: 0, section: 0)
tapBarCollectionView.selectItem(at: firstIndex, animated: false, scrollPosition: .right)

 

상단 탭변경시 Indicator 변경 및 하단페이지 스크롤

•  hightlightView를 설정하기 위한 collectionView delegate(_ collectionView: , didSelectItemAt indexPath:)정의
• tabBar카테고리 선택시 celld의 leading과 trailing을 설정하여 highlightView 설정

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    if collectionView == tapBarCollectionView {
        guard let cell = tapBarCollectionView.cellForItem(at: indexPath) as? TabCollectionViewCellelse { return }
        
        NSLayoutConstraint.deactivate(constraints)
        hightlightView.translatesAutoresizingMaskIntoConstraints = false
        constraints = [
            hightlightView.topAnchor.constraint(equalTo: tapBarCollectionView.bottomAnchor),
            hightlightView.bottomAnchor.constraint(equalTo: pageCollectionView.topAnchor),
            hightlightView.heightAnchor.constraint(equalToConstant: 1),
            hightlightView.leadingAnchor.constraint(equalTo: cell.leadingAnchor),
            hightlightView.trailingAnchor.constraint(equalTo: cell.trailingAnchor)
        ]
        NSLayoutConstraint.activate(constraints)
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
        pageCollectionView.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
    }
}

 

하단 페이지 스크롤 시 상단 탭메뉴 변경

• scrollViewWillEndDragging delegate를 사용하여 하단 페이지 스크롤 시 페이징 기능
• tapBar Item 선택 및 scrollToItem으로 tap Item scroll
• highlight Indicator 설정을 위한 didSelectedItemAt Delegate 호출

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint,targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    guard let layout = self.pageCollectionView.collectionViewLayout as? UICollectionViewFlowLayoutelse { return }
    if scrollView == pageCollectionView {
        let cellWidthIncludingSpacing = layout.itemSize.width + layout.minimumLineSpacing
        let offset = targetContentOffset.pointee
        let index = (offset.x + scrollView.contentInset.left) / cellWidthIncludingSpacing
        let roundedIndex = round(index)
        let indexPath = IndexPath(item: Int(roundedIndex), section: 0)
        
        targetContentOffset.pointee = CGPoint(x: roundedIndex * cellWidthIncludingSpacing -scrollView.contentInset.left,
                                                y: scrollView.contentInset.top)
        // topTapItem Select
        tapBarCollectionView.selectItem(at: indexPath, animated: true, scrollPosition: .bottom)
        // collectionView didSelectedItemAt delegate
        collectionView(tapBarCollectionView, didSelectItemAt: indexPath)
        // topTapMenu Scroll
        tapBarCollectionView.scrollToItem(at: indexPath, at: .left, animated: true)
    }
}