【iOS】スクロールに付随して動くUIView拡張ライブラリ、ScrollingFollowViewを公開しました。【OSS】

おばんです、ポケモントレーナーLv.15の田中です。
近所でミニリュウが出ることが発覚して最高です。

今回自分史で初めて公開したiOSのOSSライブラリ、ScrollingFollowViewを紹介します。

※この記事は現バージョン0.0.2における紹介です。ライブラリをアップデート次第こちらも随時更新する予定です。

ScrollingFollowViewとは

PixivやFacebookのNavigationBar領域などにも使われているような、UIScrollViewのスクロールに付随して動くUIViewの拡張ライブラリです。

先日Retty Tech Cafe #6で発表したこのライブラリに関する資料はこちらです。
作ろうと思った動機、経緯についても触れたのでもし興味があればご覧ください。

基本的な使い方

導入はカンタンです。 ここではGitHubのレポジトリのDEMOでも紹介しているNavigationBar領域に配置するサンプルを紹介します。

1. Podからインストールする

Podfileに以下を記述します。

pod 'ScrollingFollowView'

その後ターミナルで 'pod install' します。

2. IBでレイアウトを組む

ScrollingFollowView上にUISearchBarを置いて、高さを44ptとしています。
残りのConstraintsは全て0ptで埋めています。

このとき、module名もScrollingFollowViewとすることに注意してください。

3. 必要な要素をIBOutletで紐付ける

UI要素はScrollingFollowView, UITableViewを接続します。
今回はUISearchBar領域が上にスクロールしていくように見せたいので、その親のScrollingFollowView.topのConstraintをIBOutletでつないでいます。

4. setup()メソッドでScrollingFollowViewの初期設定を行う

この時下記のコードのほかに、UITableViewのDataSource実装も他に書いてください。

import ScrollingFollowView

class ViewController: UIViewController {

    @IBOutlet weak var scrollingFollowView: ScrollingFollowView!
    @IBOutlet weak var tableView: UITableView!

    // ScrollingFollowViewのtopのConstraint
    @IBOutlet weak var topConstraint: NSLayoutConstraint!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    
        // 第一引数はIBOutletでつないだConstraint。
        // isIncludingStatusBarHeightはstatusBar領域分も画面上にスクロールするかどうかというパラメータ
        // statusBar領域上にview要素を置いてあるのであればtrueで大丈夫です。
        scrollingFollowView.setup(constraint: topConstraint, isIncludingStatusBarHeight: true)
    }
    
}

5. UIScrollViewDelegateのscrollViewDidScrolled(scrollView:)にてdidScrolled(scrollView)メソッドを呼ぶ

UITableViewで利用しているUIScrollViewDelegateの中で書きます。

extension ViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(scrollView: UIScrollView) {
        scrollingFollowView.didScrolled(scrollView)
    }
}

6. 完成！

ね、カンタンでしょう？

まとめ

今回扱ったSearchBarのみを置く利用にとどまらずサンプルのgifであげたようにFooter領域やフローティングボタンのような用途、スクロールに付随するProfile画面のようなものも実装可能です。UIViewの拡張なので、カスタマイズ性に富んでいるところが強みです。

勉強会のネタになるように最低限の機能の突貫工事でリリースしました。
まだ汚いコードですが直していきます、使いやすくなるように改善していきます。
issue、プルリクお待ちしています！

そして最後に大事なこと言います。

スターください。

みなさんが信用して使えるようになるであろう、スター数500くらいが目標です。