iOSアプリでよくある上タブ作ってみた

コード：https://github.com/Yaruki00/UnderBarTabView
PodsやCarthage対応はできてないので、もし使いたい場合はファイル引っこ抜いてください
ほら、カスタマイズしやすいし・・・ね・・・

機能

• 現在選択している箇所に下線がつきます。
• タブのサイズは、固定と文字列によって可変の2通りから選べます。
• 無限にループするか、しないかを選べます。
• 余白やフォント、色を多少調整することができます。
• 作ったのはタブの部分だけなので、コンテンツ部分やそれとの連携は自作する必要があります。

だいたいの作り

UICollectionViewをベースにしており、タブの分だけセルを生成し並べています。
無限スクロールはタブを3セット用意して、スクロールのアニメーション終わったタイミングでスクロール位置を真ん中のセットに戻すことで実現しています。
余白や色、フォント等の設定は別クラスになっており、セットアップ時に渡します。

無限スクロールの参考：
https://techblog.zozo.com/entry/tab_page_viewcontroller

既知の問題

セルの読み込みが遅いときがある

プログラムからタブをスクロールさせる場合(UICollectionViewのscrollToItem(at:at:animated:)とか)、画面外のセルの読み込みが遅い場合があります。
どうもアニメーションが終わってから読み込みが走っているように見えますが、部分的にしか起きないしよくわからないです。わかる方いましたら是非教えて下さい！

参考(？)：
https://living-sun.com/ja/swift/824352-in-auto-scrolling-uicollectionview-cellforitematindexpath-not-triggered-by-contentoffset-swift-uicollectionview-tvos.html

スクロールが部分的にぎこちない

無限ループするバージョンでは場所によってスクロールの速度が不自然な場合があります。
スクロール位置を調整するところでなにかおかしくなっていると思うのですが、ちゃんとした原因はまだつかめていないです。

役に立つかも知れない情報

セルの座標を取得する

下線を動かす時にセルの座標を取得していますが、UICollectionViewLayout のlayoutAttributesForItem(at:)を使用することで取得することができます。

UICollectionViewのリロードが終わってから処理を行いたい

UIViewのanimate(withDuration:animations:completion:)を使用することでリロードの完了を待つことができます。UICollectionViewのExtensionで書いておくと便利かも知れません。

UIView.animate(
    withDuration: 0.0,
    animations: {
        self.collectionView.reloadData()
    },
    completion: { _ in
        // reloadData()後に行いたい処理
    }
)

参考：
https://qiita.com/ponkichi4/items/d5d46556773a6bc98f9c

おわりに

この手のライブラリは探せばたくさん見つかるのですが、勉強も兼ねて自作してみました🔧
シンプルな機能で良いのであれば自作してもそこまで手間ではないのでアリかなと思いました💡