需求分析

在之前的文章中，介绍到可以使用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大小自动调整的更多相关文章

  1. NativeBase自定义组件样式

    http://nativebase.io/docs/v0.5.13/customize#themingNativeBaseApp 对于NativeBase中的组件,我们可以根据实际需要来进行自定义组件 ...

  2. ExtJS 自定义组件

    主要参考的是官方文档 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. ExtJS4.2 - 从 Hello World 到 自定义组件 -01 （为爱女伊兰奋斗）

    ExtJS4.2 - 从 Hello World 到 自定义组件 - 01 经验.概述.项目搭建.国际化.HelloWorld.布局 —— 为爱女伊兰而奋斗 ——少走弯路,简单才是王道 1. 写在前面 ...

  4. 【Android 应用开发】 自定义组件 宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件

    博客地址 : http://blog.csdn.net/shulianghan/article/details/41520569 代码下载 : -- GitHub : https://github.c ...

  5. 设置tabBar、使用第三方插件和自定义组件使用简单实例

    创建小程序项目进入时填写,因需要用上第三方插件,所以要填上开发者的APPID,前往微信公众平台去注册一个账号获取APPID,在设置=>开发设置可以查看相关appid信息 简单思路 底部导航添加三 ...

  6. flex 自定义组件的编写

    使用flex也很久了,也改过别人写的flex自定义组件,但是就是没有系统的研究下flex组件的编写步骤,和要注意的东西,在这里我参照一本书中的例子,好好的理解下,也为了巩固下自己对flex的理解! 1 ...

  7. Android自定义组件之自动换行及宽度自适应View：WordWrapView

    目的: 自定义一个ViewGroup,里面的子view都是TextView,每个子view  TextView的宽度随内容自适应且每行的子View的个数自适应,并可以自动换行 一:效果图 二:代码 整 ...

  8. 微信小程序之圆形进度条（自定义组件）

    思路 使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval 让彩色圆环逐步绘制. 在看我的文章前,必须先看 ,下面转的文章,因为本文是在它们基础上修改的. 它们的缺点为: ...

  9. Android 进度条（ProgressBar）和拖动条（Seekbar）补充“自定义组件”（总结）

    这周结束了,我也码了一周的字,感觉还是很有种脚踏实地的感觉的,有时间就可以看看自己的总结再查漏补缺,一步一个脚印,做出自己最理想的项目. 今天我们讲两点: 1.ProgressBar: 其实前面也稍微 ...

随机推荐

  1. keepalived实现mycat高可用问题排查；道路坎坷，布满荆棘，定让你大吃一惊!

    前言 开心一刻 医院里,一母亲带着小女孩打针.小女孩:“妈妈我不想打针,疼!”妈妈:“宝贝儿听话,这里这么多护士阿姨,咱们找个打针不疼的.”小女孩:“那哪个阿姨打针不疼呢?”妈妈:“妈妈也不知道,咱们 ...

  2. 【Git】时光机命令—Git命令

    cd c:    进入C盘 mkdir learngit          创建名为learngit的文件夹 cd learngit  进入learngit文件夹 pwd    显示当前目录路径 gi ...

  3. curl模拟请求常用参数

    封装一个curl模拟浏览器请求的函数,如下: /** * curl模拟浏览器请求 * @param unknown $url 请求的地址 * @param array $params 请求地址所需要的 ...

  4. Java 学习笔记 正则表达式

    2019.3.27 正则表达式 \w 单词字符,匹配[]a-zA-Z_0-9] \w{3} 表示匹配3个字符()ab8,abc,a_c,a5_...) \w+ 至少一个,1到多个 \w* 0个到n个 ...

  5. JSP使用过滤器防止SQL注入

    什么是SQL注入攻击?引用百度百科的解释: sql注入_百度百科: 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具 ...

  6. JDK动态代理简单使用（2）

    JDK动态代理使用: 使用JDK动态代理步骤: ①创建被代理的接口和类: public interface IA { void f1(String param); } public class A i ...

  7. 3.类和接口_EJ

    第13条: 使类和成员的可访问性最小化 良好的模块设计能隐藏其内部数据和其他实现细节,模块之间只通过它们的API进行通信.java语言提供了许多机制来协助隐藏信息.访问控制机制决定了类.接口和成员的可 ...

  8. angularJs - cynthia娆墨旧染－响应式文章发布系统

    (0)功能 a.添加新文章 b.修改已发布文章 c.搜索已经发布的文章 d.demo链接:   http://cynthiawupore.github.io/angularJS (1)界面 a.文章列 ...

  9. jQ效果：jQuery之插件开发短信发送倒计时功能

    实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: < ...

  10. Nodejs全局/缓存路径配置

    $ npm config set prefix "D:\Program Files\nodejs\node_global" $ npm config set cache " ...