【Swift4】UICollectionViewを使ってカルーセルを実装してみた。【無限スクロール編】

どうも、Reoです。数ヶ月ぶりのSwift記事です！

今回はiOSで「カルーセル」を実装してみたので紹介していこうと思います。

IB/StoryBoardは使ってません。

完成予定

こんなのを実装していきます。

gifで見るとカクカクですが、動画で見るとヌルッとしててとても気持ち良いです。
ScreenRecording_06-11-2018 00-29-04
実はカルーセルって単語をしっかり覚えたのはつい最近だったり。それまでスライドパネルとか、なんかトップページによくあるスライドショーのやつって言ってました。

漫画アプリなんかでもよく見ますね！
マンガPark｜人気の漫画が毎日更新のマンガアプリ – HAKUSENSHA.INC

私の1番好きなマンガアプリのトップページにも使われています。花とゆめ大好きなのでマンガParkは本当素晴らしい。まだ入れてない方は是非に（布教）

全部を一記事にすると結構長くなりそうなので分割して書いていこうと思います。全体はgithubにあげてあります。 uruly/CardCarousel: writting Swift4. iOS Carousel UI.

第１回：コレ
第２回：セルの拡大縮小編
第３回：ページング編
第４回：セルの装飾編

まず今回の記事では「無限スクロールするコレクションビュー」を実装していきます。

UICollectionViewのサブクラスを作ろう！

上部ナビゲーションよりFile > New > File … より CocoaTouchClassを選択し、UICollectionViewのサブクラスのCarouselViewを作成します。

CarouselView.swiftができたら、まずはイニシャライザを書いておきます。

import UIKit

class CarouselView: UICollectionView {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout) {
        super.init(frame: frame, collectionViewLayout: layout)
    }
    
}

collectionViewLayoutを固定にして、インスタンス生成時にはframeだけを呼びたいので、convenience initを書いておきます。

class CarouselView: UICollectionView {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout) {
        super.init(frame: frame, collectionViewLayout: layout)
    }
    
    convenience init(frame: CGRect) {
        let layout = UICollectionViewFlowLayout()
        
        self.init(frame: frame, collectionViewLayout: layout)
    }
    
}

UICollectionViewCellのサブクラスを作ろう！

次にCarouselViewで使うセルをカスタマイズするために、UICollectionViewCellのサブクラスを作ります。

上部ナビゲーションよりFile > New > File … より CocoaTouchClassを選択し、UICollectionViewCellのサブクラスのCarouselCellを作成します。

中身は後々カスタマイズするので、今はとりあえずファイルができて入ればおｋです。

CarouselViewを配置しよう！

UICollectionViewを使う際の最低限の設定を書いていきます。

まずはdelegateを書きます。

    override init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout) {
        super.init(frame: frame, collectionViewLayout: layout)
        self.delegate = self
        self.dataSource = self
    }

先ほど作ったセルを登録します。

    let cellIdentifier = "carousel"
    override init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout) {
        super.init(frame: frame, collectionViewLayout: layout)
        self.delegate = self
        self.dataSource = self
        self.register(CarouselCell.self, forCellWithReuseIdentifier: cellIdentifier)
    }

これだけだとまだdelegateとdataSourceのところにエラーが出ていますが、extensionを書けば消えるので放置しておきます。

extensionでUICollectionViewDelegateとUICollectionViewDataSourceプロトコルに適応するようにします。

extension CarouselView: UICollectionViewDelegate {
    
}

extension CarouselView: UICollectionViewDataSource {
    
}

ほいでDataSourceの方にセル数のセルの中身を決める関数が必須なので書いておきます。

extension CarouselView: UICollectionViewDataSource {
    
    // セクションごとのセル数
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.pageCount
    }
    
    // セルの設定
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath)
        
        return cell
    }
    
}

CarouselViewクラス内で適当にセルの数をpageCountという定数で宣言してます。

ここまでで配置ができるようになったので適当に配置したい場所（今回はViewController）に配置します。

import UIKit

class ViewController: UIViewController {
    
    var carouselView:CarouselView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let width = self.view.frame.width
        let height = self.view.frame.height
        
        carouselView = CarouselView(frame: CGRect(x:0, y:0, width:width, height:height))
        carouselView.center = CGPoint(x:width / 2,y: height / 2)
        self.view.addSubview(carouselView)
    }
    
}

これで実行できるようになりますが、まだ真っ黒です。

とりあえず表示させるためにセルの大きさを決めて、セルに色をつけて置きます。ついでに背景色を白にしておきました。

    convenience init(frame: CGRect) {
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 200, height: frame.height / 2)

        self.init(frame: frame, collectionViewLayout: layout)

        self.backgroundColor = UIColor.white
    }

    // セルの設定
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath)
        cell.contentView.backgroundColor = UIColor.green
        return cell
    }

これでとりあえず表示されるようになりました。

ここまではUICollectionViewのサブクラスを作るときに必ずやっています。多分もうgistにでもテンプレートとしてあげておいたほうが楽な気もします。（いつも歌いながら手打ちしてる）

スクロールの方向を横向きにする

とりあえずスクロールの向きを水平にしておきます。

    convenience init(frame: CGRect) {
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 200, height: frame.height / 2)
        layout.scrollDirection = .horizontal
        
        self.init(frame: frame, collectionViewLayout: layout)
        
        self.backgroundColor = UIColor.white
    }

超簡単！一行で出来ます。

スクロールバーが邪魔なので消して置きます。

    convenience init(frame: CGRect) {
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 200, height: frame.height / 2)
        layout.scrollDirection = .horizontal
        
        self.init(frame: frame, collectionViewLayout: layout)
        
        // 水平方向のスクロールバーを非表示にする
        self.showsHorizontalScrollIndicator = false
        self.backgroundColor = UIColor.white
    }

ここまでで実行するとこんな感じです。

これで横向きのコレクションビューができました。∩(〃･ω･〃)∩

ここまでのコード（横方向コレクションビュー）

無限スクロールをする前に、ここまでの全体コードです。一応gistにあげました。

ここまでで既に長い。

色がわかりやすいようにrowごとにセルの色を変えておきます。

class CarouselView: UICollectionView {
    let colors:[UIColor] = [.blue,.yellow,.red,.green,.gray]
    //略
}

    // セルの設定
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath)
        cell.contentView.backgroundColor = colors[indexPath.row]
        
        return cell
    }

無限スクロールをしよう！

いよいよ今回の記事の本題です。CollectionViewを無限スクロールできるようにします。

無限スクロールのオンオフはBool値で簡単に制御できるようにしておきます。

class CarouselView: UICollectionView {
    let isInfinity = true
    //略
}

まず、実際のセル数の3倍のセルを用意します。

    // セクションごとのセル数
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return isInfinity ? pageCount * 3 : pageCount
    }

ほいで、実際に表示したいセル達のWidthをいれておく変数を宣言しておきます。

class CarouselView: UICollectionView {
    var cellItemsWidth: CGFloat = 0.0
    // 略
}

UICollectionViewは、UIScrollViewDelegateプロトコルに適合しているので、それを利用して、コレクションビューがスクロールされているときに呼び出される関数内に以下のように書きます。

extension CarouselView: UIScrollViewDelegate {
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        
        if isInfinity {
            if cellItemsWidth == 0.0 {
                cellItemsWidth = floor(scrollView.contentSize.width / 3.0) // 表示したい要素群のwidthを計算
            }
            
            if (scrollView.contentOffset.x <= 0.0) || (scrollView.contentOffset.x > cellItemsWidth * 2.0) { // スクロールした位置がしきい値を超えたら中央に戻す
                scrollView.contentOffset.x = cellItemsWidth
            }
        }
    }
    
}

3倍表示してるので3で割ってごにょごにょ。

この辺はだいぶ昔に以下の記事を参考にさせていただいて作っています。

UIPageViewControllerをつかって無限スクロールできるタブUIを実装してOSSとして公開しました – Start Today Technologies TECH BLOG

最後に、実際に表示させるセルの中身をindexを修正して表示させます。

    // セルの設定
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell:CarouselCell = dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath) as! CarouselCell
        
        configureCell(cell: cell, indexPath: indexPath)
        
        return cell
    }
    
    func configureCell(cell: CarouselCell,indexPath: IndexPath) {
        // indexを修正する
        let fixedIndex = isInfinity ? indexPath.row % pageCount : indexPath.row
        cell.contentView.backgroundColor = colors[fixedIndex]
    }

configureCellの方でセルの設定をするようにしてます。

実際のindexPath.rowを使うと要素の3倍数までが配列に入ることになってしまうので修正しておきます。

これで実行！