Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Auto Layout, how do I make two labels on the same "line" be dynamic in their widths (adjusting with how wide each one needs to be)?

Tags:

Say I have two UILabels, one is a URL and one is a timer:

[http://website.com/link/to/specific/story] [9m 42s] 

But the "timer" UILabel changes width a lot. Sometimes it is just 12s for example, other times it is 125h 32m 8s. There's a lot of variability. I want the timer UILabel to take up as much width as it needs and the URL label to take up the rest. This means if the timer is longer, shorter URLs, etc.

How do I do this in Auto Layout? Preferably in Interface Builder?

like image 960
Doug Smith Avatar asked Oct 19 '13 19:10

Doug Smith


People also ask

What are two properties that auto layout constraints control on a UIView?

Auto Layout defines margins for each view. These margins describe the preferred spacing between the edge of the view and its subviews. You can access the view's margins using either the layoutMargins or layoutMarginsGuide property. The layoutMargins property lets you get and set the margins as a UIEdgeInsets structure.

What are the different types of auto layout?

There are three main types of Auto Layout issues: ambiguous layouts, unsatisfiable constraints and logic errors.

What is auto layout?

Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve.


2 Answers

You should set the compression resistance, URL label must have lower value;

Set the horizontal space between labels to constant (for example zero or default);

Set width for each label and select "less than" or "greater that" relation, these values set limits for shrinking/expanding of the view.

like image 156
hybridcattt Avatar answered Nov 07 '22 02:11

hybridcattt


This is where compression resistance becomes important. Since the URL label needs to shrink first (in order to accommodate the space for the timer label), the compression resistance of the URL label should be lower than the compression resistance of the timer label (in horizontal direction, of course). You can easily set this attribute in IB.

like image 44
Scott Berrevoets Avatar answered Nov 07 '22 03:11

Scott Berrevoets