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,如需转载请自行联系原作者

相关文章
|
9月前
Echarts组件legend属性显示数据和icon图片自定义的解决方案
Echarts组件legend属性显示数据和icon图片自定义的解决方案
155 0
|
API
Element UI Loading 加载组件动态变更 text 值(加载文案)
有这样的一个需求,我在上传文件的时候,上传阶段耗时较长,所以利用加载动画作为友好提示用户等待。
897 0
Element UI Loading 加载组件动态变更 text 值(加载文案)
Flutter:创建一个自动调整大小的 TextField
在 Flutter 中,您可以通过以下方式之一根据需要创建自动调整大小的 TextField(或 TextFormField): 将 maxlines 参数设置为 null。如果输入大量文本,文本字段可以永远扩展。 将 minlinesz 设置为 1,MAXLINES 到 N(一个独到之处整数)。文本字段将根据输入文本的长度自动扩展或收缩。如果到达 N**行,它将停止扩展并开始滚动。
921 0
Flutter:创建一个自动调整大小的 TextField
|
4月前
elementUI引用el-image-viewer组件全局方法预览大图
elementUI引用el-image-viewer组件全局方法预览大图
|
4月前
【sgDragSize】自定义组件:自定义拖拽修改DIV尺寸组件,适用于窗体大小调整
【sgDragSize】自定义组件:自定义拖拽修改DIV尺寸组件,适用于窗体大小调整
|
4月前
HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?
HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?
|
4月前
|
JavaScript 编译器 开发者
uniapp复选框自定义样式&data数据与style交互
uniapp复选框自定义样式&data数据与style交互
33 0
|
6月前
|
小程序 UED
微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug
微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug
199 0
|
6月前
Cocos Creator3.8 项目实战(三)去除scrollview背景色和label 对齐方式设置无效问题解决
Cocos Creator3.8 项目实战(三)去除scrollview背景色和label 对齐方式设置无效问题解决
|
7月前
|
前端开发
css改变滚动条的颜色-横向滚动demo效果示例(整理)
css改变滚动条的颜色-横向滚动demo效果示例(整理)