-1

I'm creating an universal app. Now I want to place two buttons on the screen:

Placement of two buttons

I tried it with autolayout and Interface Builder (iOS Designer exactly) but I only managed to fit the buttons on one screen size (e.g. 3.5 inch display). Therefore I set the size of the buttons and the spacing to the top (one to the top of the superview and one to the bottom of the button above).

But is there a way to adapt this to the screen size? E.g. the width of the button is the the view width minus a certain gap. Or centering the buttons like in the picture (one would be easy)? Is this possible?

Than the other option is to do everything in code (creating the button and creating the constraints). Here I could query the view width and so on to create my buttons accordingly. Is this the only way?

How can this be managed?

EDIT:

Now I placed an empty label on the view controller. On this label I added the following constrains:

  • Align Center Y to: Superview, Equals: 0
  • Align Center X to: Superview, Equals: 0

On my buttons I set a fixed height and width. Than the trailing space to the superview equals 50 (horizontal centering works because both screen sizes have the same width). The button on top has the following constraint:

  • Align Center Y to: Label, Equals: 20

The button on the bottom gets:

  • Top Space to: Label, Equals: 20

Don't know why it takes different constraints but in the GUI editor I took the bottom or top point of the button. Here the label gets also:

  • Align Center Y to: top Button, Equals: 20
  • Top Space to: bottom Button, Equals: 20

Now I have the two buttons centerd on the screen regardless of 3.5 or 4 inch display. One disadvantage is that the gap to the navigation controller and toolbar is very small on the 3.5inch display. Here I can make the buttons smaller. Any other options? The initial idea was to set always the space to the top element but on the 4 inch screen there is much space on the bottom than.

testing
  • 19,681
  • 50
  • 236
  • 417

1 Answers1

1

Autolayout is based on four parameters, x,y,w,h. Knowing this, the key for a dynamic layout is to understand the minimum number of constraints needed to satisfy all four constraints.

In your drawing, we can address x coord for both buttons by "horizontal center in container."

w (width) can either be fixed (i.e. 300), or inferred (if button is 10 from the leading edge, left; 10 from the trailing edge, right), then width is 300...)

Now we get to the Y coords and H (height). You have a couple options. Constrain the height, and then set the Y's accordingly. (i.e. lock the heights to 60, and the distance from the top/bottom to 40 for example -- your actual values will vary... Another trick i've seen apple engineer do at WWDC is insert an empty view in the center, and then set the constraints of the buttons based on that.

Hope this adds a little insight and doesn't confuse you more. Autolayout is weird, and remember, in ios8 we'll have the sizeClasses to consider as well.. ;(

enter image description here

timothykc
  • 2,235
  • 1
  • 16
  • 14
  • "horizontal center in container": I placed the buttons on the view in the middle. Did you mean that? "inferred": How do you set up such constraint? I can only set "Width Equals" which is a fixed width or I can set the width of button one to the same as button two. "height": I want an equally spaced layout. Setting a top for a 3.5 inch display is different from the 4 inch. But I'll try your trick with the empty view to get a better Y position. – testing Sep 03 '14 at 10:21
  • I've added a picture showing how the empty uiview works. – timothykc Sep 03 '14 at 14:57
  • Finally, I took your approach. I thought I could vary the Y coordinates for the buttons depending on the screen size so that the spacing between button and the UIView is higher on the 4 inch screen. But I can only use the empty UIView or pin it to the top/bottom. – testing Sep 17 '14 at 19:50
  • Glad it helped! Seeing a wwdc presentation where they used an empty uiview really opened my eyes the first time as well. Helped me fully conceptualize layout in terms of extrapolating (x,y,w,h). This way of thinking will be useful now that we've got new screen sizes (and appleWatch) to design for. – timothykc Sep 18 '14 at 01:57