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.

DonMag · Accepted Answer · 2024-03-13 13:45:57Z

0

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.

answered Mar 13, 2024 at 13:45

DonMag

78.7k5 gold badges64 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Aproachate Over a year ago

Thank you, but should I calculate the height of each collection view cell? For example, I added "flowLayout.itemSize = CGSize(width: 35, height: 35)", but the collection view does not look the way I wanted (it looks like the automatic height image I added). Actually I want to create horizontal collection view in single line.

DonMag Over a year ago

@Aproachate - don't set the .itemSize ... set the collection view's height.

Aproachate Over a year ago

Should I use "size for item" function, can you tell me a little more about the path I should follow?

DonMag Over a year ago

@Aproachate - in your post, you show a screen-cap of "fixed 55 height constraint and the result I want" ... If that gives you the result you want, why not use that?

Aproachate Over a year ago

Actually, I can use it, but I want to learn the exact right way. When i give it 55 height constraint, it looks a little big on devices like iPhone SE.

|

Collectives™ on Stack Overflow

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

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related