Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

iOS OMG constraints are killing me - how to do this????

patent10021

patent10021

macrumors 68040
Original poster
Apr 23, 2004
3,552
834
So I have 3 rows and 3 columns of buttons on top of UIImages. 9 and 9.

What is the easiest way to set this up for iPhone 5,6,6+? I've tried tons of alignment and pinning options.

I've color coded them so it's easier to see but normally the buttons and UIImages are invisible.
 
Last edited:
Thanks

I've already been there. I'm already in auto layout mode with landscape is disabled intentionally.

Here's a new screenshot. background image has been set correctly using top,leading,trailing,bottom.

Using the function 'add missing constraints' to the 9 UIImages gave me this which is close but it's still weird as you can see. I can't for the life of me get the bottom 3 to be the same height as the rest. And as you can see I can't get the center 3 to be the same width as the others. I simply want all 9 to be the same width and height and cover any device evenly.



.



.
 
Last edited:
it can be tricky to do and sometimes a bit of trial and error. there is an equal width and equal height option that should help. start at the top and set the top and leading edge and then move right and down doing the same to the object next to it.

the key is because the devices aren't all the same proportion you'll have to have a constraint with lower priority than the others so you can make sure you don't have a space at the bottom or side of the larger screens. I did a similar layout but just 5 buttons that covered the entire width and were varying heights to fill the screen.

I did my heights <= 100 with a 750 priorty and then select all your items and set equal height and width.

sometimes its easier when you are learning how it works to do just a single row of 3 and make it fill the entire screen. you'll discover what you need to learn with a lot fewer items so when you need to start over it's no big deal and you don't have to work with all 9 items.
 
Punkjumper said:
it can be tricky to do and sometimes a bit of trial and error. there is an equal width and equal height option that should help. start at the top and set the top and leading edge and then move right and down doing the same to the object next to it.

the key is because the devices aren't all the same proportion you'll have to have a constraint with lower priority than the others so you can make sure you don't have a space at the bottom or side of the larger screens. I did a similar layout but just 5 buttons that covered the entire width and were varying heights to fill the screen.

I did my heights <= 100 with a 750 priorty and then select all your items and set equal height and width.

sometimes its easier when you are learning how it works to do just a single row of 3 and make it fill the entire screen. you'll discover what you need to learn with a lot fewer items so when you need to start over it's no big deal and you don't have to work with all 9 items.
Click to expand...
Thanks. Yeah major headache with these tic tac toe type of grid layouts. Way too many relationships.

I actually have it close to what I want. The problem is the position of the letterX's and size of the letterX's don't adjust to 5.5".

What do you think the issue is?
 
Last edited:
patent10021 said:
So I have 3 rows and 3 columns of buttons on top of UIImages. 9 and 9.

What is the easiest way to set this up for iPhone 5,6,6+? I've tried tons of alignment and pinning options.

I've color coded them so it's easier to see but normally the buttons and UIImages are invisible.
Click to expand...

You could easily code this using UIImageView(frame:CGRect)
This way it will always align properly
 
Thanks guys. I got it working on my own with trial and error. I just had to take a step back and study Xcode's layout methods for a day and along with some good YouTube videos got the hang of it. After setting up a grid of 3x3 on top of another UIImage everything else seems easy lol
 
So, what's the answer?

How did you do it?

If you found this article before you implemented this what would you have wanted to know?
 
Hi

What do you mean?

I just used auto layout and constraints in Xcode.

Tons of videos on YouTube.

I was using TOO MANY constraints before lol
 
well seriously. Not many choices.


Many programmers have told me "All programmers use Google and Youtube in addition to Stack. Sometimes forum replies are not as fast as you'd like so you gotta search everywhere.

Btw, are you familiar with UIKit Dynamics? I am trying to get an object to randomly move around the screen. Disappear off screen and come in from off screen. Random vectors with a constant gravity. I am using gravity.gravityDirection = CGVectorMake(0.1, 0.0) instead of pusher.pushDirection = CGVectorMake(0.1, 0.0).

Obviously not setting collider. Problem is I don't know how to make it reappear on screen. To slide on screen from off screen.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back