3

There are four circle UIButtons in UIView. Their layout should look like this:

｜－ button 1 - button 2 - button 3 - button 4 －｜

I tried some ways with AutoLayout but failed. Can someone give me some advice or demo about how to build this layout?

Cesare
  • 9,139
  • 16
  • 78
  • 130
Rambo Li
  • 307
  • 1
  • 3
  • 16
  • Not sure if you need to evenly space these buttons. If so, this may be helpful: http://stackoverflow.com/questions/13075415/evenly-space-multiple-views-within-a-container-view. There's also these tutorials: http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1 – Daniel Mar 10 '15 at 06:06

1 Answers1

-1

  1. Firstly, set up the leading and the trailing constraints of the 1st and 4th button. Then, create horizontal spacing constraints in the middle between the other buttons.

  2. Right-click on a button and choose width and height in order to set fixed width and height.

  3. Set equal widths and equal heights by right-clicking and dragging from a button to the other ones.

Please take a look at this GIF image:

Cesare
  • 9,139
  • 16
  • 78
  • 130
  • Thanks for your reply. It's really helpful. However, the fourth button won't be evenly space when device screen become larger. like:|-x-x-x---x-| , In other word, horizontal spacing size is not adapt. Can I ask how to update? Thanks. – Rambo Li Mar 10 '15 at 08:38
  • Please take a look at the GIF image in my answer. – Cesare Mar 10 '15 at 12:49
  • Really appreciate for your so great help! Now the final effect will be like |-x-x----x-x-|. can I ask how to realize the same width of horizontal space between every two buttons? – Rambo Li Mar 10 '15 at 15:57
  • Just tap on the button, open the Utilities inspector and choose Size Inspector. Under the "Constraints" panel you can change the `constant` of the constraint. – Cesare Mar 10 '15 at 15:59
  • That's great to hear! Thanks for having accepted my answer :) – Cesare Mar 10 '15 at 19:14