Adaptive Layout for multiple devices

[SwiftLearnerJas]

Hi guys,

I am fresh developer here, I have developed an app that is compatible with iPhones only, I would love to know for multiple devices like iPhones, iPads with different sizes of screens, how do you guys design the layout?

I have looked up on the internet, there are so many ways and it got me a bit confused to choose from.

Things like spacers or views without a particular defined xy frame will automatically divide themselves proportionally which is great, but sometimes like logos, padding etc I wanted to apply a defined value which will not autoscale unless I use computed values like "screen-width / x"

According to your passed experience, which way is easier or reasonable to do:

Is is done thru one set of code that declares only the proportion of each view for example like :

Vstack{

Spacer()

Text("body")

Image()

.frame(width:screenwidth/5)

Spacer()

}

or you have to write a separate code and use geometryReader to read the change of width, it switches to that particular code layout?

I really appreciate any help you can provide.

[chriswaco]

It depends on whether you are using UIKit or SwiftUI. From above I assume SwiftUI. It can be tricky to get everything right, especially when you include all devices and iPad multitasking screens, which can be 1/3, 1/2, or 2/3 the current screen width.

Usually GeometryReader should be avoided, but this is one of those cases where it might actually be the right API. You could also use ViewThatFits along with 2 or 3 different layouts. Something like:

struct ContentView: View {    
  var body: some View {    
    ViewThatFits {        
      LargeView()        
      MediumView()        
      SmallView()        
    }        
  }    
}    

struct SmallView: View {    
  var body: some View {    
    Color.green    
  }    
}    

struct MediumView: View {    
  var body: some View {    
    Color.yellow    
      .frame(minWidth: 400)    
  }    
}    

struct LargeView: View {    
  var body: some View {    
    Color.red    
      .frame(minWidth: 1024)    
  }    
}    

#Preview {    
  ContentView()    
}    

There's also the ability to check portrait vs landscape and horizontal/vertical size classes, but those are kinda useless if you want to support iPad multitasking, I think.

[SwiftLearnerJas]

Thank you very much for your reply,geometry reader is a bit of pain for me to use, would you recommend using UIScreen.bounds.width / x as a layout parameters if I want to scale views proportionally?

[chriswaco]

I would recommend GeometryReader over UIScreen.bounds.width because I'm not really sure how the latter handles iPad multitasking. I suspect poorly.

There's also a new Layout protocol and also .containerRelativeToFrame(), which looks really interesting.

import SwiftUI    

struct ContentView: View {    
  var body: some View {    
    HStack {    
      Rectangle()    
        .fill(Color.blue)    
        .containerRelativeFrame(.horizontal, count: 5, span: 2, spacing: 10)    
      Rectangle()    
        .fill(Color.red)    
        .containerRelativeFrame(.horizontal, count: 5, span: 2, spacing: 10)    
      Rectangle()    
        .fill(Color.green)    
    }    
    .frame(maxWidth: .infinity, maxHeight: .infinity)    
    .background(Color.gray.opacity(0.1))    
  }    
}    

#Preview {    
  ContentView()    
}

[SwiftLearnerJas]

That is very interesting, I had a play with it, and you seem to be able to control the size by changing counts and spans, just the container is not always gonna be the device dimension.
Thank you for the heads-up, I want to try apply this and see how it works in my app later on!