2

I want to create a custom view that self-size with content.

For example, I setup horizontal constraints for a UILabel, then it will line break automatically.

I wonder how the system knows the label's width before layout?

I print updateConstraints , layoutSubviews and intrinsicContentSize method to try to know how is everything going.

first, I set numberOfLine = 1, so the logs just like this:

TagLabel will updateConstraints
TagLabel intrinsicContentSize 447.5 20.5
TagLabel did updateConstraints
TableViewCell will updateConstraints
TableViewCell did updateConstraints
TableViewCell will layoutSubviews
TableViewCell did layoutSubviews
TagLabel will layoutSubviews
TagLabel did layoutSubviews
TagLabel will layoutSubviews
TagLabel did layoutSubviews

then I set numberOfLine = 0, logs change like this:

TagLabel will updateConstraints
TagLabel intrinsicContentSize 428.0 20.5
TagLabel did updateConstraints
TableViewCell will updateConstraints
TableViewCell did updateConstraints

// extra calls
TagLabel will updateConstraints
TagLabel intrinsicContentSize 428.0 20.5
TagLabel did updateConstraints
TagLabel intrinsicContentSize 428.0 20.5
TagLabel intrinsicContentSize 371.0 41.0

TableViewCell will layoutSubviews
TableViewCell did layoutSubviews

// extra calls
TagLabel will updateConstraints
TagLabel intrinsicContentSize 428.0 20.5
TagLabel did updateConstraints
TagLabel will updateConstraints
TagLabel intrinsicContentSize 428.0 20.5
TagLabel did updateConstraints
TagLabel will updateConstraints
TagLabel intrinsicContentSize 371.0 41.0
TagLabel did updateConstraints
TagLabel will updateConstraints
TagLabel intrinsicContentSize 428.0 20.5
TagLabel did updateConstraints
TagLabel will updateConstraints
TagLabel intrinsicContentSize 371.0 41.0
TagLabel did updateConstraints

TagLabel will layoutSubviews
TagLabel did layoutSubviews
TagLabel will layoutSubviews
TagLabel did layoutSubviews

I found that system calculate label's height correctly before layoutSubviews.

So how the system knows the label's width so that it can calculate the height before layoutSubviews？

appreciate.

Darshan Kunjadiya
  • 3,323
  • 1
  • 29
  • 31
Jack
  • 321
  • 2
  • 9
  • I think `UILabel.preferredMaxLayoutWidth` has something to do with this question. Still, I don't know how the system knows the width before the `layoutSubviews`. – ricardopereira Apr 09 '18 at 13:44

3 Answers3

2

To start with you need to be clear if you want to create a new UIView or subclass UILabel.

You can use a lot of template code without understanding how the system handles calculations. I assume further that you want to make a custom view from groud up.

For this explanation we will use UILabel as a example and guideline for our new custom view.

What you need to understand is that with setting numberOfLines property you change the way the calculation inside UILabel is handled. You can test this by clicking the NOL buttons in the test project.

When creating your custom view you would have several methods for calculating the size of your custom view located in you custom view subclass. To check this go to EXCustomLabelV and view the:

override func textRect(forBounds bounds: CGRect, limitedToNumberOfLines numberOfLines: Int) -> CGRect {

method output in the console. You will see the first constraint change. The value will become 566.667 while the height still stays 24. The result are the “…” added with text truncation. However, if you set your numberOfLines property to 0 then the constrains change to 195.333 width and 71.6667 height.

Something important is happening here. The system will always use your constant constrains to calculate your custom View size/position. But your will will have to make adjustments when calculating YOUR subviews (of your custom view) based on the “outer” constraints and your “inner” setup.

For example, the EXCustomLabelV will always have the width of 200. No matter what. However, the inner textRect won’t have that size. It will sometimes have around 200, sometimes more than 200 and sometimes less. These calculations are affected by the numberOfLines. I am telling you this because you might have a image inside your custom view, or two text fields with surname and last name.

How does the system know the labels width before layout? It calculates it. It asks “around” first by checking the last constraint (if there is one) for width. It asks it subviews (your custom class) for its constrains and then makes the calculations. The constraints are rules. AutoLayout will be check these rules when calculating.

How does the system know the labels height? It calculates it. It checks the UILabel numberOfLines first.

In your custom view you should have custom methods for calculation. In the test project you can see that :

override func draw(_ rect: CGRect)

is always called last. After all calculations are made you will have the final size of your view. You will always see that there your view width will be equal to the last width constraint.

Feel free to use my test project for your own calculations and to understand UILabel handless view size calculations.

When creating your custom view you will have to make these calculations on your own and update the sizes and constrains manually. The system should then be able to update your view easily. I would recommend that you try to calculate the frame sizes for a view on your own. When you go through that “pain” you will understand how much AutoLayout does for you.

Test project repo link

Darkwonder
  • 1,149
  • 1
  • 13
  • 26
0

I think [view layoutIfNeeded] will solve your problem.

The method layoutIfNeeded is a synchronous call that tells the system you want a layout and redraw of a view and its subviews, and you want it done immediately without waiting for the update cycle.

arunjos007
  • 4,105
  • 1
  • 28
  • 43
  • Thank you. It works obviously. Label has frame after `layoutIfNeed` and I can do something with it. But I am curious why system knows the label's width before layout. Is there any other way to know some information about label before layout? – Jack Feb 20 '17 at 12:22
  • You're Welcome! Just look on to this Stackoverflow question it will give an exact definition that you want! http://stackoverflow.com/questions/1182945/how-is-layoutifneeded-used – arunjos007 Feb 20 '17 at 12:28
-1

Old question, but the other answers don't really answer the core question.

So how the system knows the label's width so that it can calculate the height before layoutSubviews？

The intrinsicContentSize method of UILabel initially returns a (width, height) that corresponds with all lines fully laid out without line-breaks. That is, it already does a virtual layout of the text to find out what its size is. It then returns a width equal to the size of the longest line.

But if a size is set for the UILabel whose width is less than the longest line -- such that line-breaks are necessary -- UILabel calls its invalidateIntrinsicContentSize method. That indicates to the layout system that it needs to do a second pass. In this second pass, the intrinsicContentSize returns a size that is adapted for the given width and text with line-breaks.

As you have seen in your log, a couple of layout passes may be necessary to get the correct size and layout, especially if you have multiple UILabel's with line-breaks.

fishinear
  • 6,101
  • 3
  • 36
  • 84