0

I have created a frame that works well with iPhone 13 Pro max. However, the placement is not correct for devices with smaller screens. How can I edit my code, so it adjusts when on a device with a smaller or larger view?

My code:

struct GetStartedButton : View
{
    
    var body: some View {
        Text("Get Started")
            .frame(width: 352, height: 57)
            .background(Color(#colorLiteral(red: 0.8470588326454163, green: 0.37254902720451355, blue: 0.27450981736183167, alpha: 1)))
            .foregroundColor(Color.white)
            .cornerRadius(30)
            .padding(.top, 600)
        
    }
}

Here is how it looks on a Iphone 13 Pro Max: enter image description here

Here is how it looks on a Iphone 8 Plus: enter image description here

steeezyboy
  • 31
  • 4
  • 4
    Don't hard code any sizes -- use things like `padding` instead to define margins and frame alignments or `Spacer` to define layout. – jnpdx Sep 02 '22 at 17:25

1 Answers1

0

There are many ways to achieve what you desire, the most simple way being probably padding as jnpdx mentioned in the comment. You could also make the frame a certain portion of the screen width. Would look something like this:

struct GetStartedButton : View {
    let screenSize: CGRect = UIScreen.main.bounds
    
    var body: some View {
        Text("Get Started")
            .frame(width: screenSize.width / 1.1, height: screenSize.width / 6.8)
            .background(Color(#colorLiteral(red: 0.8470588326454163, green: 0.37254902720451355, blue: 0.27450981736183167, alpha: 1)))
            .foregroundColor(Color.white)
            .cornerRadius(30)
            .padding(.top, 600)
    }
}

I recommend setting the height parameter of the frame to screenSize.width too as not all the devices have the same display aspect ratio, resulting in it looking weird sometimes. Hope this helps!

scraptechguy
  • 69
  • 10