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

2024-05-09 14:29:02

文章目录[点击展开](?)[+]

需求分析

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

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

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

UNI-APP在自定义组件中内嵌H5/Html网页，可自定义webview大小，加载不闪屏
问题描述: UNI-APP在自定义组件中内嵌H5/Html网页时,通过内置组件 web-view 实现(如下),发现会自动铺满整个页面,不可控制大小(默认充满屏幕不可控制大小) <web-vie ...
微信小程序之圆形进度条（自定义组件）
前言昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来创建自定义组件第一步创建项目结构打开微信开发者工具创建一个项目, ...
【Android 应用开发】自定义组件宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件
博客地址 : http://blog.csdn.net/shulianghan/article/details/41520569 代码下载 : -- GitHub : https://github.c ...
HarmonyOS之深入解析自定义组件与布局的实现
一.概述 HarmonyOS 提供了一套复杂且强大的 Java UI 框架,其中 Component 提供内容显示,是界面中所有组件的基类.ComponentContainer 作为容器容纳 Comp ...
微信小程序自定义组件/插件等解析
自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页 ...
自定义组件开发六自定义组件
概述 Android SDK 为我们提供了一套完整的组件库,数量多.功能强,涉及到方方面面,但是,我们依然看到软件市场上的每个 App 都有自己独特的东西,绝不是千遍一律的,而且也会和 IOS相互借鉴 ...
【C#+SQL Server+打印组件】实现电商快递单打印系统五：自定义组件和快递单模板设计（附源码和资源）
需要源码和资源请点赞关注收藏后评论区留言私信~~~ 一.自定义组件(扩展TextBox) 由于快递单种类较多,所以在设计系统时考虑开发一个通用模板,由用户根据自己使用的快递单样式自行定义快递单的文本输 ...
阿里datav自定义组件管道插件
阿里的datav是近两年阿里推出的一款市局大屏应用,主要是用于1920*1080以上的大屏幕数据展示的,小屏幕报表的还有个QuickBI. 网络上还有网易和帆软之类的有类似的产品. datav 网易有 ...
【鸿蒙】HarMonyOS的自定义组件之抽奖大转盘
1. 介绍当系统提供的组件无法满足设计需求时,您可以创建自定义组件,根据设计需求自定义组件的属性及响应事件,并绘制组件.自定义组件是在组件预留的两个自定义图层中实现绘制,通过addDrawTask方 ...

最新文章

热门文章