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

本文为作者原创,转载请注明出处:https://www.cnblogs.com/zhaoqingqing/p/7069171.html



需求分析#

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

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

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

 

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

 

实现效果#

image

 

搭建步骤#

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

image

2、给Image添加ImageFitterText组件

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

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

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

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

image

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

image

 

组件源码#

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

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

作者:赵青青   一名在【网易游戏】做游戏开发的程序员,擅长Unity3D,游戏开发,.NET等领域。
本文版权归作者和博客园共有,欢迎转载,转载之后请务必在文章明显位置标出原文链接和作者,谢谢。
如果本文对您有帮助,请点击【推荐】您的赞赏将鼓励我继续创作!想跟我一起进步么?那就【关注】我吧。
posted @   赵青青  阅读(3992)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
阅读排行:
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 易语言 —— 开山篇
· Trae初体验
历史上的今天:
2015-07-06 Unity的DrawCall
CONTENTS
点击右上角即可分享
微信分享提示