UGUI自定义组件之Image根据Text大小自动调整

需求分析

在之前的文章中，介绍到可以使用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