[TIL / 25.02.10] 헤더를 이용한 테이블뷰를 구성, 셀과 헤더 높이 자동 계산

 

네 전에 만들었던 뷰를 재사용할 수 있어서 이렇게 구현 후에 가져왔습니다.

 

일단 포스트들의 섹션 전에 있는 검색, 태그 섹션에 있어서 각자 다른 UI를 가지기에 원래 스크롤뷰로 해야겠거니...! 했는데

이 경우엔 포스트가 몇개가 오느냐에 따라 스크롤할 수 있는 영역의 높이 자체도 다르고 그걸 계산해서 지정해주기에도 무리가 있으니

테이블뷰의 특성을 활용하면 되겠다고 판단했습니다.

 

보시면 포스트 구간에서는 스크롤을 해도 저런 포스트들의 셀들이 끝없이 나올거잖아요? (정해진 갯수만큼이겠지만!)

이러한 특성을 고려해 반복되지 않는 구간인 "All Post" 타이틀 까지의 영역을 헤더로 구현하고 그 아래엔 셀들을 넣어주면 되겠다~고 생각하며 구현했습니다.

 

let blogTableView = UITableView(frame: .zero, style: .grouped).then {
        $0.backgroundColor = .clear
        $0.register(PostCell.self, forCellReuseIdentifier: PostCell.identifier)
        $0.register(HomeTableViewHeaderView.self, forHeaderFooterViewReuseIdentifier: HomeTableViewHeaderView.identifier)
        $0.separatorStyle = .none
        $0.rowHeight = UITableView.automaticDimension
    }

 

셀이나 헤더뷰를 가져와 쓰려면 register를 꼭 거쳐야합니다. "나 이거 쓸거야!"라고 등록한다고 보면 될 것 같은데, 여기선 줄이 서로 바뀌어있지만, HomeTableViewHeaderView라는 헤더뷰와 PostCell라는 셀을 등록합니다. 각자 등록할때 identifier가 필요한데, 이는 각자 파일에서 static let identifier = "PostCell" 요런식으로 정의해둡니다. static을 이용해 바로 접근할 수 있도록 해요.

 

그리고 보통 tableview delegate 메서드 중에서 heightForRowAt을 통해 셀의 높이를 지정해주거나 하는데, 저처럼 셀 내 내용이 확실하지 않은 경우(가변적인)  rowHeight 지정해줄때 UITableView.automaticDimension을 통해 내부 컴포넌트의 크기를 자동으로 계산하고 합산해 영역 크기를 설정해주도록 합니다.

 

그 내부 컴포넌트들의 크기가 계산되려면 각자 높이 너비 같은 정보가 확실하게 정해져야하는데, 제 PostCell의 경우

 

private func setupConstraints() {
        
        containerView.snp.makeConstraints {
            $0.horizontalEdges.equalToSuperview().inset(20)
            $0.top.equalToSuperview()
            $0.bottom.equalToSuperview().offset(-24)
        }
        
        thumbnailImage.snp.makeConstraints {
            $0.horizontalEdges.equalToSuperview()
            $0.height.equalTo(thumbnailImage.snp.width).multipliedBy(2.0/3.0)
            $0.top.equalToSuperview()
        }
        
        titleLabel.snp.makeConstraints {
            $0.top.equalTo(thumbnailImage.snp.bottom).offset(24)
            $0.horizontalEdges.equalToSuperview().inset(24)
        }
        
        dateLabel.snp.makeConstraints {
            $0.horizontalEdges.equalTo(titleLabel)
            $0.top.equalTo(titleLabel.snp.bottom).offset(8)
        }
        
        tagCollectionView.snp.makeConstraints {
            $0.horizontalEdges.equalTo(titleLabel)
            $0.top.equalTo(dateLabel.snp.bottom).offset(24)
            $0.height.equalTo(64)
            $0.bottom.equalToSuperview().offset(-24)
        }
    
    }

이런식으로 구성을 해두었습니다. 알아둬야 할 게 UILabel의 경우 각자 텍스트들 자체로 크기를 가지기 때문에 오토레이아웃 넣을때도 x,y 위치만 정확히 정해두면 크기는 알아서 계산되어 렌더링됩니다. 

위 요소들 보면 Label들을 제외한 컴포넌트들은 각자의 크기에 대해 확실히 명시되어있는데 이 모든 요소가 결국 크기 계산이 되어 렌더링됩니다. 

 

extension BlogViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: PostCell.identifier, for: indexPath) as? PostCell else {
            return UITableViewCell()
        }
        
        cell.configure(title: viewModel.title, date: viewModel.date, tag: viewModel.postTags)
        cell.selectionStyle = .none
        
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension
    }
    
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        guard let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: HomeTableViewHeaderView.identifier) as? HomeTableViewHeaderView else {
            return nil
        }
        
        header.tagCollectionView.delegate = self
        header.tagCollectionView.dataSource = self
        
        return header
    }
    
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return UITableView.automaticDimension
    }
}

 

테이블뷰 관련 설정입니다. 이를 하기 위해선 해당 tableView.dataSource 혹은 delegate가 self라고 명시를 해줘야 이 코드에서 정의한게 반영이 됩니다. 아까 cell 혹은 headerView를 register했는데, 이후에 각 row에 어떤 셀을 보여줄거냐 같은 메서드엔 그 셀을 재사용가능한 셀로 만들어 쓸 수 있는 형태로 만들어 반환해줘야합니다. 

 

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: PostCell.identifier, for: indexPath) as? PostCell else {
            return UITableViewCell()
        }
        
        cell.configure(title: viewModel.title, date: viewModel.date, tag: viewModel.postTags)
        cell.selectionStyle = .none
        
        return cell
    }

 

코드 중 일부를 가져온 건데 쓰고자 하는 셀을 저렇게 가져오고 없을 시에 빈 셀로 반환하도록 합니다. 그리고 데이터를 입히고 반환하면 해당 셀들을 기반으로 테이블뷰가 구성됩니다.

 

헤더 부분도 같은 방식으로 진행해 설정해주면 됩니다.

 

---

 

원래 스택뷰 개념 정리하려했는데, 이 부분 참고해보니 각 프로퍼티 값에 따라 달라지는 것을 따로 그리기 애매한 부분이 있어 잠시 미뤄두고 사이드 프로젝트 구현 완료한 부분을 정리해서 올려봅니다...!

 

잘 만든 앱 UI들 보면 테이블뷰, 컬렉션 뷰 등 오묘하게 조합해서 만들어내던데 그렇게 할 수 있도록 이것저것 만들어보도록 해야겠습니다~