How can I create horizontal collection view with auto height in swift?

Question

I created a horizontal collection view that calculates its own height, but the height is not calculated as desired.

My flowlayout and height constraint codes are as follows:

 if let flowLayout = collectionViewAppName.collectionViewLayout as? UICollectionViewFlowLayout {
            flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
            flowLayout.scrollDirection = .horizontal
            flowLayout.sectionInset = .init(top: 0, left: 0, bottom: 0, right: 32)
            flowLayout.minimumLineSpacing = 8
            flowLayout.minimumInteritemSpacing = 0
        }

let height = collectionViewAppName.contentSize.height
collectionViewAppName.heightAnchor.constraint(equalToConstant: height).isActive = true

Collection view cell class:

final class AppTypeCollectionViewCell: UICollectionViewCell {
        @IBOutlet private weak var viewContainer: UIView!
        @IBOutlet private weak var stackViewContent: UIStackView!
        @IBOutlet private weak var imageViewAppLogo: UIImageView!
        @IBOutlet private weak var labelAppType: UILabel!
        @IBOutlet private weak var viewContainerOfImageView: UIView!
    
        override func awakeFromNib() {
            super.awakeFromNib()
            initViews()
        }
    
        private func initViews() {
            viewContainer.backgroundColor = .systemGray6
            labelAppType.font = UIFont.prepareGillSansSemiBoldFont(size: 15)
            viewContainer.clipsToBounds = true
            viewContainer.layer.cornerRadius = 16
            imageViewAppLogo.layer.cornerRadius = 8
            viewContainer.layer.borderColor = UIColor.Custom.foregroundColor.cgColor
            viewContainer.layer.borderWidth = 1.5
            imageViewAppLogo.contentMode = .scaleAspectFill
            imageViewAppLogo.clipsToBounds = true
        }
        
        func configure(with model: AppTypeCellModel) {
            let appType = model.appType
            imageViewAppLogo.image = appType.appLogo
            labelAppType.text = appType.appName
            if appType == .allApps {
                viewContainerOfImageView.isHidden = true
            }
        }
        
        func configureSelectedItem() {
            viewContainer.backgroundColor = UIColor.Custom.foregroundColor
            labelAppType.textColor = .black
        }
        
        func clearPreviousSelectedItem() {
            viewContainer.backgroundColor = .clear
            labelAppType.textColor = .label
        }
    
        override func prepareForReuse() {
            super.prepareForReuse()
            labelAppType.textColor = .label
            viewContainer.backgroundColor = .clear
            viewContainerOfImageView.isHidden = false
        }
    }

I achieved the height I wanted by giving it a fixed value, for example 55. I am attaching the result I wanted and a screenshot of the code I wrote.

So, what is the problem here?

fixed 55 height constraint and the result I want

collection view automatic height calculation result

I use "contentsize" to calculate its own height, but it doesn't work as desired.

Answer 1

A UICollectionView with flow layout arranges its cells based on the collection view frame size that YOU assign.

If you don't know the what the height of your cells will be when you setup the frame of the collection view (or if the cell height might change while the app is running), then you will need to calculate the cell height and update the collection view frame at run-time.