UITableViewやUICollectionViewのスクロールで隠れるNavigationBarの実装について(見せかけのHeaderViewの固定)

# はじめに
こんにちは:leaves:
UITableViewの上側にNavigationBarのようなViewを固定しつつ、スクロール値によって移動させる実装について少し悩んだので、共有してみたいと思います。

**tableViewのheaderというか上部を、下にスクロールした時は固定で、上にやったら上に行くサンプル Qiita**
http://qiita.com/mochizukikotaro/items/f48559630a639e7d467b

上記を拝見させて頂き、こちらの記事では**UITableViewにUIViewを乗せる実装**(その手があったか!!)でしたが、今回は別の方法を書かせて頂きたいと思います。
至らぬ点など多々あると思いますが、コメントなど頂けたら幸いです。

# サンプル
:ear_of_rice: 以下は今回の記事の実装

<img width="280" alt="table.gif" src="https://qiita-image-store.s3.amazonaws.com/0/128250/1426f533-071f-ebd0-9669-bb82a920ff38.gif"> <img width="280" alt="collection.gif" src="https://qiita-image-store.s3.amazonaws.com/0/128250/8a4982bc-e99a-58f7-37d8-3f96135885d5.gif">

:ear_of_rice: `TableHeaderView`や`UICollectionReusableView`を利用すれば出来ると勘違いした私は、HeaderViewも一緒に動いてしまう事に実行して気が付きました:sweat:

<img width="280" alt="table_bad.gif" src="https://qiita-image-store.s3.amazonaws.com/0/128250/eb5e03ae-2eee-0832-706e-f3ed7aad888a.gif"> <img width="280" alt="colleciton_bad.gif" src="https://qiita-image-store.s3.amazonaws.com/0/128250/c2475bbd-ef67-b46f-9b58-2108373e87af.gif">


# 実装について
UITableViewには、**UICollectionViewLayout sectionInset**のようなプロパティが無いことで、UITableViewのcontentInsetを設定した時にoffSetがその値だけ差が出てしまうのが少しややこしかったです。

[Insets around section of UITableView ?]
(https://stackoverflow.com/questions/43775673/insets-around-section-of-uitableview)

# ソースコード
## UITableView
```swift
import UIKit

class MainViewController: UIViewController {
    
    var topBarView: UIView!
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //固定するTopBarを作成
        topBarView = UIView(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 64))
        topBarView.backgroundColor = UIColor(red: 187/255, green: 231/255, blue: 255/255, alpha: 1)
        view.addSubview(topBarView)
        
        tableView.delegate = self
        tableView.dataSource = self
        
        tableView.contentInset = UIEdgeInsets(top: topBarView.frame.size.height, left: 0, bottom: 0, right: 0)
        tableView.scrollIndicatorInsets = UIEdgeInsets(top: topBarView.frame.size.height, left: 0, bottom: 0, right: 0)
        
        tableView.register(UINib(nibName: "CustomTableViewCell", bundle: nil), forCellReuseIdentifier: "CustomTableViewCell")
    }
}

extension MainViewController: UITableViewDataSource {
    //テーブルの行数を返却
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 20
    }
    //テーブルの行ごとのセルを返却する
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomTableViewCell") as! CustomTableViewCell
        cell.titleLabel.text = "\(indexPath.row)"
        return cell
    }
}

extension MainViewController: UITableViewDelegate {
    //スクロールされた時
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let height = topBarView.frame.size.height
        if scrollView.contentOffset.y <= -height {
            topBarView.frame.origin.y = 0
        } else {
            let max = -topBarView.frame.size.height
            topBarView.frame.origin.y = -scrollView.contentOffset.y - height <= max ? max : -scrollView.contentOffset.y - height
        }
    }
}
```

## UICollectionView
```swift
import UIKit

class MainViewController: UIViewController {
    
    var topBarView: UIView!
    @IBOutlet weak var collectionView: UICollectionView!
    
    var layout: UICollectionViewLayout {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.minimumLineSpacing = 1
        layout.minimumInteritemSpacing = 1
        layout.sectionInset = UIEdgeInsets(top: topBarView.frame.size.height, left: 0, bottom: 0, right: 0)
        let columnCount = 4
        let cellLength = (UIScreen.main.bounds.size.width / CGFloat(columnCount)) - layout.minimumInteritemSpacing
        layout.itemSize = CGSize(width: cellLength, height: cellLength)
        return layout
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //固定するTopBarを作成
        topBarView = UIView(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 64))
        topBarView.backgroundColor = UIColor(red: 150/255, green: 216/255, blue: 197/255, alpha: 1)
        view.addSubview(topBarView)
        
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.collectionViewLayout = layout
        collectionView.scrollIndicatorInsets = UIEdgeInsets(top: topBarView.frame.size.height, left: 0, bottom: 0, right: 0)
        collectionView.register(UINib(nibName: "CustomCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CustomCollectionViewCell")
    }
}

extension MainViewController: UICollectionViewDataSource {
    //セルの個数を返す
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 50
    }
    //セルを返却
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath) as! CustomCollectionViewCell
        cell.label.text = "\(indexPath.row)"
        return cell
    }
}


extension MainViewController: UICollectionViewDelegate {
    //スクロールされた時
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView.contentOffset.y <= 0 {
            topBarView.frame.origin.y = 0
        } else {
            let max = -topBarView.frame.size.height
            topBarView.frame.origin.y = -scrollView.contentOffset.y <= max ? max : -scrollView.contentOffset.y
        }
    }
}
```

# 参考にさせていただいた記事
- [UITableView Apple Reference](https://developer.apple.com/documentation/uikit/uitableview)

- [Setting UITableView contentInset also insets section header view
 stackoverflow](https://stackoverflow.com/questions/5993711/setting-uitableview-contentinset-also-insets-section-header-view)

見て頂いてありがとうございます。