autolayoutだけでUICollectionViewのセルの高さを決定する

Question

グリッド内にセルを表示するコレクションビューが必要です。だから標準的なフローレイアウトは私のためにうまくいきます。しかし、セルの高さは、セルに置くオートレイアウトの制約によって決定されるはずですが、1行に表示するセルの数を教えたいと思います。ここに私のセルレイアウトです：

それは非常に簡単です - 画像ビューとその下の2つのラベル。画像ビューはのアスペクト比の制約（1：1）を持っています。これは、セルの幅がわかっているときはいつでも、自動レイアウトルールによって高さが自動的に認識されることを意味します（cellTop-image-label1 -label2-cellbottom）。 「

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
    let availableWidth = collectionView.frame.width - padding 
    let widthPerItem = availableWidth/itemsPerRow 

    return CGSize(width: widthPerItem, height: widthPerItem) 
} 

あなたが見ることができるように、私はドン以来：私は、行ごとに2つの項目を表示するにはコレクションビューを伝えるために、他の良い方法を知らないので、今

、私はUICollectionViewDelegateFlowLayoutメソッドをオーバーライドしていますアイテムの高さを知っています。幅と同じものを返します。オートレイアウトが後でそれを修正することを望みます。私はまた、全体のメカニズムが働き始めるためにestimatedItemSizeを設定しました。

結果はかなり奇妙です - コレクションビューは、イベントは大部分がラベルの長さに応じて、考慮に私が返す幅を取らないように思える：

私はいくつかの他のを見てきました人々は手作業で幅のセルサイズを計算することを推奨しています。たとえば、「自分でレイアウトしてから測定し、次にこの幅のサイズを教えてください」というように、セルフサイズを計算することをお勧めします。手動でサイズを混乱させることなくこれを行う方法があるかどうかを知る。

Answer 1

あなたは簡単に以下に示すように、ストーリーボードのサイズインスペクタでごcollectionViewセルの高さを知ることができます。

今、ちょうどここから、この高さをピックアップして、上書きに渡しますUICollectionViewDelegateFlowLayout方法：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
    let availableWidth = collectionView.frame.width - padding 
    let widthPerItem = availableWidth/itemsPerRow 

    return CGSize(width: widthPerItem, height: **114**) 
} 

希望の出力が得られます。

Answer 2

私はすべてを自動レイアウトに移すというトリックを実装しました。デリゲートメソッドfunc collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSizeを完全に削除し、インターフェイスビルダのセルコンテンツの幅の制約を追加しました（初期値を何かに設定した、それは重要ではありません）。その後、私は、カスタムセルクラスにその制約のための出口を作成しました：セルが作成されたときに

class MyCell: UICollectionViewCell { 

    @IBOutlet weak var cellContentWidth: NSLayoutConstraint! 

    func updateCellWidth(width: CGFloat) { 
     cellContentWidth.constant = width 
    } 
} 

その後、私は、行ごとにしたいセルの数に応じて予め計算された値に幅の制約を更新します：

private var cellWidth: CGFloat { 
    let paddingSpace = itemSpacing * (itemsPerRow - 1) + sectionInsets.left + sectionInsets.right 
    let availableWidth = collectionView.frame.width - paddingSpace 
    return availableWidth/itemsPerRow 
} 

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath) as! MyCell 

    ... 

    cell.updateCellWidth(width: cellWidth) 

    return cell 
} 

これは、自動レイアウトセルサイズ設定を有効にすると、セルを正しくレイアウトします。