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的更加好用……