How do you programmatically set up images to have the same relative size and position on every device?

Question

I have 3 rectangles and the size and placement of them is perfect... on the iPhone 6 and 7 plus. When I run this on a smaller iPhone or an iPad it looks all wrong.

I could make a huge if statement at the beginning of my app to check the device, then assign values to variables accordingly, but there has to be a better way, right? How do most apps size and position everything so the app looks pretty much the same on every device?

    let blueRect = UIView(frame:CGRect(x: self.view.frame.size.width / 2 - 100, y: 100, width: 200, height: 100))

    blueRect.backgroundColor = UIColor.blue

    self.view.addSubview(blueRect)



    let greenRect = UIView(frame:CGRect(x: self.view.frame.size.width / 2 - 100, y: 300, width: 200, height: 100))

    greenRect.backgroundColor = UIColor.green

    self.view.addSubview(greenRect)



    let redRect = UIView(frame:CGRect(x: self.view.frame.size.width / 2 - 100, y: 500, width: 200, height: 100))

    redRect.backgroundColor = UIColor.red

    self.view.addSubview(redRect)

try not using the constants , so in place go height 100 you can use frame.size.height/3 — Misha, Nov 15 '16 at 08:47
I think you should use constrains, check [this answer](http://stackoverflow.com/questions/26180822/swift-adding-constraints-programmatically) — Ahmad F, Nov 15 '16 at 08:53
@HylianGinyu You should define what is perfect and what is wrong for you. Which layout are you trying to implement? — alexburtnik, Nov 15 '16 at 08:56
Perfect is 200x100 and 200 points away from each other in the 6 & 7 plus simulator. Smaller iPhones have the rectangles too big and going off the screen, and the iPads have them tiny and all bunched up at the top. I'd like to implement the same size and position they are when viewed on a 6 & 7 plus on every device. — HylianGinyu, Nov 15 '16 at 09:14
@AhmadF I looked at that before and I tried pasting each one of the 7 methods into my code but it either did nothing or put a little red square in the middle of my screen. — HylianGinyu, Nov 16 '16 at 03:56

score 0 · Answer 1 · answered Nov 16 '16 at 07:55

To answer your question,

but there has to be a better way, right? How do most apps size and position everything so the app looks pretty much the same on every device?

Yes, there is and the better way is called Auto Layout.

If you are new to iOS, I really suggest doing it in storyboard. Is a lot easier to understanding how Auto Layout work in iOS. There is really good tutorial out there to help you understand Auto Layout. Checkout the one by Ray Wenderlich website.

If you really wish to do it programmatically, even if you try to define a relative size in code, is going to get real messy when you have more views. Auto Layout and Constraints is still the way to go. However, Apple way of Programmatically Creating Constraints is actually too verbose and in my opinion, troublesome to use. A external framework like Spring would be a great help to doing it programmatically.

Ultimately, regardless which path you look to take, a strong understanding of Auto Layout and Constraints is important in iOS. Without that, it is going to be really difficult to create suitable views for so many different Apple Devices.

How do you programmatically set up images to have the same relative size and position on every device?

1 Answers1