Intro) 이걸 왜 공부하게 되었나요?

마켓컬리 클론 코딩 중에 구현해야 되어서

1. 스티키 헤더란?

StickyHeader는 스크롤을 아래로 내렸을 때 위쪽에 윗변이 붙어있는 것 처럼 보이는 화면을 말한다.

2. 구현 방식

나는 collectionView 안에 스티키 헤더를 넣고 싶었고 그래서 아래와 같은 순서로 구현했다.

개요

• 상단에 붙치는(스티키 헤더로 사용할) 뷰를 동일한 형태로 준비해둔다.
• 스티키 뷰를 스크롤에 포함시키지 않고, 상위 뷰에 추가한다. (addSubview)
• 스티키 뷰의 스냅킷을 최상단에 잡고 동일한 높이를 적용한다.
• Scroll Delegate를 활용하여 해당 높이에 도착했을 때 스티키 뷰를 Hidden 값을 false로 만들어준다.

1. 상단에 붙히는(스티키 헤더로 사용할) 뷰를 동일한 형태로 준비해둔다.

내가 상단에 붙히는 뷰를 HomeNewStickcyHeaderView 라는 파일을 생성하여 구현해두었다.

import UIKit
import SnapKit

import Then

class HomeNewStikcyHeaderView: UIView {
    private let countLabel = UILabel()
    private lazy var categoryButton = UIButton()
    private lazy var filterButton = UIButton()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        style()
        hierarchy()
        layout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func style() {
        self.backgroundColor = .white
        
        countLabel.do {
            $0.text = "총 173개"
        }
        
        categoryButton.do {
            $0.setTitle("신상품순", for: .normal)
            $0.setTitleColor(.black, for: .normal)
        }
        
        filterButton.do {
            $0.setTitle("필터", for: .normal)
            $0.setTitleColor(.black, for: .normal)
        }
    }
    
    
    private func hierarchy() {
        self.addSubviews(countLabel,categoryButton, filterButton)
    }
    
    private func layout() {
        countLabel.snp.makeConstraints {
            $0.top.equalToSuperview()
            $0.leading.equalToSuperview().offset(15)
            $0.width.equalTo(70)
            $0.height.equalTo(40)
        }
        
        categoryButton.snp.makeConstraints {
            $0.top.equalToSuperview()
            $0.trailing.equalToSuperview().inset(85)
            $0.width.equalTo(70)
            $0.height.equalTo(40)
        }
        
        filterButton.snp.makeConstraints {
            $0.top.equalToSuperview()
            $0.trailing.equalToSuperview().inset(15)
            $0.width.equalTo(70)
            $0.height.equalTo(40)
        }
    }
}

2. 스티키 뷰를 스크롤에 포함시키지 않고, 상위 뷰에 추가한다. (addSubview)

스티키 뷰는 스크롤에 영향을 받으면 안되기 때문에, 내가 기존에 만들어둔 collectionView에 추가하는 것이 아닌, 상위 뷰에 추가를 해두었다.

private func hierarchy() {
        self.addSubviews(homeNewCollectionView, homeNewStikcyHeaderView)
}

/*
homeNewCollecionView.addSubview(homeNewStikcyHeaderView) 이렇게 안함!
*/

3. 스티키 뷰의 스냅킷을 최상단에 잡고 동일한 높이를 적용한다.

스키뷰는 상단에 고정되어야 한다. 따라서 Snapkit으로 오토 레이아웃을 잡을때 top을 상단에 잡아두고, 높이는 기존의 붙이려고 했던 뷰의 길이와 동일하게 레이아웃을 잡는다.