Adding Headers and Footers to Table Sections Practice

공식문서 내용은 아래 링크입니다.

https://developer.apple.com/documentation/uikit/views_and_controls/table_views/adding_headers_and_footers_to_table_sections
https://velog.io/@panther222128/Adding-Headers-and-Footers-to-Table-Sections

만약 Table View의 생성이 궁금하시다면 아래 링크를 참고하시기 바랍니다.

Programmatically: https://velog.io/@panther222128/UITableView-Programmatically-Practice
XIB: https://velog.io/@panther222128/UITableView-with-XIB-Practice
Storyboard: https://velog.io/@panther222128/UITableView

먼저 두 Table View가 있는 상태로 진행합니다. 아래와 같은 상황입니다.

아주 간단하게 아래 코드를 delegate에 추가해보겠습니다.

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    if tableView == firstTableView {
        return "오마이걸"
    } else {
        return "다른 가수"
    }
}

Title Header만 사용한 경우이며, 아래처럼 나타납니다.

공식문서에서 소개한 것처럼 custom Header를 사용하려면 세 가지를 추가해야 합니다. 먼저 custom Header View를 만들겠습니다. UITableViewHeaderFooterView를 subclassing합니다. label과 이미지 하나를 갖도록 했습니다. 같은 방법으로 두 번째 Table View를 위한 CustomSecondTableViewHeaderFooterView도 생성했습니다. 두 번째는 label만 갖습니다.

class CustomFirstTableViewHeaderFooterView: UITableViewHeaderFooterView {
    
    let title = UILabel()
    let image = UIImageView()

    override init(reuseIdentifier: String?) {
        super.init(reuseIdentifier: reuseIdentifier)
        configureContents()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        configureContents()
    }
    
    func configureContents() {
        image.translatesAutoresizingMaskIntoConstraints = false
        title.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(image)
        contentView.addSubview(title)
        NSLayoutConstraint.activate([
            image.leadingAnchor.constraint(equalTo:contentView.layoutMarginsGuide.leadingAnchor),
            image.widthAnchor.constraint(equalToConstant: 50),
            image.heightAnchor.constraint(equalToConstant: 50),
            image.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            title.heightAnchor.constraint(equalToConstant: 30),
            title.leadingAnchor.constraint(equalTo: image.trailingAnchor,
                       constant: 8),
            title.trailingAnchor.constraint(equalTo:
                       contentView.layoutMarginsGuide.trailingAnchor),
            title.centerYAnchor.constraint(equalTo: contentView.centerYAnchor)
        ])
    }
    
}

그리고 delegate에서 아래처럼 작성했습니다.

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    if tableView == firstTableView {
        let view = tableView.dequeueReusableHeaderFooterView(withIdentifier: "sectionHeader") as! CustomFirstTableViewHeaderFooterView
        view.title.text = "OhMyGirl"
        view.image.image = UIImage(named: "OhMyGirl.png")
        return view
    } else {
        let view = tableView.dequeueReusableHeaderFooterView(withIdentifier: "sectionHeader") as! CustomSecondTableViewHeaderFooterView
        view.title.text = "PopSinger"
        return view
    }
}

ViewController로 넘어와 아래처럼 register 메소드를 추가하고 이 메소드를 override func viewDidLoad()에 넣어줬습니다.

override func viewDidLoad() {
    super.viewDidLoad()
    tableViewDelegate()
    registerNib()
    configureContainer()
    // 추가된 메소드
    addHeaderViewToFirstTableView()
}

private func addHeaderViewToFirstTableView() {
    firstTableView.register(CustomFirstTableViewHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: "sectionHeader")
    secondTableView.register(CustomSecondTableViewHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: "sectionHeader")
}

이 과정만 거치면 결과는 아래와 같습니다.

Header의 높이가 충분하지 않아 이미지가 들어간 것이 어색하니 Header의 크기를 더 커지도록 만들겠습니다. delegate 내부에 메소드 하나만 추가하면 됩니다. 아래와 같습니다. 두 Table View 모두 같은 사이즈로 설정할 것이기 때문에 return으로 하나의 값만 줬습니다.

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 65
}

결과는 아래와 같습니다.

두 Table View의 Header 높이를 다르게 주고 싶다면 아래처럼 작성합니다.

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    if tableView == firstTableView {
        return 65
    } else {
        return 50
    }
}

서로 다른 높이가 적용되었음을 확인할 수 있습니다.