How to resize UICollectionView item to a square size with the height of the collection view?

Question

A collection view is placed in the upper part of the screen. The collection view is horizontal and has one row.

The row can contain multiple collection view cells.

Each cell inside has UIImageView. The UIImageView is meant to contain an UIImage.

The UIImage is a photo. A photo might be of a different size, but inside the collection view cell it has to be squared with aspect ratio 1:1.

The problem is making the collection view cell to be of square size, where the side of the square should be equal to the height of the collectionView. And the UIImageView should take whole space of the collection view cell making the UIImage squared.

The UIImageView has constraints set ratio 1:1; and the top, leading, and bottom of collection cell.

The collection cell has its size calculated programatically:

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

    let size = collectionView.bounds.size.height

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

I get the following error in the debugger:

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
    (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)
(
    "<NSAutoresizingMaskLayoutConstraint:0x6180000968f0 h=--& v=--& UIView:0x7f8c3f61e940.width == 217   (active)>",
    "<NSAutoresizingMaskLayoutConstraint:0x618000096990 h=--& v=--& UIView:0x7f8c3f61e940.height == 100   (active)>",
    "<NSLayoutConstraint:0x618000096030 UIImageView:0x7f8c3f61eae0.width == UIImageView:0x7f8c3f61eae0.height   (active)>",
    "<NSLayoutConstraint:0x618000096120 H:[UIImageView:0x7f8c3f61eae0]-(0)-|   (active, names: '|':UIView:0x7f8c3f61e940 )>",
    "<NSLayoutConstraint:0x618000096170 V:[UIImageView:0x7f8c3f61eae0]-(0)-|   (active, names: '|':UIView:0x7f8c3f61e940 )>",
    "<NSLayoutConstraint:0x6180000961c0 H:|-(0)-[UIImageView:0x7f8c3f61eae0]   (active, names: '|':UIView:0x7f8c3f61e940 )>",
    "<NSLayoutConstraint:0x618000096210 V:|-(0)-[UIImageView:0x7f8c3f61eae0]   (active, names: '|':UIView:0x7f8c3f61e940 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x618000096030 UIImageView:0x7f8c3f61eae0.width == UIImageView:0x7f8c3f61eae0.height   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

How to make it work?

so the UI appears as you wanted. and your only problem is the constraints conflict? — hasan
Is there any padding between cell and imageView inside it ??? — Sandeep Bhandari
@hasan83 The constraint <NSLayoutConstraint:0x618000096030 UIImageView:0x7f8c3f61eae0.width == UIImageView:0x7f8c3f61eae0.height (active)> is being broken and the image appears not squared. — Tomasz Nazarenko
@SandeepBhandari There is no padding between the cell and the image view. — Tomasz Nazarenko
Just add the UIImageView with leading, trailing, top and bottom and set the content mode to aspectFit. And keep your sizeForItemAtIndexPath the same. That should produce a square image completely fit inside the cell. — Rikh

hasan hasan · Accepted Answer · 2017-03-18T17:51:02

You don't need both the aspect ratio constraint and the right constraint. One is enough. But, logically if you had both they shouldn't conflict if your size calculations is correct.

Your calculation looks good. Therefore, the thing in mind that could effect your calculations is the (header size, footer size, spacing insets)

Another thing that could affect this is reloading collection view data on viewDidLoad before the uiviews complete layouting.

How to resize UICollectionView item to a square size with the height of the collection view?

1 Answers