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

简介:



需求分析

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



本文出自赵青青,原文链接:http://www.cnblogs.com/zhaoqingqing/p/7069171.html,如需转载请自行联系原作者

相关文章
|
缓存 Android开发
Android Studio中如何清理gradle缓存
Android Studio中如何清理gradle缓存
|
Go API 微服务
当 go-zero 邂逅 chatgpt...
当 go-zero 邂逅 chatgpt...
|
安全 Java 数据安全/隐私保护
在Java项目中集成单点登录(SSO)方案
在Java项目中集成单点登录(SSO)方案
|
机器学习/深度学习 编解码 自然语言处理
重磅!新增 13 种 Transformer 方法,火速收藏
如今,Transformer 这把火已经烧到了计算机视觉领域,可以说成为今年最大的热点。本着全心全意为社区服务的精神,OpenMMLab 当然不会对此无动于衷。 为了方便大家研究学习,我们基于 MMCV ,在OpenMMLab 6个方向的 repo 中复现了 13 种基于 Transformer 的方法,快来看看有没有你需要的吧。
1096 0
重磅!新增 13 种 Transformer 方法,火速收藏
|
Java Android开发
Android 保存资源图片到相册最新写法适用于Android10.0及以上
Android 保存资源图片到相册最新写法适用于Android10.0及以上
1123 0
|
移动开发 定位技术 HTML5
H5 获取手机GPS坐标
H5 获取手机GPS坐标
|
图形学
Unity——拖尾特效
Unity——拖尾特效
886 0
|
网络安全 数据安全/隐私保护 iOS开发
Mac配置Ruby环境和安装CocoaPods
Mac配置Ruby环境和安装CocoaPods
Mac配置Ruby环境和安装CocoaPods
|
Android开发 iOS开发 开发者
没有 iOS 开发者账号的情况下部署到真机的方法
原文发表于我的技术博客 本文分享了官方推荐的没有 iOS 开发者账号的情况下部署到真机的方法,供参考。原文发表于我的技术博客 1. 官方推荐的方法 原文在此,也就是 Ionic 官方团队在博客中分享的方法,我简单翻译些重要的信息,详细细节可以参考原文。
1667 0