【Swift】 신축하는 TableView 헤더를 작성한다

트위터처럼 화면을 아래로 스크롤했을 때 이미지가 확대되는 헤더를 구현할 기회가 있었으므로 비망록으로 씁니다!

완성형

TableView를 아래로 당길 때 이미지를 확대합니다.

구현 방법

AutoLayout 등 다양한 방법이 있다고 생각합니다만, 이번은 TableViewCell를 사용한 방법으로 구현해 갑니다.

① 사용자 정의 셀 준비

적절한 셀을 준비하여 UIImgeView를 얹습니다.

StretchyHeaderTableViewCell.swift

import UIKit

final class StretchyHeaderTableViewCell: UITableViewCell {

    @IBOutlet weak var headerImageView: UIImageView!
    static var className: String {
        return String(describing: self)
    }

    static var idetifier: String {
        return className
    }

    static func nib() -> UINib {
        return UINib(nibName: idetifier, bundle: nil)
    }

    func configure(headerImageUrl: String) {
        headerImageView.image = UIImage(named: headerImageUrl)
    }
}

②TableView에 등록하기

위에서 만든 커스텀 셀을 tableview에 등록합니다.

③제약을 가한다

StretchyHeaderViewController.swift

private var lastContentOffset = CGPoint.zero

StretchyHeaderViewController.swift

extension StretchyHeaderViewController: UITableViewDelegate {

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView.contentOffset.y <= 0.0 {
            if let cell = tableView.cellForRow(at: IndexPath(row: 0, section: 0)) {
                let deltaY = CGFloat(fabsf(Float(scrollView.contentOffset.y)) - fabsf(Float(lastContentOffset.y)))
                cell.frame = CGRect(x: 0.0, y: scrollView.contentOffset.y, width: cell.frame.size.width, height: cell.frame.size.height + deltaY)
                lastContentOffset = scrollView.contentOffset
            }
        }
    }

전체 코드

StretchyHeaderViewController.swift

import UIKit

final class StretchyHeaderViewController: UIViewController {
    @IBOutlet private weak var tableView: UITableView!
    private var lastContentOffset = CGPoint.zero
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        tableView.tableFooterView = UIView()
        tableView.register(StretchyHeaderTableViewCell.nib(), forCellReuseIdentifier: StretchyHeaderTableViewCell.idetifier)
    }
}
extension StretchyHeaderViewController: UITableViewDelegate {

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView.contentOffset.y <= 0.0 {
            if let cell = tableView.cellForRow(at: IndexPath(row: 0, section: 0)) {
                let deltaY = CGFloat(fabsf(Float(scrollView.contentOffset.y)) - fabsf(Float(lastContentOffset.y)))
                cell.frame = CGRect(x: 0.0, y: scrollView.contentOffset.y, width: cell.frame.size.width, height: cell.frame.size.height + deltaY)
                lastContentOffset = scrollView.contentOffset
            }
        }
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 200
    }
}

extension StretchyHeaderViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: StretchyHeaderTableViewCell.idetifier) as! StretchyHeaderTableViewCell
        cell.configure(headerImageUrl: "curry")
        return cell
    }
}

마지막으로

보기 어려울 것 같지만 단지 이것만으로 트위터 라이크 헤더가 완성됩니다. 최근의 앱이라면 스크롤시에 화상이 확대되는 것이 많기 때문에 꼭 참고해 주세요!