Search code examples
iosxcodeautolayoutuistoryboardxcode-storyboard

How can I align and resize these two elements with Storyboard Auto Layout?


I am designing a very simple "Today" widget with just two elements: a text label (shown here with a red background) and an info button. I want the info button to always appear right after the label.

So:

  1. the info button should always stick to the right margin
  2. the label should always stick to the left margin
  3. the label should resize itself so it is the full width of the available space, right up to the edge of the button

How can I do this?! Auto Layout is sooooo confusing and I've been playing with it for an hour with no luck. Can't figure out where to start. I think I need at least three constraints, one for each of the needs above...

enter image description here


Solution

  • Your info button will have a fixed width and height. Set its right margin to the parent right. Set your red label's left margin to parent left and right margin to info button's left.

    Now since your red label doesn't have a width restriction, it will take all of the width between left margin and right margin.

    This is how it looks. enter image description here

    enter image description here