Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AutoLayout to dynamically size UILabel Height and Width

I have one UILabel and One UIView contains other subviews side by side in Storyboard. The UIView should butt up against the right edge of the UILabel(trailing constraint of 1), but I also need the UIlabel (the one on the left) to set it's width equal to it's content size unless it hits a max width. Visually:

|Label text| |UIViewWithSubviews|

And I need the following constraints:

1) Label should resize width wise unless it hits a max size and height is also dynamic that means when text reaches the maximum width then the word wrap will break the sentence to another line. and UIview will become vertical to UIlabel.

2) UIView should always be butted up against the right edge of label one in vertical center.

How do I set this up in Storyboard?

Thanks In advance.

like image 974
niks290192 Avatar asked Apr 11 '16 16:04

niks290192


People also ask

How is UILabel height calculated?

To summarize, you can calculate the height of a label by using its string and calling boundingRectWithSize . You must provide the font as an attribute, and include . usesLineFragmentOrigin for multi-line labels.

How do I change the width and height of a label in Swift?

To give a dynamic height to an UIlabel in swift we can use the frame property of UILabel. We can create a frame using the CGRect which allows us to give different variables like x position, y position, width, and height. Let's create a label and add it as a subview to our view.

What is Autolayout when and where would you use it?

Auto Layout defines your user interface using a series of constraints. Constraints typically represent a relationship between two views. Auto Layout then calculates the size and location of each view based on these constraints. This produces layouts that dynamically respond to both internal and external changes.

What is UILabel?

A view that displays one or more lines of informational text.


1 Answers

Is this what you need?

enter image description here

Here is how i did in Interface Builder.

enter image description here

like image 128
Tien Avatar answered Sep 28 '22 06:09

Tien