Things take time

[SWIFT] UITbableView Header, 테이블 뷰 헤더 추가 및 고정 해제 방법, 헤더 구분선(Seperator)추가 본문

iOS (기능)

[SWIFT] UITbableView Header, 테이블 뷰 헤더 추가 및 고정 해제 방법, 헤더 구분선(Seperator)추가

겸손할 겸 2017. 10. 27. 10:42

[헤더]


기본적인 테이블 뷰는 테이블 뷰 셀로 이루어져있다. 근데 그 안에는 Header, Footer부분이 있는데.. 이 부분을 사용하게 되면 테이블 뷰 위 아래에 원하는 것을 넣을 수 있다.


기본적으로 헤더를 넣게 되면 고정이 되어 스크롤을 내려도 헤더는 내려오지 않는다.


[헤더 고정 해제 방법]


고정 방법은 말 그대로 그냥 쓰면 되는 거고..

  @available(iOS 2.0, *)
    public func scrollViewDidScroll(_ scrollView: UIScrollView){
        // let scrollHeaderHeight = friendsTableView.sectionHeaderHeight
        let scrollHeaderHeight = friendsTableView.rowHeight
        
        if scrollView.contentOffset.y <= scrollHeaderHeight{
            if scrollView.contentOffset.y >= 0 {
            scrollView.contentInset = UIEdgeInsetsMake(-scrollView.contentOffset.y, 0, 0, 0)
            }
        } else if (scrollView.contentOffset.y >= scrollHeaderHeight){
            scrollView.contentInset = UIEdgeInsetsMake(-scrollHeaderHeight, 0, 0, 0)
        }
    }

헤더의 높이를 구해서.. 스크롤뷰를 계산해 넣는 방법이다. 기본적으로 테이블뷰는 기본적으로 스크롤 뷰를 상속받기 때문에, 스크롤 뷰 전용 딜리게이트를 이용할 필요 없이 이 함수를 오버라이딩 하면 된다.


만약 헤더의 높이를 지정했다면 위처럼 하면 되고, 따로 헤더의 높이를 건드리지 않았다면 주석한 부분으로 사용하면 된다.


[헤더 구분선 추가]


헤더와 첫 번째 셀의 간격에 구분선을 추가하고 싶다면 아래와 같다.

    // 헤더 섹션에 사용할 뷰(최상단 고정됨), 커스텀 서치바도 넣어도 될 것 같은데..
    @available(iOS 2.0, *)
    public func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {// custom view for header. will be adjusted to default or specified header height
        
        print(tableView.rowHeight)
        let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: tableView.rowHeight))
        headerView.backgroundColor = UIColor.blue
        
        let sepFrame = CGRect(x: 0, y: headerView.frame.height-1, width: tableView.frame.width, height: 5)
        let seperatorView = UIView(frame: sepFrame)
        seperatorView.backgroundColor = UIColor.brown
        headerView.addSubview(seperatorView)
        
        return headerView
    }