【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くらいが目標です。