iOS Multi-line UILabel in Auto Layout

Question

I m having trouble trying to achieve some very basic layout behavior with Auto Layout  My view controller looks like this in IB     The top label is the title label  I don t know how many lines it will be  I need the title label to display all lines of text  I also need the other two labels and the small image to be laid out right below the title  however tall it happens to be  I have set vertical spacing constraints between the labels and small image  as well as a top spacing constraint between the title label and its superview and a bottom spacing constraint between the small image and its superview  The white UIView has no height constraint  so it should stretch vertically to contain its subviews  I have set the number of lines for the title label to 0   How can I get the title label to resize to fit the number of lines required by the string  My understanding is that I can t use setFrame methods because I m using Auto Layout  And I have to use Auto Layout because I need those other views to stay below the title label  hence the constraints     How can I make this happen

User · Answer

One way to do this    As text length increases try to change  decrease  the fontsize of the label text using   Label adjustsFontSizeToFitWidth   YES

User · Answer

I find you need the following    A top constraint A leading constraint  eg left side  A trailing constraint  eg right side  Set content hugging priority  horizontal to low  so it ll fill the given space if the text is short  Set content compression resistance  horizontal to low  so it ll wrap instead of try to become wider  Set the number of lines to 0  Set the line break mode to word wrap

User · Answer

Source  http   www objc io issue-3 advanced-auto-layout-toolbox html  Intrinsic Content Size of Multi-Line Text  The intrinsic content size of UILabel and NSTextField is ambiguous for multi-line text  The height of the text depends on the width of the lines  which is yet to be determined when solving the constraints  In order to solve this problem  both classes have a new property called preferredMaxLayoutWidth  which specifies the maximum line width for calculating the intrinsic content size   Since we usually don   t know this value in advance  we need to take a two-step approach to get this right  First we let Auto Layout do its work  and then we use the resulting frame in the layout pass to update the preferred maximum width and trigger layout again   -  void layoutSubviews        super layoutSubviews       myLabel preferredMaxLayoutWidth   myLabel frame size width       super layoutSubviews       The first call to  super layoutSubviews  is necessary for the label to get its frame set  while the second call is necessary to update the layout after the change  If we omit the second call we get a NSInternalInconsistencyException error  because we   ve made changes in the layout pass which require updating the constraints  but we didn   t trigger layout again   We can also do this in a label subclass itself    implementation MyLabel -  void layoutSubviews       self preferredMaxLayoutWidth   self frame size width       super layoutSubviews      end   In this case  we don   t need to call  super layoutSubviews  first  because when layoutSubviews gets called  we already have a frame on the label itself   To make this adjustment from the view controller level  we hook into viewDidLayoutSubviews  At this point the frames of the first Auto Layout pass are already set and we can use them to set the preferred maximum width   -  void viewDidLayoutSubviews        super viewDidLayoutSubviews       myLabel preferredMaxLayoutWidth   myLabel frame size width       self view layoutIfNeeded       Lastly  make sure that you don   t have an explicit height constraint on the label that has a higher priority than the label   s content compression resistance priority  Otherwise it will trump the calculated height of the content  Make sure to check all the constraints that can affect label s height

User · Answer

I was just fighting with this exact scenario  but with quite a few more views that needed to resize and move down as necessary  It was driving me nuts  but I finally figured it out   Here s the key  Interface Builder likes to throw in extra constraints as you add and move views and you may not notice  In my case  I had a view half way down that had an extra constraint that specified the size between it and its superview  basically pinning it to that point  That meant that nothing above it could resize larger because it would go against that constraint   An easy way to tell if this is the case is by trying to resize the label manually  Does IB let you grow it  If it does  do the labels below move as you expect  Make sure you have both of these checked before you resize to see how your constraints will move your views     If the view is stuck  follow the views that are below it and make sure one of them doesn t have a top space to superview constraint  Then just make sure your number of lines option for the label is set to 0 and it should take care of the rest

User · Answer

Use -setPreferredMaxLayoutWidth on the UILabel and autolayout should handle the rest    label setPreferredMaxLayoutWidth 200 0     See the UILabel documentation on preferredMaxLayoutWidth   Update   Only need to set the height constraint in storyboard to Greater than or equal to  no need to setPreferredMaxLayoutWidth

User · Answer

Expand your label set number of lines to 0 and also more importantly for auto layout set height to    x   Auto layout will do the rest  You may also contain your other elements based on previous element to correctly position then

User · Answer

I have a UITableViewCell which has a text wrap label  I worked text wrapping as follows   1  Set UILabel constraints as follows     2  Set no  of lines to 0   3  Added UILabel height constraint to UITableViewCell    IBOutlet weak var priorityLabelWidth  NSLayoutConstraint    4  On UITableViewCell   priorityLabel sizeToFit   priorityLabelWidth constant   priorityLabel intrinsicContentSize   width 5

User · Answer

None of the different solutions found in the many topics on the subject worked perfectly for my case  x dynamic multiline labels in dynamic table view cells     I found a way to do it    After having set the constraints on your label and set its multiline property to 0  make a subclass of UILabel   I called mine AutoLayoutLabel     implementation AutoLayoutLabel  -  void layoutSubviews       self setNeedsUpdateConstraints        super layoutSubviews       self preferredMaxLayoutWidth   CGRectGetWidth self bounds       end

[ios] iOS: Multi-line UILabel in Auto Layout

Examples related to ios

Examples related to iphone

Examples related to cocoa-touch

Examples related to autolayout

Examples related to uilabel