UGUI 字体背景尺寸自适应

时间:2024-04-14 18:01:31

UGUI 字体背景尺寸自适应

在UGUI里,我们有时需要做类似对话框这种东西,还需要对话框可以随着里面文字多少,行数的变化,进行拉伸变化。

我第一时间想到的解决方案是自己计算对话的char长度,然后动态的去修改背景图的尺寸,这种方法乍看之下没有任何问题,但是在实际应用中,发现有致命的缺陷。
那就是当对话的文本可能是多语言的时候,妈卖批呀,不同的语言下一个字符的尺寸都是不同,更何况有的字体可能还有别的什么特殊设置。
所以这时我们单纯的靠字符数算尺寸的方法,看起来就是漏洞百出的了。
这时又人可能会说,那我自己根据语言,字体来设置不同的尺寸呢?这种方法不是不行,但是大兄弟,这样会增加很多工作量不说,后期每增加一种语言,你就得维护一次呀,那我们为什么要把自己搞的这么累呢?找一个一劳永逸的手段不是美滋滋吗?

幸好unity为我们提供了相应的组件,来解决这一需求。

下面我们来说说具体要怎么实现:
首先字体为子物体,背景图片为父物体是一定的。有些人肯定想到了背景当文字的子物体,然后去下锚点的方法,那样是解决了尺寸变化,但是图片把文字挡住了呀,无解!所以这个方法是否定的。

那么我们把Text当子物体,图片当父,想使图片的尺寸会伸缩变化,就要添加组件 Content Size Fitter 和 Horizontal Layout Group。
如图:
UGUI 字体背景尺寸自适应

然后我们设置 Content Size Fitter 的 Horizontal Fit , Vertical Fit 为Preferred Size。
它们是 UI.ContentSizeFitter.FitMode的 枚举类型,分别是
Unconstrained:不执行任何调整
MinSize:调整内容的最小大小
PreferredSize:调整内容的首选大小,也就是会自动根据内容来调整大小

设置 Horizontal Layout Group 的 Control Child Size 的 width, height 为 true,这个就很好理解的,让子物体来控制尺寸。

这样我们就完工了,背景会随着我们 Text 中的内容去变换尺寸,进行拉伸。

但是还剩下4个边要怎么办呢?这里我选择了这样做。
UGUI 字体背景尺寸自适应
将layout_dialog的尺寸赋值给img_bg_middle,然后上下左右都去锚那个middle!

这样,我们的自适应对话框就彻底大功告成了。