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

patent10021

macrumors 68030
Original poster
Apr 23, 2004
2,907
394
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:

patent10021

macrumors 68030
Original poster
Apr 23, 2004
2,907
394
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:

Punkjumper

macrumors member
Jan 12, 2013
48
2
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.
 

patent10021

macrumors 68030
Original poster
Apr 23, 2004
2,907
394
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.
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:

grandM

macrumors 65816
Oct 14, 2013
1,099
56
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.
You could easily code this using UIImageView(frame:CGRect)
This way it will always align properly
 

patent10021

macrumors 68030
Original poster
Apr 23, 2004
2,907
394
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
 

PhoneyDeveloper

macrumors 68040
Sep 2, 2008
3,114
93
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?
 

patent10021

macrumors 68030
Original poster
Apr 23, 2004
2,907
394
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
 

patent10021

macrumors 68030
Original poster
Apr 23, 2004
2,907
394
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.