iOS Adjust Vertical Constraints in Code

pellets007 · Oct 16, 2014

Hello everyone, I'm getting ready to release my first applications, but I'd like to make sure things look a bit pretty beforehand.

So I have nine different labels, each of which are equally spaced on the storyboard using the interface builder. Each label counts down to specific date, and as the day is passed, the label and the image fade away.

I would like to make it so that, as a label disappears, the remaining labels spread out once again to evenly fill up the screen. How can I implement this in actual code? I haven't dealt too much with coding the interface, but I have a feeling it shouldn't be complicated. I simply need to adjust the Center Y Alignment Constraint's multiplier to account for the missing labels. With nine labels, it's 1/10 for each label, with eight, it would be 1/9, etc...

Any help would be appreciated, pertaining to my current issue or just general app advice! I'm pretty excited, so thank you!

EDIT:
Including this tidbit of code at deals with my animation which fades out the image & label after the day has passed. Currently only set for the first day.

Code:

UIView.animateWithDuration(0.7, delay: 1.0, options: nil, animations: {
            self.dayOneBox.alpha = 0
            self.dayOneLabel.alpha = 0
            }, completion: { finished in
                println("finished")
            })

samiznaetekto · Oct 18, 2014

Just do it programmatically. Calculate positions of buttons depending on screen size.

pellets007 · Oct 19, 2014

samiznaetekto said:
Just do it programmatically. Calculate positions of buttons depending on screen size.

Right! Which is what it does now, except the buttons aren't relative to one another. I'm not sure how to do it any other way.

chown33 · Oct 20, 2014

pellets007 said:
Right! Which is what it does now, except the buttons aren't relative to one another. I'm not sure how to do it any other way.

Think through the calculations.

Let's start with 1 button. Its Y coordinate should be at the middle of its containing view's height. "The middle" = height / 2. So the button's Y should be at container.height / 2.

But that's not quite correct. You want the button to be centered at container.height / 2. Can you set a button's center Y and have it automatically set the top Y while maintaining its original height? If not, then subtract half the button's height from container.height / 2 to get the button's top Y coordinate (draw this out with pencil and paper to see why).

Now consider 2 buttons. They should be placed evenly, which means at the 1/3 and 2/3 points of the container's height. I.e. container.height / 3 and 2 * container.height / 3. Again, these are where you want the button's center Y, not its top Y.

Next, consider 3 buttons. They'll be at 1/4, 2/4, and 3/4 points of container.height.

It should now be apparent that you divide container.height by the number of buttons + 1 to determine the space between Y's where the button's center Y should be. You then subtract half the button's height to determine where the button's top Y should be.

Again, I suggest drawing this out on paper, putting in numbers, such as a container height of 400 with 3 buttons, divide it by 4 (100), and then step through (100,200,300), subtracting 1/2 the button height to determine the button's top Y.

pellets007 · Oct 22, 2014

chown33 said:
Think through the calculations.

Let's start with 1 button. Its Y coordinate should be at the middle of its containing view's height. "The middle" = height / 2. So the button's Y should be at container.height / 2.

But that's not quite correct. You want the button to be centered at container.height / 2. Can you set a button's center Y and have it automatically set the top Y while maintaining its original height? If not, then subtract half the button's height from container.height / 2 to get the button's top Y coordinate (draw this out with pencil and paper to see why).

Now consider 2 buttons. They should be placed evenly, which means at the 1/3 and 2/3 points of the container's height. I.e. container.height / 3 and 2 * container.height / 3. Again, these are where you want the button's center Y, not its top Y.

Next, consider 3 buttons. They'll be at 1/4, 2/4, and 3/4 points of container.height.

It should now be apparent that you divide container.height by the number of buttons + 1 to determine the space between Y's where the button's center Y should be. You then subtract half the button's height to determine where the button's top Y should be.

Again, I suggest drawing this out on paper, putting in numbers, such as a container height of 400 with 3 buttons, divide it by 4 (100), and then step through (100,200,300), subtracting 1/2 the button height to determine the button's top Y.

Sorry for getting back so late, it's been a busy week!

Thank you for taking the time to look at the issue I've been having. I have assigned a variable to keep track of how many buttons are currently displayed. Currently working on just setting the position of the buttons as other buttons disappear. Pretty confident I can get this, thanks to what you've posted.

You're right about drawing things out, it really does simplify a lot of things. I wish I had done that from the start. Thank you again!

pellets007 · Oct 28, 2014

So I never actually implemented the design as I originally intended. Instead of messing with constraints, I figured that I could use a TableView to handle most of the layout for me.

I used a custom cell layout implemented in a UITableView, which allows users to scroll. It also adjusts the view as cells disappear. Problem solved. Thank you, chown33 & samiznaetekto, for chipping in on this.

Not bad, I think, for my first app!

Search

Search

iOS Adjust Vertical Constraints in Code

pellets007

macrumors 6502a

Attachments

samiznaetekto

macrumors 65816

pellets007

macrumors 6502a

chown33

Moderator

pellets007

macrumors 6502a

pellets007

macrumors 6502a

Attachments

Our Staff