collectionViewで無限スクロールを実装する際、セル内のラベルにテキストがきちんと入らない

Question

現在iosアプリを作っており、collectionViewを使った無限にスクロールできるメニューを実装しようとしています（メルカリのカテゴリメニューのようなものです）
collectionViewのセル一つ一つがメニューとなっていて
ここにメニューのタイトルを入れようとすると下記のようにうまく表示されません。

//メニュー部分全体のView
class MenuBarView: UIView {
    var pageTabItemsWidth: CGFloat = 0.0
    var collectionView:UICollectionView!
    var titles: [String] = Constant.menuTitle
    override init(frame: CGRect) {
        super.init(frame: frame)
        setUpCollectionView()
    }
    ![

文字列ではなくセルの背景色をセルごとに変えようとするとうまくいきます。
ソースコードは下記](358ec05119a0e16055670e7bdfef2f88.gif)
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

extension MenuBarView: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    fileprivate func setUpCollectionView(){
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width:100, height:30)
        layout.scrollDirection = .horizontal
        collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height), collectionViewLayout: layout)
        // Cellに使われるクラスを登録.
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.showsHorizontalScrollIndicator = false
        collectionView.register(MenuBarViewCell.self, forCellWithReuseIdentifier: "MyCell")
        self.addSubview(collectionView)
        
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        print("items")
        return titles.count * 3
    }
    
    /*
     Cellに値を設定する
     */
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell : MenuBarViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell",for: indexPath) as! MenuBarViewCell
        configureCell(cell: cell, indexPath: indexPath)
        return cell
    }
    
    private func configureCell(cell:MenuBarViewCell, indexPath: IndexPath){
        let fixedIndex = indexPath.item % titles.count
        cell.title = titles[fixedIndex]
    }
}

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

//MenuBarViewで表示しているcollectionViewCell
class MenuBarViewCell: UICollectionViewCell {
    var title:String!{
        didSet{
            setUpUi()
        }
    }

    override func awakeFromNib() {
        super.awakeFromNib()
    }
    
    private func setUpUi(){
        self.backgroundColor = .white
        var label = UILabel(frame: self.bounds)
        label.text = title
        label.textColor = .black
        label.textAlignment = .center
        self.contentView.addSubview(label)
    }
}

足りてない情報等ございましたら、お手数ですがコメントをください。
どんたか教えていただけると大変助かります。よろしくお願い申し上げます。

【追記】
MenuBarViewCellのsetUpUi()内のUILabel(frame: self.frame)部分の記述を
UILabel(frame: self.bounds)に切り替えたところ表示はされるが
素早くスクロールすると一つのセルの中に複数のメニューのタイトルが重なって表示されてしまうようになりました。

【解決方法】
MenuBarViewCellの記述を下記のようにして、addSubViewが呼び出されるのを一度だけにしたところなおりました。

class MenuBarViewCell: UICollectionViewCell {
    var isCompletedSetUpUI: Bool = false
    var title:String!{
        didSet{
            if !isCompletedSetUpUI {
                setUpUi()
            }
        }
    }

    override func awakeFromNib() {
        super.awakeFromNib()
    }
    
    private func setUpUi(){
        self.backgroundColor = .white
        var label = UILabel(frame: self.bounds)
        print(title)
        label.text = title
        label.textAlignment = .center
        self.contentView.addSubview(label)
        isCompletedSetUpUI = true
    }
}

Comments

[fuzzball]

MenuBarViewCellのlabelはStoryboard上で乗せているのではないのでしょうか？

[KazutakaShimizu]

申し訳ございません
先ほど修正いたしまして、現在はStoryBoardもXibも使わず、labelをソースコードから生成して乗せています

[fuzzball]

なぜStoryboard(xib)をやめたのか謎ですが‥。それはそれとして、現在のコードだとsetUpUi()が呼ばれるたびにUILabelが積み重なっていきます。（私の回答でaddSubviewを削除するように書いたのはそのためです）

[KazutakaShimizu]

MenuBarViewCellの記述を下記のようにして、addSubViewが呼び出されるのを一度だけにしたところなおりました。アドバイスありがとうございました。

Answer 1

setUpUi()内のUILabel(frame: self.frame)が問題なんだと思います。
self.frameを指定するとセルの位置に影響されてしまうので、最初のセル以外はセルをはみ出て配置されてしまっているため表示されなくなっているのかと思います。

解決策としてはUILabel(frame: self.bounds)なんかを指定すればとりあえず表示されるようになるのではないでしょうか。

質問とは関係ない指摘

• UICollectionView はコードで生成しているので MenuBarViewCell の @IBOutlet は不要
• setUpUi()が呼ばれるたびに毎回ラベル生成されているので、初期化と一緒に生成するかifで囲うかする

Answer 2

MenuBarViewCellの、

label = UILabel(frame: self.frame)

これだとOutletで繋いだUILabelではなく、新規にインスタンスを作成することになりますので削除して下さい。

self.contentView.addSubview(label)

これも不要です。

質問の症状とは関係ないような気もしますが、とりあえず。

Comments

[KazutakaShimizu]

セルの幅を可変にしたり、メニューに入れる文字列を一桁の数字などにしたのですが、改善されません・・・。

[fuzzball]

画像がガクガクして分かりづらいのですが、テキストが途切れるという問題ではないのでしょうか？
「きちんと入らない」とか「うまく表示されません」ではなく、もう少し具体的に書いて下さい。

[KazutakaShimizu]

スクロールするたびにテキストが入ったり入らなかったり、一つのセルに二つのテキストが重なって入ってしまったりします。
画像を変更いたしましたので、改めてご確認いただけると幸いです。

[fuzzball]

回答を更新しました。

[KazutakaShimizu]

ありがとうございます。
ご指摘いただいたところを修正いたしましたが、おっしゃるとおり症状とは無関係の部分だったようです。

[fuzzball]

UICollectionViewのスクロール制御と、scrollViewDidScroll内のスクロール制御が干渉してないですかね？UICollectionViewを使う必要性も感じないので、UIScrollViewnの上にUILabelを並べた方が良いのでは？