【Swift,Xcode】スワイプでページをめくるアニメーション

Question

右から左にスワイプすると、画面がスライドするようなアニメーションを実装するのが目的です。

UICollectionViewを使用したもので、下記のサイトを参考にしました。
↓
Qiita そのまま使える！iOSアプリを作るためのswiftサンプル集

上記の記事のサンプルコードを見ながら、模写したのですが、
・色が反映されない
・スライドしない
という問題に直面しています。

サンプルコードの方では動作するのでサンプルコードを1度全部コピペしましたが、ダメでした。

Swift4以上では、仕様が変わったのでしょうか？

エラーが１つも起こらないので、解決方法がわからず困っています。

どうかご指摘願います。

import UIKit

class ViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    @IBOutlet weak var collectionView: UICollectionView! {
        didSet {
            collectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "cell")
        }
    }
    
    private let dataSource: [UIColor] = [.red, .green, .blue, .cyan, .yellow, .magenta]
    
    // MARK: - UICollectionViewDataSource
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return dataSource.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        let viewController = UIViewController()
        viewController.view.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)
        viewController.view.backgroundColor = dataSource[indexPath.row]
        cell.addSubview(viewController.view)
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: view.frame.width, height: view.frame.height)
    }
}

import UIKit

class CollectionViewCell: UICollectionViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

}

※追記

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        let viewController = UIViewController()
        viewController.view.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)
//        viewController.view.backgroundColor = dataSource[indexPath.row]
        cell.contentView.backgroundColor = dataSource[indexPath.row]
        cell.addSubview(viewController.view)
        return cell
    }

と書きましたが、変わりませんでした。

Answer 1

スワイプでページめくりしたいのであれば、これでどうですか？
http://docs.fabo.io/swift/
を参考に作りました。

import UIKit

let devWidth  = UIScreen.main.bounds.size.width
let devHeight = UIScreen.main.bounds.size.height

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UIGestureRecognizerDelegate {

    private let dataSource: [UIColor] = [.red, .green, .blue, .cyan, .yellow, .magenta]
    
    var myCollectionView : UICollectionView!
    var count = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 50.0, height: 50.0)
        layout.sectionInset = UIEdgeInsets(top: 16.0, left: 16.0, bottom: 32.0, right: 16.0)
        layout.headerReferenceSize = CGSize(width: 100.0, height: 30.0)
        
        myCollectionView = UICollectionView(frame: CGRect(x: 0.0, y: 20.0, width:devWidth, height: devHeight - 20.0), collectionViewLayout: layout)
        // Cellに使われるクラスを登録.
        myCollectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "MyCell")
        myCollectionView.delegate = self
        myCollectionView.dataSource = self
        myCollectionView.backgroundColor = dataSource[count]
        myCollectionView.isScrollEnabled = true
        self.view.addSubview(myCollectionView)

        // Swipe の判定
        let rightSwipe = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.swipeGesture(_:)))
        rightSwipe.direction = .right
        self.view.addGestureRecognizer(rightSwipe)
        
        let leftSwipe = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.swipeGesture(_:)))
        leftSwipe.direction = .left
        self.view.addGestureRecognizer(leftSwipe)
    }


    @objc internal func swipeGesture(_ sender: UISwipeGestureRecognizer) {
        // UIViewアニメーションの設定開始
        UIView.beginAnimations("transition", context: nil)
        UIView.setAnimationDuration(0.5)
        
        // トランジションアニメーションの設定
        var transition = UIView.AnimationTransition.curlUp
        
        if sender.direction == .right {
            transition = UIView.AnimationTransition.curlDown
            count = count - 1
            if count < 0 {
                count = dataSource.count - 1
            }
        } else if sender.direction == .left {
            transition = UIView.AnimationTransition.curlUp
            count = count + 1
            if count >= dataSource.count {
                count = 0
            }
        }
        
        myCollectionView.backgroundColor = dataSource[count]
        
        UIView.setAnimationTransition(transition, for: self.view, cache: true)
        // UIViewアニメーション開始
        UIView.commitAnimations()
    }

    // Cellが選択された際に呼び出される

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("Num: (indexPath.row)")
        print("Value:(collectionView)")
    }
    // Cellの総数を返す
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    // Cellに値を設定する
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell : UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath as IndexPath)
        cell.backgroundColor = UIColor.gray
        return cell
    }
}

Answer 2

https://teratail.com/questions/149958の質問と同様かと思いますが、セルにはcontentViewが乗っていて、その上にUIを並べます。背景色を変えたいときも、contentViewの背景色を変えて下さい。

どうしてもセルの背景色を変更することで色を変えたい、ということであれば、contentViewの背景色を透明(.clear)にして下さい。

Comments

[fuzzball]

あちらにも同じことを書きましたが、collectionView(_:cellForItemAt:)は呼ばれていますか？
dataSourceは設定していますか？