UICollectionViewCell - different layout for different size classes

almas Published at Dev

almas

I have a simple UICollectionViewCell with one image and a label. In regular-regular size class I want the image to be on top, and the label below it. This is what it looks like in the Xcode's preview tab:

In any other size class I want the image to be on the left, and the label on the right:

I setup the constraints this way:

ImageView has following constraints:

leading and top constraints for Any-Any
fixed width and height for Any-Any

The label has following constraints:

trailing constraint to Superview - for Any-Any
top constraint to the ImageView - only for Regular-Regular
leading constraint to Superview - only for Regular-Regular
top constraint to Superview - for Any-Any but not for Regular-Regular
leading constraint to ImageView - for Any-Any but not for Regular-Regular

I also implemented the method to return the different cell size based on the current trait collection:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    if (traitCollection.horizontalSizeClass == .Regular) {
      return CGSizeMake(240, 194)
    }
    else {
      return CGSizeMake(340, 128)
    }
  }

The cell looks fine in the preview, and everything works fine when I run it on iPhone (e.g Compact-Regular). However, auto layout breaks when I run it on iPad:

And of course I get a bunch of warnings in the debug console: Unable to simultaneously satisfy constraints.

So, I guess the question is - what is the proper way of setting up the cell for different size classes?

I created a github repo with a demo project

Thanks!

Jan Gorman

What you want to do is disable those constraints for the Regular-Regular size class like you have, but also change their priority to < 1000 (i.e. not required). That way it will instead use the higher priority constraints for the specific size class.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-25

Comments

0 comments

From Dev

Related Related

Article

UICollectionViewCell - different layout for different size classes

UICollectionViewCell - different layout for different size classes

Programmatically create auto layout constraints with different constants for different size classes

Programmatically create auto layout constraints with different constants for different size classes

Different layout for different screen size

Different layout with different screen size with bootstrap 3

Android Absolute Layout with different screen size

HTML/CSS grid layout with different size boxes?

How to know screen Size to different layout in android

android constrain layout support different screen size

AutoLayout Size Classes - different proportional heights

iOS: Size classes not changing for different sizes

Set Different Multiplier Value for Different Size Classes in Xcode Interface Builder?

is it possible to provide different images for UIImageView on different size classes

How to compare two different size array and give color in UICollectionviewcell as per compare?

Fixed Layout EPUB where each page has a different size

Layout weight not working properly in different screen size devices

Can't change Constraint IBOutlet that is defined for different size classes in IB

Programmatically implementing two different layouts using size classes

Setting constraints in different size classes, view does not appear in landscape

UILabel alignment and moving one view to other view in different Size Classes

Setting constraints in different size classes, view does not appear in landscape

UILabel alignment and moving one view to other view in different Size Classes

Various autolayout constraints for different device orientations programmatically and without size classes?

Cleaner way to instantiate different derived classes based on collection size?

different keyboards have different layout

Supporting different devices with different layout

NLog different layout for different loggers

Calculator app different layout on same screen size but different DPI (420 DPI vs 480 DPI)

Is it possible to have different table view cell row heights for different size classes?

TextSize for different device with different size?