#2 [iOS充电]AutoLayout中的intrinsic size是什么

今天继续拾遗AutoLayout中一些不熟悉的概念

  • As a recap, in order for Auto Layout to render the position and size of a view correctly, Auto Layout engine must know or able to calculate the :
    • x position of a view
    • y position of a view
    • width of a view
    • height of a view

回顾并总结,AutoLayout为了正确渲染一个View的位置和大小,需要知道它的x, y, width, height

  • If you place a view without enough constraint to calculate its width and height, Xcode would complain by showing you red lines.

image.png

  • Now lets place a label and define the same leading and top constraints.
  • Wait... Xcode doesn't complain even though the size is not defined and it show us blue line, what happened?

image.png 如果放置一个View,没有设置宽高相关的约束,Xcode会显示出红线 而如果放置一个Label,没有出现红线,没有约束的错误 为什么呢?

  • It turns out that Auto Layout Engine is able to calculate the label size (width and height) based on its content (text of the label) and the font type/size of the label. For the label using System font type, font size 17pt and contain text "Lorem Ipsum", its intrinsic size is as follows :

image.png 事实证明,AutoLayout可以基于内容计算label的size。对于label使用的确定的字体、字号,它的**intrinsic size(内在size)**如图显示

  • Intrinsic content size means the size of an UI element derived based on its content.

Intrinsic content size意味着一个UI元素的size由其内容所衍生

这个概念我是在工作中开发需求时学习到的。leader告诉我label可以把frame“撑开”,不用手动计算label的frame的大小,我一脸不信,leader给了我一个白眼......现在知道这玩意儿叫Intrinsic size了,还是我太菜了

  • UIView doesn't have intrinsic content size hence you have to manually define constraints that enable Auto Layout Engine to calculate its size.
  • Label / UILabel has intrinsic content size, its width and height can be derived from the text of the label and the font type/size used.
  • Button and Textfield has intrinsic content size and its calculation is similar to label.

label拥有intrinsic size,button和textField也类似,而UIView没有

  • An empty image view doesn't have intrinsic content size, but once you add image to the image view, its intrinsic content size is set to the image size.

空白UIImageView没有intrinsic size,但添加了image之后就有了

  • If you set both explicit width and height constraint, or leading/trailing and top/bottom constraint for the label, the explicit defined size or calculated size from constraints will replace the intrinsic content size making it fixed and non flexible. This causes problem if the text of label exceed the size and unable to expand, causing the text to be cropped :

image.png 如果你显式地设定label的宽高约束,会替代label的intrinsic size。这回导致如果label的文字显示不下,label也无法被撑开,文字会被截断

  • Intrinsic content size allows the size of an UI element to be dynamically expanded based on its content, it is especially useful on designing a scroll view containing dynamic content (content loaded from user input or HTTP request) or self sizing table view cells (tableview containing rows of different height based on the content of the label inside cell).

intrinsic size对于scrollView非常实用,以及自适应tableViewCells(包含不同高度由内部内容决定的tableView)

猜你喜欢

转载自juejin.im/post/6985363745111277599
今日推荐