UGUI自定义组件之Image根据Text大小自动调整
需求分析
在之前的文章中,介绍到可以使用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
UGUI自定义组件之Image根据Text大小自动调整的更多相关文章
- NativeBase自定义组件样式
http://nativebase.io/docs/v0.5.13/customize#themingNativeBaseApp 对于NativeBase中的组件,我们可以根据实际需要来进行自定义组件 ...
- ExtJS 自定义组件
主要参考的是官方文档 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- ExtJS4.2 - 从 Hello World 到 自定义组件 -01 (为爱女伊兰奋斗)
ExtJS4.2 - 从 Hello World 到 自定义组件 - 01 经验.概述.项目搭建.国际化.HelloWorld.布局 —— 为爱女伊兰而奋斗 ——少走弯路,简单才是王道 1. 写在前面 ...
- 【Android 应用开发】 自定义组件 宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件
博客地址 : http://blog.csdn.net/shulianghan/article/details/41520569 代码下载 : -- GitHub : https://github.c ...
- 设置tabBar、使用第三方插件和自定义组件使用简单实例
创建小程序项目进入时填写,因需要用上第三方插件,所以要填上开发者的APPID,前往微信公众平台去注册一个账号获取APPID,在设置=>开发设置可以查看相关appid信息 简单思路 底部导航添加三 ...
- flex 自定义组件的编写
使用flex也很久了,也改过别人写的flex自定义组件,但是就是没有系统的研究下flex组件的编写步骤,和要注意的东西,在这里我参照一本书中的例子,好好的理解下,也为了巩固下自己对flex的理解! 1 ...
- Android自定义组件之自动换行及宽度自适应View:WordWrapView
目的: 自定义一个ViewGroup,里面的子view都是TextView,每个子view TextView的宽度随内容自适应且每行的子View的个数自适应,并可以自动换行 一:效果图 二:代码 整 ...
- 微信小程序之圆形进度条(自定义组件)
思路 使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval 让彩色圆环逐步绘制. 在看我的文章前,必须先看 ,下面转的文章,因为本文是在它们基础上修改的. 它们的缺点为: ...
- Android 进度条(ProgressBar)和拖动条(Seekbar)补充“自定义组件”(总结)
这周结束了,我也码了一周的字,感觉还是很有种脚踏实地的感觉的,有时间就可以看看自己的总结再查漏补缺,一步一个脚印,做出自己最理想的项目. 今天我们讲两点: 1.ProgressBar: 其实前面也稍微 ...
随机推荐
- Jenkins构建部署Maven项目
1 创建新项目 2 构建maven项目 3 配置 3.1 源代码管理 svn 用户名,密码 4 配置maven打包 配置SSH 保存之后 立即构建 执行成功
- OJ:一道考察多态的题目
Description 下面程序的输出结果是: A::Fun C::Do 程序代码 #include <iostream> using namespace std; class A { p ...
- Ansible基础认识及安装使用详解(week5_day1_part1)--技术流ken
Ansible简介 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量 ...
- Spring Cloud Finchley版中Consul多实例注册的问题处理
由于Spring Cloud对Etcd的支持一直没能从孵化器中出来,所以目前来说大多用户还在使用Eureka和Consul,之前又因为Eureka 2.0不在开源的消息,外加一些博眼球的标题党媒体使得 ...
- [JavaScript] XMLHttpRequest记录
XMLHttpRequest 使用 XMLHttpRequest 对象可以和服务器进行交互,可以获取到数据,而无需让整个页面进行刷新.这样 web 页面可以做到只更新局部页面,降低了对用户操作的影响. ...
- 脚本解决.NET MVC按钮重复提交问题
见于:Avoiding Duplicate form submission in Asp.net MVC by clicking submit twice 脚本代码: $(document).on(' ...
- 如何把ASP.NET MVC项目部署到本地IIS上
默认情况下,在VisualStudio中开发网站,会运行在IISExpress中,如果想把网站部署到本地的IIS服务器上该怎么办呢? 一.首先,以管理员身份运行VisualStudio,否则在修改项目 ...
- c# 模拟网易足彩算法
using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...
- JS基础(二)事件监听练习之table鼠标悬停行变色
JS监听事件简单学习: [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件"); [object].r ...
- JS隐藏号码中间4位
function resetPhone(phone) { var str = String(phone) var len = str.length; var prev,next; if (len &g ...