CODEWITHSUNDEEP
iosswiftipadlayoutuicollectionview
askaale
askaale

Reputation: 1199

Swift UICollectionView iPad Flow Layout Not Working

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:

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.

Upvotes: 2

Views: 1167

Answers (1)

PPL
PPL

Reputation: 6555

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.

Upvotes: 5

Related Questions