需求分析
在之前的文章中,介绍到可以使用UGUI自带的ContentSizeFitter组件,进行Button根据Text的长度自适应, UGUI ContentSizeFitter之Button根据Text自适应
但它有个限制:Text需要作为Button(Image)的子节点
因为ContentSizeFitter的计算是根据Child的实际宽度进行动态调整的
今天我写的这个组件原理是一样的,不过它不需要Text作为Image的子节点
实现效果
搭建步骤
1、创建一个Image和Text,他们可以是平级的,如下所示:
2、给Image添加ImageFitterText组件
TargetText:要根据Text的大小自动适应,这里把上面的Text赋值给TargetText
Size Offset:x表示左右 ,y表示上下 ,值表示空白值,就是说图片比Text大多少A
Adjuest Text Setting:对Text使用建议的设置,主要是修改Text的TextAlign为水平上下居中
Exceute:在Editor下修改完组件属性值时,点击它可以及时看到效果
3、修改Text的值,就可以实时查看到效果
组件源码
组件:https://github.com/zhaoqingqing/UGUIDemo/blob/master/Assets/Components/ImageFitterText.cs
Demo:https://github.com/zhaoqingqing/UGUIDemo/tree/master/Assets/Components/Demo/ImageFitterText