Swift UICollectionviewのCellのなかに配置されたUILabelへの制約が反映されない

Question

UICollectionViewのCellをXibファイルでカスタムしたいと思っています。

そのため、

import UIKit

class DayCell: UICollectionViewCell {
    @IBOutlet weak var dayLabel: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()!
        // Initialization code
    }

}

のようなCell用のファイルとXibファイルを作成しました。

Cellの中にLabelを追加し、Labelの大きさはCellの大きさいっぱいになるように、上の画像のような制約を追加しました。

Cellの大きさは画面に合わせた可変サイズになるように下記のように設定しました。
（Cellの配置の仕方としては時間割アプリのような配置を想定しています。)

extension ViewController: UICollectionViewDelegateFlowLayout{
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        //baseViewはrootViewのsubViewでSpacing to nearest neighborを上下左右0に設定
        //gridMarginはCell間の余白でCGFloat: 1.0に設定

        let baseWidth = baseView.frame.width
        let baseHeight = baseView.frame.height
        //一列に存在する余白の数
        let numberOfMargin: CGFloat = 5
        let totalGridWidthMargin = gridMargin * numberOfMargin
        let totalGridHeightMargin = gridMargin * 6
        //何時限目かを表すCellの横幅
        let classWidth = (baseWidth - totalGridWidthMargin) * 0.1
        //曜日のCellの高さ
        let weekHeight = baseHeight * 0.08
        //時間割のCellの高さ
        let timeTableWidth = (baseWidth - classWidth - totalGridWidthMargin) / CGFloat(numberOfWeek)
        let timeTableHeight = (baseHeight - weekHeight - totalGridHeightMargin) / 6
        
        switch indexPath.section {
        case 0:
            if (indexPath.row == 0) {
                return CGSize(width: classWidth, height: weekHeight)
            } else {
                return CGSize(width: timeTableWidth, height: weekHeight)
            }
        case 1:
            if (indexPath.row % 6 == 0){
                return CGSize(width: classWidth, height: timeTableHeight)
            } else {
                return CGSize(width: timeTableWidth, height: timeTableHeight)
            }
        default: return CGSize(width: 0, height: 0)
        }

    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return gridMargin
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return gridMargin
    }
}

理想としては、このようなCellのなかにLabelをCellのサイズいっぱいに広げるように配置したいです。

しかし、最初に述べたような制約を課すと

このように、UICollectionViewDelegateFlowLayoutで設定したCellのサイズではなくなってしまいます。

これはどういった原因が考えられるのでしょうか？

Comments

[退会済みユーザー]

Flowlayoutのデリゲートの設定がひつようだったかな？
とりあえず、sizeForItemAtが呼ばれてるか、breakpointやprintで確認してはどうでしょうか？

[kurukururin]

sizeForItemAtが呼ばれていることは確認しました！
cellの中のLabelにspacing to nearet heighborの上下左右を0にしたときだけサイズがおかしくなるんですよね・・
水平、垂直方向を中央に制約した場合は正しいサイズで反映されていました。

[退会済みユーザー]

labelのwide/height == cellのwide/heightにして、vertical/herizontal Centerに設定すると要望どおりに表示されるってことですか？

[kurukururin]

alignmentの設定のところでholiozontally in container　とvertically in containerの制約を加えるとlabelの大きさはcellのサイズいっぱいにはならないのですが中央に配置されるって感じです。
lableのwidth/heightをcellのサイズと同じくする制約（例えばequal widthを使う）を追加するとcellのサイズが崩れます。。

[退会済みユーザー]

wide/height を設定するとcellのwide/heightがラベルのwide/heigthに引っ張られるのね…
ラベルのIntrinsic Content Sizeについてしらべてみては？
https://qiita.com/shtnkgm/items/f0b189e4184fe6c90707

Answer 1

UICollectionViewCompositionalLayoutクラスを使ったレイアウト方法が現在は良いみたいですね

Answer 2

あんまり気にしたことなかったけど、layout-Translates Mask into Constraints を入り切りすると変わりますね。

↑↓ 違いはLabelのlayout-Translates Mask into Constraintsだけ。

↓ところどころ、適当に書き換えてます

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tCollectionView: UICollectionView!
    
    let array = [["A", "B", "C", "D", "E", "F"],
                 ["a01", "b01", "c01", "d01", "e01", "f01"],
                 ["a02", "b02", "c02", "d02", "e02", "f02"],
                 ["a03", "b03", "c03", "d03", "e03", "f03"],
                 ["a04", "b04", "c04", "d04", "e04", "f04"],
                 ["a05", "b05", "c05", "d05", "e05", "f05"],
                 ["a06", "b06", "c06", "d06", "e06", "f06"]]
    
    let gridMargin: CGFloat = 1.0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tCollectionView.dataSource = self
        tCollectionView.delegate = self
        tCollectionView.register(UINib(nibName: "TCell", bundle: Bundle.main), forCellWithReuseIdentifier: "Cell")
    }
}


extension ViewController: UICollectionViewDataSource {
    
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return array.count
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return array[section].count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! TCell
        cell.tLabel.text = array[indexPath.section][indexPath.row]
        return cell
    }
    
}

extension ViewController: UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        let baseWidth = tCollectionView.frame.width
        let baseHeight = tCollectionView.frame.height
        
        let numberOfWeek = array[0].count
        
        //一列に存在する余白の数
        let numberOfMargin: CGFloat = 5
        let totalGridWidthMargin = gridMargin * numberOfMargin
        let totalGridHeightMargin = gridMargin * 6
        //何時限目かを表すCellの横幅
        let classWidth = (baseWidth - totalGridWidthMargin) * 0.1
        //曜日のCellの高さ
        let weekHeight = baseHeight * 0.08
        //時間割のCellの高さ
        let timeTableWidth = (baseWidth - classWidth - totalGridWidthMargin) / CGFloat(numberOfWeek)
        let timeTableHeight = (baseHeight - weekHeight - totalGridHeightMargin) / 6

        if indexPath.section == 0 {
            return CGSize(width: timeTableWidth, height: weekHeight)
        } else {
            return CGSize(width: timeTableWidth, height: timeTableHeight)

        }

    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        
        return UIEdgeInsets(top: gridMargin, left: 0.0, bottom: gridMargin, right: 0.0)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return gridMargin
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return gridMargin
    }
}

Comments

[kurukururin]

layout-Translates Mask into Constraintsを設定してみたのですが、Cellのサイズがおかしくなってしまい想定している通りにはなりませんでした。。

Translates Mask into ConstraintsについてAppleの公式にて調べてみたのですが、
If you want to use Auto Layout to dynamically calculate the size and position of your view, you must set this property to false, and then provide a non ambiguous, nonconflicting set of constraints for the view.
との記述があったので動的なサイズにするという目的にはそぐわないのではないかと思いました。。

[退会済みユーザー]

AutoLayoutではなくてUICollectionViewDelegateFlowLayoutが計算してるんじゃないかなと解釈しちゃうんですが,
ちょっとお役に立てなそうです。申し訳ない。