创建Button后,会出现一个Image组件和一个Button组件,以及Button子节点Text(可以删除不影响功能)

其中Image的Image Type中有四个选项--Simple、Sliced、Tiled、Filled

(1)

Simple即把图片放上去不做任何处理,Preserve Aspect选中后Sprite会保留原有宽高不被拉伸,默认不选中

(2)

Sliced--切片,图片切片显示,在Project页面选中图片,切换为Sprite(2D and UI)模式后,点击Sprite Editor进入图片裁切模式,将图片裁切为上图的形状,使用Sliced模式后,根据图片边框拉伸,图片的四个角会保持原状,而1和4部分会随着图片的横向拉伸而拉伸,2和3部分会随着图片的纵向拉伸而拉伸,图片的中间部分会拉伸5进行填充。

Fill Center--填充中心。勾选后,5显示,反之,5不可见。

(3)

Tiled--平铺的,若图片已经过裁切,则使用Tiled模式后,根据图片边框拉伸,图片的四个角会保持原状,而1和4部分会随着图片的横向拉伸而拉伸,2和3部分会随着图片的纵向拉伸而拉伸,图片的中间部分会用5进行平铺填充。若图片未裁切,则使用Tiled模式后,根据图片边框拉伸,图片保持原大小不做变化,只是用自身平铺填充。

Fill Center--填充中心。已裁切的图像源才有此选项)勾选后,5显示,反之,5不可见。

(4) 

Fill Method中的选项--Horizontal、Vertical、Radial 90、Radial 180、Radial 360

Fill Origin--填充起点

Fill Amount--填充进度

Radial 模式下会出现ClockWise--是否顺时针

Preserve Aspect--同上

Set Natice Size--将content的大小设置为Sprit相同大小

Fill Method 和 Fill Origin搭配确定填充方式和填充起点。

--------------------------------------------------------------------------------------------------------------------------------

Button组件

Interactable----是否禁用按钮,如果禁用,按钮界面将会产生Dissable的效果

Transition----可以设置按钮再不同状态下的表现形式,有None、Color Tint、Sprite Swap、Animation四种选项

(1)

None--没有任何效果,点击按钮不会产生界面上的变化

(2)

Color Tint--颜色过度模式

Target Graphic--图片组件

Normal Color--正常按钮颜色

Highlighted Color--高亮颜色,鼠标经过时会显示的颜色

Pressd Color--按下的颜色

Disable Color--禁用时的颜色

Color Multiplier--颜色切换系数,颜色切换速度,越大则颜色在几种状态间变化速度越快。

Fade Duration--衰落时间,颜色变化的延时时间,越大则变化越不明显。

(3)

Sprite Swap--图片切换模式

Target Graphic--目标图片组件

Highlighted Sprite--高亮时的图片

Pressed Sprite--按下的图片

Disable Sprite--禁用时图片

(4)

Auto Generate Animation--自动生成动画控制器,设置trigger进行切换

Navigation--导航模式

假如你现在有四个按钮,当你点击第一个时,第一个会保持选中状态,然后通过按键盘方向键,会导航将选中状态切换到下一个按钮上,例如你的第一个按钮下方存在第二个按钮,当你选中第一个按方向键下时,第一个按钮的选中状态取消,第二个按钮进入选中状态,前提是这些按钮都开启了导航功能。

None(关闭):关闭导航。

Automatic(自动导航):自动识别并导航到下一个控件。

Horizontal(水平导航):水平方向导航到下一个控件。

Vertical(垂直导航):垂直方向导航到下一个控件。

Explicit(指定导航):特别指定在按下特定方向键时从此按钮导航到哪一个控件。

可以在Scene下看到按钮的导航关系

OnClick事件列表。不推荐这样使用,代码中进行绑定。例如:

btn.onClick.AddListener(()=> { });

参考文献:https://blog.csdn.net/qq992817263/article/details/51754189

Unity UGUI之Button的更多相关文章

  1. Unity UGUI实现Button按钮长按状态的判断

    代码: using UnityEngine.EventSystems; using System.Collections; /// <summary> /// 脚本位置:UGUI按钮组件身 ...

  2. Unity UGUI

    超详细的基础教程传送门:(持续更新中) Unity UGUI之Canvas&EventSystem:http://blog.csdn.net/qq992817263/article/detai ...

  3. Unity UGUI鼠标穿透UI问题(Unity官方的解决方法)

    简述 最近在用UGUI的时候遇到了鼠标穿透的问题,就是说在UGUI和3D场景混合的情况下,点击UI区域同时也会 触发3D中物体的鼠标事件.比如下图中 这里给Cube加了一个鼠标点击改变颜色的代码,如下 ...

  4. Unity uGUI 登录界面

    小记:进入冬季,天气确实变冷了,即使这样也不能作为自己不学习的理由!!! 昨天咱们一起学习了UGUI的Button的相关知识,那么今天咱们做一个简单的登录Demo,有些人可能不屑但是多学点总没什么坏处 ...

  5. Unity UGUI —— 无限循环List

    还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是 ...

  6. Unity UGUI图文混排源码(三) -- 动态表情

    这里是根据图文混排源码(二)进一步修改的,其他链接也不贴了,就贴一个链接就好了,第一次看这文章的同学可以先去看看其他几篇文章 Unity UGUI图文混排源码(二):http://blog.csdn. ...

  7. Unity UGUI图文混排源码(二)

    Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...

  8. Unity UGUI图文混排源码(一)

    Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...

  9. Unity UGUI实现图文混排

    目前在unity实现图文混排的好像都是通过自定义字体然后在文本获取字符的位置,用图片替换掉图片标签,这样对于支持英文来说,并没有什么影响.然后对于中文来说就是一个相当麻烦的事了,毕竟图文混排多用于游戏 ...

随机推荐

  1. 28 - 生成器交互-__slots__-未实现异常

    目录 1 生成器交互 2 slots 3 未实现和未实现异常 4 Python的对象模型 1 生成器交互 生成器提供了一个send方法用于动态的和生成器对象进行交互.怎么理解的呢?看下面的例子: de ...

  2. JS时间转换的一个坑位

    在做项目的时候,无意发现了一个小东西. new Date('2018-05-15') new Date('2018-5-15') 输出的结果是不同的,相差了8小时.然后让我回忆到之前看的一个时间转换函 ...

  3. 提高spring boot jpa性能(译)

    Spring Data JPA为Spring应用程序提供了数据访问层的实现.这是一个非常方便的组件,因为它不会重新发明每个新应用程序的数据访问方式,因此您可以花更多时间来实现业务逻辑.使用Spring ...

  4. windows下phpstrom中xdebug的使用

    https://laravel-china.org/articles/16425/windows-phpstorm-xdebug-breakpoint-debugging

  5. Django 中form的用法

    form的主要作用:1.在html中生成表单框架,2.验证数据(实话实说,很简洁,但不实用,灵活性差) from django.db import models # Create your model ...

  6. ISSCC 2017论文导读 Session 14 Deep Learning Processors,A 2.9TOPS/W Deep Convolutional Neural Network

    最近ISSCC2017大会刚刚举行,看了关于Deep Learning处理器的Session 14,有一些不错的东西,在这里记录一下. A 2.9TOPS/W Deep Convolutional N ...

  7. 配置OpenCV+VS2013环境

    配置OpenCV+VS2013环境 准备工作 win7系统 下载opencv的windows编译版 安装vs2013 express 设定环境变量 按windows窗键输入path,选择第二个结果编辑 ...

  8. android Webview Html5 相关文章

    Android WebView的使用集锦(支持Html5) http://blog.csdn.net/l_215851356/article/details/69239643 WebView详解与简单 ...

  9. 开源IDS系列--snorby 进程正常,但是worker无法启动 The Snorby worker is not currently running

    设置页面报错:   The Snorby worker is not currently running. It's imperative you start the worker immediate ...

  10. Python基本语法[二]

    Python基本语法 1.定义变量:  代码正文: x= y= z=x+y 代码讲解: 2.判断语句:  代码正文: score= : print("你真棒") print(&qu ...