2

Currently experiencing some issues with the Flow layout using a collection view on iPads. I am currently developing an app that displays posts in a flow-layout, making it look nice and sleek. However, when testing the app on all of the devices, I noticed that the display changes on:

  • iPad 5th Generation
  • iPad Air
  • iPad Air 2
  • iPad Pro (9,7 inch)

But the remaining iPads, it displays properly. What seems to be the problem here? I am currently using this code to style my layout inside the CollectionView:

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

        switch UIDevice().screenType {
        case .iPhoneX:
            return CGSize(width: 180.0, height: 180.0)
            break
        case .iPhone5:
            return CGSize(width: 152.0, height: 152.0)
            break
        case .iPhone6:
            return CGSize(width: 180.0, height: 180.0)
            break
        case .iPhone6Plus:
            return CGSize(width: 200.0, height: 200.0)
            break
        case .iPad:
            return CGSize(width: 400.0, height: 400.0)
            break
        case .iPadTwo:
            return CGSize(width: 400.0, height: 400.0)
            break
        case .iPadThree:
            return CGSize(width: 400.0, height: 400.0)
            break
        default:
            return CGSize(width: 200.0, height: 200.0)
            break
        }
    }

'iPad Two' and 'iPad Three' is just some enums I tried to create, in an attempt to determine iPad type and if I got an output printing some text (but it just falls down to default), regardless of the iPad.

And this is my screen sizes:

 switch UIScreen.main.nativeBounds.height {
        case 960:
            return .iPhone4
        case 1136:
            return .iPhone5
        case 1334:
            return .iPhone6
        case 2208:
            return .iPhone6Plus
        case 1024:
            return .iPad
        case 1366:
            return .iPadTwo
        case 834:
            return .iPadThree
        case 2436:
            return .iPhoneX
            break
        default:
            return .unknown
        }

And here is a visual representation of my problem, occuring on the listed devices, but not on the rest:

How it's supposed to look like:

This is how it's supposed to look like.

What it looks like on the listed devices:

enter image description here

I would really appreciate the help if someone could help me to troubleshoot this, as I can't seem to find a properly working solution.

askaale
  • 1,199
  • 1
  • 23
  • 50
  • Please refer this link: https://stackoverflow.com/questions/49937074/how-to-use-collectionview-flow-layout-to-get-correct-view/ and try to do like this. – Khushbu May 24 '18 at 07:09

1 Answers1

5

FYI. I suggest, do not set CollectionCell Size in sizeForItemAt indexPath, try some generic way.

You should extend UICollectionViewFlowLayout and create new Layout like this,

class HomeLayout: UICollectionViewFlowLayout {    
    var numberOfItemsPerRow : Int {
        get{
            var value = 0
            if UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiom.phone {
                value = 3
            } else {
                value = 5
            }
            return value
        }
        set {
            self.invalidateLayout()
        }
    }

    override func prepare() {
        super.prepare()
        if self.collectionView != nil {
            var newItemSize = self.itemSize
            let itemsPerRow = max(self.numberOfItemsPerRow, 1)
            let totalSpacing = self.minimumInteritemSpacing * CGFloat(itemsPerRow - 1)
            let newWidth = (self.collectionView!.bounds.size.width - self.sectionInset.left - self.sectionInset.right - totalSpacing) / CGFloat(itemsPerRow)
            newItemSize.width = max(newItemSize.width,newWidth)
            if self.itemSize.height > 0 {
                let aspectRatio: CGFloat = self.itemSize.width / self.itemSize.height
                newItemSize.height = newItemSize.width / aspectRatio
            }
            self.itemSize = newItemSize            
        }
    }
}

Now assign your CollectionView's UICollectionViewFlowLayout to HomeLayout from Interface builder.

enter image description here

Adjust your sectionInsets and Min Spacing from Storyboard.

FYI. Set your numberOfItemsPerRow in HomeLayout accordingly.

PPL
  • 6,357
  • 1
  • 11
  • 30
  • I will try that. I'll give you feedback when I have tried it. Thanks. – askaale May 24 '18 at 07:08
  • I still don't get it to work properly. Maybe it's because I have not set the numberOfItemsPerRow? How would I set this properly? – askaale May 24 '18 at 07:20
  • Suppose for iPhone you want 3 items per row then set value = 3 and for iPad accordingly – PPL May 24 '18 at 07:27
  • You do not need to set it explicitly, it is default 3 for iPhone and 5 for iPad, if you want to set it explicitly you need to do some code – PPL May 24 '18 at 07:28
  • Works like a charm, amazing! Thank you so much! – askaale May 24 '18 at 07:56