【iOS】動的にHeightが変化するCustom cellの実装方法

Question

投稿失礼します。
iOSアプリの開発をSwiftを使って進めている者です。
今回はタイトルの件につき、CollectionviewのCustom CellのHeightを動的に可変にする方法を教えていただきたく、質問させていただきます。

例えばPinterestのUIをイメージしていただければ一発でわかると思いますが、Custom Cell内の動的にHeightが変化する要素によってCustom CellのHeightも動的に変化させるようなプログラムを実装したいと考えています。(widthは固定します)

私の方で、下記のレイアウトのCollectionviewの Custom cellを作成しています。

【Custom cell構成図】
※要素のwidthは固定し、heightのみ可変/固定としたい。

UILabel①(可変)
UILabel②(可変)
UIImage①(固定)
UIView①(可変。下記の要素を内包する)
UILabel③(可変)
UIView②(固定。下記の要素を内包する)
UIImage②(固定)
UILabel④(固定)
UIView③(固定)

上記のレイアウトに基づき、ユーザーの入力によってCollectionviewの各cellのHeightを動的に変化させる場合、どのようなプログラムを書けばよろしいでしょうか？
自分でも下記のように全ての要素の高さを加算させた変数を取得してreturnで値を返してみましたが、うまくいきませんでした。

let cellHeight = self.label.layer.bounds.height + ……

何卒ご教授のほどよろしくお願いします。

Answer 1

UICollectionViewLayoutのサブクラスを作って、Cellのサイズをカスタマイズしてください。

サンプルコード

import UIKit

class CollectionViewLayout: UICollectionViewLayout {
   
    override func collectionViewContentSize() -> CGSize {
        let width = self.collectionView!.bounds.width
        let numOfItems = self.collectionView!.numberOfItemsInSection(0)
        let lastAttribute = layoutAttributesForItemAtIndexPath(NSIndexPath(forRow: numOfItems-1, inSection: 0))
        let height = lastAttribute!.frame.maxY + 20
        return CGSizeMake(width, height)
    }
    
    override func layoutAttributesForElementsInRect(rect: CGRect) -> [AnyObject]? {
        let numOfItems = self.collectionView!.numberOfItemsInSection(0)
        return (0..<numOfItems).map {
            self.layoutAttributesForItemAtIndexPath(NSIndexPath(forRow: $0, inSection: 0))!
        }
    }
    
    override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
        let attribute = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
        let contentWidth = self.collectionView!.bounds.width
        let row = CGFloat(indexPath.row)
        let x:CGFloat = 20.0
        let y:CGFloat = row * (row * 20.0 + 40.0) + 20.0
        let width:CGFloat = contentWidth - 40.0
        let height:CGFloat = row * 40.0 + 40.0
        attribute.frame = CGRectMake(x, y, width, height)
        return attribute
    }
}

Comments

[Kesth]

コメントありがとうございます！
すみません、実際のコード例などを用いてもう少し解説いただけると大変助かります！
初心者なもので、お手数お掛けします。

[Stripe]

UICollectionViewLayoutのサンプルコードを追加しました。

[Kesth]

サンプルコードありがとうございます！

Storyboardを使わずコードだけで開発を行っておりますが、通常通りCustom cellを加えたCollectionviewControllerを作成した上で、いただいたコードを追記すればよろしいでしょうか？
下記のようなイメージです。

import UIKit

class TestColle : UI〜 ｛
//割愛
｝

//CollectonViewに必要なfuncなども割愛

いただいたコード

[Stripe]

追記するだけでなく、ちゃんとUICollectionViewにセットしてください。
また、それはあくまでUICollectionViewLayoutのサンプルなので、あなたの要件に合うように修正してください。