Utilise UICollectionView in Landscape & Portrait Mode

Hi,


Can somebody help me with this?


I have used UICollectionView square blocks for my app in portrait mode. But when I rotate my device to landscape nothing happens same protrait dimesions are utilised for landscape mode.


I want to use different dimensions for landscape & portrait mode for my app which will be utilised dynamically on rotation to any mode.


Note I am using swift programming language.

Did you create the UICollectionView in IB ?


If so, have you defined constraints for layout ?

My Collection view is just square & UIText Label inside it in exact square size.


In portrait mode there is 2 squares & in landscape mode it should by 3 squares horizontaly.


& Yes I have used Interface builder to layout UICollectionView.


I have used code to determine layout per screen size.

Can you show how "I have used code to determine layout per screen size."


In which func ?


Question: why not set constraint in IB ? Check there are not constraints in IB that conflict with what you are doing in code.

I am not using constraints in IB...


This is my code


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        var sizeArea = CGSize()
        if self.view.frame.size.width == 320 {
            // It's iPhone 4, 4s, 5, 5s
            let spacing = self.view.frame.size.width - 15
            let itemWidth = spacing / 2
            let itemHeight = itemWidth
            sizeArea = CGSize(width: itemWidth, height: itemHeight)
        }
        return sizeArea
    }


Above code is for iPhone 4 or 5s...


At protrait view you can see there are 2 squares pf collectionview But when I roate my phone to landscape there should be 3 square collection views horizontally...

You test only == 320, which is portrait.


Where do you test landscape ?


In addition, your code will not work with other iPhones.


So, if you do not want to do it in IB, you could test:


if self.view.frame.size.width < if self.view.frame.size.height {
     // That's Portrait, all iPhones
            let spacing = self.view.frame.size.width - 15
            let itemWidth = spacing / 2
            let itemHeight = itemWidth
            sizeArea = CGSize(width: itemWidth, height: itemHeight)
} else {
     // That's Landscape
            let spacing = self.view.frame.size.width - 15 
            let itemWidth = spacing / 3     // I understand you want to show 3 
            let itemHeight = itemWidth      // May be have to check this
            sizeArea = CGSize(width: itemWidth, height: itemHeight) 
}

Hi,


I further edited your code, I have added iPad, iPhone & unspecified categories using UserInterfaceIdium...


Code is totally working on iPhone but not working on iPad... It creates 4 UICollectionViews in Portrait & 5 in Landscape... Even I have specified 4 on both orientations...


I am testing this on iOS Simulator...


My Code:


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        var sizeArea = CGSize()
        if (UIScreen.main.traitCollection.userInterfaceIdiom == UIUserInterfaceIdiom.pad) {
            print("It's iPad")
            if self.view.frame.size.width < self.view.frame.size.height {
                print("It's Portrait iPad")
                /
                let spacing = self.view.frame.size.width - 25
                let itemWidth = spacing / 4
                let itemHeight = itemWidth
                sizeArea = CGSize(width: itemWidth, height: itemHeight)
            } else {
                print("It's Landscape iPad")
                /
                let spacing = self.view.frame.size.width - 25
                let itemWidth = spacing / 3
                let itemHeight = itemWidth
                sizeArea = CGSize(width: itemWidth, height: itemHeight)
            }
        } else if (UIScreen.main.traitCollection.userInterfaceIdiom == UIUserInterfaceIdiom.phone) {
            print("It's iPhone")
            if self.view.frame.size.width < self.view.frame.size.height {
                print("It's Portrait iPhone")
                /
                let spacing = self.view.frame.size.width - 15
                let itemWidth = spacing / 2
                let itemHeight = itemWidth
                sizeArea = CGSize(width: itemWidth, height: itemHeight)
            } else {
                print("It's Portrait iPhone")
                /
                let spacing = self.view.frame.size.width - 20
                let itemWidth = spacing / 3
                let itemHeight = itemWidth
                sizeArea = CGSize(width: itemWidth, height: itemHeight)
            }
        } else if (UIScreen.main.traitCollection.userInterfaceIdiom == UIUserInterfaceIdiom.tv) {
          
        } else if (UIScreen.main.traitCollection.userInterfaceIdiom == UIUserInterfaceIdiom.unspecified) {
            print("It's Unspecified Device")
            if self.view.frame.size.width < self.view.frame.size.height {
                print("It's Portrait iPhone")
                /
                let spacing = self.view.frame.size.width - 15
                let itemWidth = spacing / 2
                let itemHeight = itemWidth
                sizeArea = CGSize(width: itemWidth, height: itemHeight)
            } else {
                print("It's Portrait iPhone")
                /
                let spacing = self.view.frame.size.width - 20
                let itemWidth = spacing / 3
                let itemHeight = itemWidth
                sizeArea = CGSize(width: itemWidth, height: itemHeight)
            }
        }
        return sizeArea
    }

Problem is with iPad only (I am using Simulator) when I open app in landscape orientation landscape layout comes right but portrait layout is wrong. When I open app in portrait, portrait layout comes right but landscape orientation layout is wrong.

Can you show exactly what you get on log when you open and after rotating ?


Seems you have not specified the same for iPad, but 4 and 3

               let itemWidth = spacing / 4 
                let itemHeight = itemWidth 
                sizeArea = CGSize(width: itemWidth, height: itemHeight) 
            } else { 
                print("It's Landscape iPad") 
                let spacing = self.view.frame.size.width - 25 
                let itemWidth = spacing / 3

Hi,


iPhone simulatar calls landscape & portrait function as per device rotation but iPad simulatar doesn't call function after device rotation... I know this as per print log.


I don't know it's iPad simulator related problem or physical iPad related problem. I think I have to taste it on real iPad.

Could you report after you test on device ?

Utilise UICollectionView in Landscape & Portrait Mode
 
 
Q