UGUI中实现底图自适应size的方法
发表于2016-04-15
某天接到一个咨询，说怎样实现“支持多行文字，底图随着文字的长度变化而变高”。
在NGUI中这是很容易实现的，跟随文本框做等size锚点即可。
在UGUI中，发现不能这样处理。
首先，UGUI中的锚点方式只能用父节点作为锚点对照点，当底图需要以Text来做锚点的时候，需要放在子节点，这样底图跟text的渲染顺序就不对了。
我们想要的效果应该是这样的：
其二，UGUI中的文本控件，在字体大小长度超出宽体大小的时候，是不渲染的；在字体长度高度超出时，是会被截断的，除非选择了Overflow参数。但是选择了这个参数，会导致字体溢出框体，框体大小还是不变。在这种情况下，就算是想用锚点来做等size拉伸，也是没用的。
难道需要做个自定义组件，来获取text组件中的真实size来设置底图的size？UGUI也太不好用了吧？
text的真实size是preferredHeight与preferredWidth，从这个着手，找到了UGUI中支持自适应底图size的一种方法，那就是使用layout类的组件（包括GridLayoutGroup、HorizontalLayoutGroup、VerticalLayoutGroup）与ContentSizeFitter组件相结合。
根据不同的设置，可以做出很多效果，这里仅简单举例一种：
出来的效果，底图会完全契合文本区大小：
增加文本内容：
增加一个图片，加padding：
出来的效果：
本质上，UGUI通过Layout组件来控制布局排版，这个布局排版中的size控制，对于父子控件来说是双向的。子控件通过ContentSizeFitter与LayoutElement，来控制父控件的size，达到父控件自适应的目的。同时，父控件可以根据自身大小，排版子控件的位置与size。
感觉比NGUI的更加好用……