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

时间:2021-01-08 07:51:14

需求分析

在之前的文章中,介绍到可以使用UGUI自带的ContentSizeFitter组件,进行Button根据Text的长度自适应, UGUI ContentSizeFitter之Button根据Text自适应

但它有个限制:Text需要作为Button(Image)的子节点

因为ContentSizeFitter的计算是根据Child的实际宽度进行动态调整的

今天我写的这个组件原理是一样的,不过它不需要Text作为Image的子节点

实现效果

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

搭建步骤

1、创建一个Image和Text,他们可以是平级的,如下所示:

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

2、给Image添加ImageFitterText组件

TargetText:要根据Text的大小自动适应,这里把上面的Text赋值给TargetText

Size Offset:x表示左右 ,y表示上下 ,值表示空白值,就是说图片比Text大多少A

Adjuest Text Setting:对Text使用建议的设置,主要是修改Text的TextAlign为水平上下居中

Exceute:在Editor下修改完组件属性值时,点击它可以及时看到效果

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

3、修改Text的值,就可以实时查看到效果

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

组件源码

组件:https://github.com/zhaoqingqing/UGUIDemo/blob/master/Assets/Components/ImageFitterText.cs

Demo:https://github.com/zhaoqingqing/UGUIDemo/tree/master/Assets/Components/Demo/ImageFitterText