UGUI的使用

最新推荐文章于 2024-11-13 22:51:53 发布
最新推荐文章于 2024-11-13 22:51:53 发布
阅读量524 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_27636823/article/details/118991382
版权

UGUI

UGUI 控件有哪些？

什么是 UGUI

UGUI 是 Unity 自带的一套 GUI 系统，含有基本的一些 UI 控件。

我们常用的有 Canvas，Text，Image，Button，Toggle，Slider，Scroll Bar，Scroll View，Input Field。

怎样新建 UI 控件

在这里插入图片描述
在 Hierarchy 中右键添加
在这里插入图片描述

在菜单栏的 Component 中添加

Canvas

Canvas 是所有 UI 控件的根节点，即所有 UI 控件均需要在 Canvas 下。
在这里插入图片描述

上图所示即一个 Canvas 包含了多个 UI 控件。

Text

用来显示文本的。
在这里插入图片描述

  • Text：即显示的文本内容。

  • Font：文字的字体。

  • Font Style：字体的形式，有正常，加粗，斜体，加粗斜体几种可选。

  • Font Size：字体的大小。

  • Line Spacing：行间距。

  • Rich Text：是否支持富文本。

  • Alignment：对齐方式。

  • Align By Geometry：几何对齐

  • Horizontal Overflow：横向裁剪方式。

    • Wrap：裁剪
    • Overflow：不裁剪

  • Vertical Overflow：竖向裁剪方式。

    • Truecate：裁剪
    • Overflow：不裁减

  • Best Fit：是否最佳适应当前大小。

  • Color：字体的颜色。

  • Material：字体的材质。

  • Raycast Target：是否可被点击到。

Image

用来显示图片的。
在这里插入图片描述

  • Source Image：显示的源图片。

  • Color：给图片叠加的颜色。

  • Material：图片的材质。

  • Raycast Target：是否可被点击到。

  • Image Type：图片的类型。

    • Simple：普通类型在这里插入图片描述
      在这里插入图片描述

    • Preserve Aspect：是否保持图片的外形比例

    • Set Native Size：设置为图片的原大小

  • Sliced：九宫格
    在这里插入图片描述
    在这里插入图片描述

    • Fill Center：是否填充中间部分
    • Tiled：平铺

在这里插入图片描述
在这里插入图片描述

  • Fill Center：是否填充中间部分
  • Filled：填充

在这里插入图片描述

在这里插入图片描述

  • Fill Method：

    • Horizontal：横向填充
    • Vertical：纵向填充
    • Radial 360：360 度填充
    • Radial 180：180 度填充
    • Radial 90：90 度填充
    • Fill Origin：填充起点
  • Fill Amount：填充量
  • Clockwise：是否按时钟方向
  • Preserve Aspect：是否保持图片的外形比例
  • Set Native Size：设置为图片的原大小

Button

游戏中使用的按钮。

在这里插入图片描述

在这里插入图片描述

上图展示了按钮一般由图片和文字组成

在这里插入图片描述

  • Interactable：按钮当前是否激活可用

  • Transition：过渡方式

  • Color Tint：颜色过渡.

在这里插入图片描述

  • Target Graphic：控制颜色的对象
  • Normal Color：正常时的颜色
  • Highlighted Color：悬浮高亮时的颜色
  • Pressed Color：点击按下时的颜色
  • Disabled Color：禁止不可用时的颜色
  • Color Mutiplier：颜色乘数
  • Fade Duration：渐变过渡时间
  • Sprite Swap：图片过渡

在这里插入图片描述

  • Target Graphic：控制变化图片的对象

  • Highlighted Sprite：悬浮高亮时的图片

  • Pressed Sprite：点击按下时的图片

  • Disabled Sprite：禁止不可用时的图片

  • Animation：动画过渡

  • Normal Trigger：正常时的动画触发

  • Highlighted Trigger：悬浮高亮时的动画触发

  • Pressed Trigger：点击按下时的动画触发

  • Disabled Trigger：禁止不可用时的动画触发

  • Auto Generate Animation：自动生成动画

  • Navigation：导航方式

  • None：无
  • Horizontal：横向
  • Vertical：纵向
  • Automatic：自动
  • Explicit：自定义
  • Visualize：导航线是否可见

Toggle

开关，适用于单选或者复选或者控制其他控件的显示或隐藏。

在这里插入图片描述

上图显示一个 Toggle 一般由底图，文本和一个是否选中的图片组成。

在这里插入图片描述

大部分类似于 Button。

  • Is on：是否默认处于打开状态

  • Toggle Transtion：开关过渡方式

  • Fade：渐变过渡

  • None：无

  • Graphic：开关控制的对象

  • Group：所属于的 Toggle Group。（所属同一个 Toggle Group 的可以存在互斥状态）

Slider

滑杆。

在这里插入图片描述

上图所示一个滑杆由背景，滑杆进度，滑块三部分组成。

在这里插入图片描述

大部分类似于 Button。

  • Fill Rect：填充的对象

  • Handle Rect：滑杆对象

  • Direction：滑动的方向

    • Left to Right：由左往右
    • Right to Left：由右往左
    • Bottom to Up：由下往上
    • Up to Bottom：由上往下

  • Min Value：最小值

  • Max Value：最大值

  • Whole Numbers：是否只允许整数进度值

  • Value：当前值

Scroll Bar

滚动条。

在这里插入图片描述

上图所示滚动条由背景和滑块组成。

在这里插入图片描述

  • 大部分类似于 Slider。

  • Size：滑块的比例大小

  • Number of Steps：进度的块数

Scroll View

滚动区域。

在这里插入图片描述
Contetn一般搭配插件使用
在这里插入图片描述
在这里插入图片描述

上图所示滚动区域由背景，遮罩和显示内容组成。

在这里插入图片描述

  • Content：显示的内容框

  • Horizontal：是否可以横向滚动

  • Vertical：是否可以纵向滚动

  • Movement Type：

    • Unrestricted：无限制的滚动，无回滚
    • Elastic：有限制的滚动，有回滚
    • Elasticity：回滚系数，数值越大弹性越小
    • Clamped：有限制的回滚，无回滚

  • Inertia：惯性

  • Deceleration Rate：减速率

  • Scroll Sensitivity：滚动灵敏度

  • Viewport：可视区域

  • Horizontal Scrollbar：横向滚动控制条

  • Vertical Scrollbar：纵向滚动控制条

Input Field

输入框。

在这里插入图片描述

上图所示输入框由背景，默认文本和输入文本组成。

在这里插入图片描述

大部分类似于Button。

  • Text Component：输入文本组件

  • Text：文本内容

  • Character Limit：限制字符长度 (0 表示不限制)

  • Content Type：验证输入类型

    • Standard：标准
    • Autocorrented：自动修正
    • Integer Number：整数
    • Decimal Number：可带小数
    • Alphanumeric：数字和字母混合
    • Name：字母
    • Email Address：邮箱
    • Password：密码
    • Pin：数字密码
    • Custom：自定义
    • Placeholder：最初显示文本

  • Caret Blink Rate：光标闪动速率

  • Caret Width：光标宽度

  • Custom Caret Color：光标颜色

  • Selection Color：被选中部分颜色

  • Hide Mobile Input：是否隐藏手机输入

  • Read Only：是否只读

简单的控件组合

GridLayoutGroup

在这里插入图片描述

  • Padding：RectOffset类型，矩形偏移，详解请戳UGUI之Horizontal Layout Group组件介绍

  • Cell Size：Vector2类型，默认值为(100,100)，网格中的每个单元格的大小

  • Spacing：这里的Spacing不同于水平布局、垂直布局，是Vector2类型，既然是网格布局，当然存在水平方向的间隔和垂直方向的间隔，这里也不做过多的介绍。

  • Start Corner：Corner枚举类型

    • UpperLeft = 0, //左上角
    • UpperRight = 1, //右上角
    • LowerLeft = 2, //左下角
    • LowerRight = 3 //右下角

  • Start Axis：Axis枚举类型

    • Horizontal = 0, //水平
    • Vertical = 1 //垂直

  • Child Alignment TextAnchor枚举类型，文本锚点，详解请戳

  • Constraint：Constraint枚举类型

    • Flexible = 0, //不限制行数和列数
    • FixedColumnCount = 1, //约束指定数量的列数
    • FixedRowCount = 2 //约束指定数量的行数

Content Size Fitter

在这里插入图片描述

  • Horizontal Fit 控制UI的宽
    • Unconstrained：组件不根据布局元素调整 ，可手动修改长宽的值。
    • MinSize：根据布局元素的最小值来调整，不能手动修改长宽的值。
    • PreferredSize：根据布局元素的内容来调整，不能手动修改长宽的值。
  • Vertical Fit 控制UI高
    • Unconstrained：组件不根据布局元素调整 ，可手动修改长宽的值。
    • MinSize：根据布局元素的最小值来调整，不能手动修改长宽的值。
    • PreferredSize：根据布局元素的内容来调整，不能手动修改长宽的值。
      其中包含了常用的基本控件组合。
Want_rookie
关注
最新版微信小程序支付,退款问题实现与总结(保姆级)
m0_62049633的博客
02-22 4100
首先我们作为后端，需要像前端提供一个接口，前端通过调用这个接口唤起下单，在这个接口中,后端回去调用微信下单接口,这时候微信会给我们返一个预支付id，我们通过这个预支付的id，这个预支付id是唤起下单的一个必填参数,咱们只需要计算出唤起支付所需要的参数,然后传给前端,前端就可以调用这个唤起支付接口,这样,输入密码的数字轮盘就出来了。
wsdl2java源码-grails-cxf-grails-3:grails-cxf-grails-3
06-05
wsdl2java源码 请注意，当前的 3.x 版本使用 cxf 3.0.4 并且需要 WSS4J 2.x 以确保安全。 请注意，在 cxf 3.0.4（插件 v 2.1+ 和 3.x）中，很多东西都被移动了。 例如，我们必须添加 org.apache.cxf.xjc.runtime....
微信开发系列 -- 微信支付与退款实现
LuckyToMeet-Dian叶
05-18 2527
这阵子由于项目需要，需要对公众号的点餐程序添加微信支付与退款功能！想起大二上学期第一次做微信支付时的绝望，现在还记忆犹新。 这一次做微信支付相关的业务，是基于框架来做。如果有做过微信支付的同学，可能你会遇到各种各样懵逼的问题，最有趣的是返回的数据不告诉你大小还是小写，坑是多的吐血。 开发之前，我们需要有企业资质才可以做。如果没有的同学自己想办法！ pom.xml 文件 需要在 pom.xml 加入...
springboot使用com.github.binarywang 包实现微信网页上的支付和退款
weixin_46282323的博客
03-28 4912
wxpay:notifuyUrl 是 支付回调地址refundNotifyUrl是 退款回调地址这两个地址都必须是外网可访问的地址。
使用binary-wang开发微信小程序的登录和微信支付
hardworking_boy的博客
05-08 1万+
使用binary-wang开发微信小程序的登录和支付
Java微信支付全教程demo【公众号支付】
热门推荐
jiwengjian123的专栏
12-01 1万+
整个执行流程 是 ： 微信点击支付按钮——》 发送ajax到支付请求控制器——》 返回支付参数——》 用支付参数，调用微信内嵌的掉起支付js方法，发起支付——》 支付结果同步返回结果——》 支付结果异步发送到后台回调控制器做结果处理
springboot快速开发微信支付
莫颜道人
04-11 3927
springboot快速开发微信支付 1. POM文件添加依赖 <properties> <wechat.sdk.version>3.3.7.B</wechat.sdk.version> </properties> <dependency> <groupId>com.github.binarywang</gr...
App微信支付(Java)
weixin_44975537的博客
03-30 3498
App端微信支付(Java)
grails-fck-editor-0.3.zip_grails_grails-fck-editor
09-20
标题中的"grails-fck-editor-0.3.zip_grails_grails-fck-editor"表明这是一个与Grails框架相关的插件，具体来说是FCKeditor的一个版本。FCKeditor是一款广泛使用的开源富文本编辑器，它允许用户在网页上创建和编辑...
harmonyos2-grails-hibernate-search-plugin:将HibernateSearch功能集成到Grails
07-01
功能集成到 Grails 中。 入门 如果你不想从 开始，你可以开始一个新的项目： 并将以下内容添加到您的依赖项中 compile("org.grails.plugins:hibernate-search:2.3.0") compile("org.grails.plugins:hibernate5:6.1.8...
Grails-Java开发人员的圣杯.ppt
11-12
Groovy与Java可以无缝集成，允许开发者在同一个项目中混合使用Java代码，同时弥补了动态语言在面向对象、性能和可扩展性方面的不足。 Groovy的特性包括： 1. 类似Java的语法，易于学习和理解。 2. 支持元编程，...
微信支付-开源项目WxJava简单使用（公众号示例）
qq_20741133的博客
08-19 4775
首先，没有做过微信支付，又想快速开发，来快速熟悉微信支付流程。可以考虑用开源项目。 本文主要介绍微信公众号，服务商模式下微信支付。 WxJava是一个对微信支付封装的开源项目。 项目地址：https://gitee.com/binary/weixin-java-tools?_from=gitee_search 官方demo：https://gitee.com/binary/weixin-java-tools/blob/develop/demo.md 直接开始正片 一、maven引入jar <depen
微信支付退款，回调接口
weixin_51755348的博客
03-31 2039
微信支付退款，回调的接口，包含解密工具等，亲测可用
微信公众号代H5实现微信支付 V2密钥
g_houleisai的博客
05-08 2455
原作者https://blog.youkuaiyun.com/weixin_44142296/article/details/87078045 使用 com.github.binarywang 包 pom.xml支持 <!--微信支付包--> <!-- // 授权登录用到--> <dependency> ...
2024年最新微信支付—微信H5支付「微信内部浏览器」(2)，2024年最新2024物联网嵌入式开发高级面试题汇总解答
2401_85013863的博客
05-14 670
throw new CommonException(WechatStatusEn.WECHAT_CREATE_CODE_ERROR.getErrorMsg()+“':微信支付异常”, WechatStatusEn.WECHAT_CREATE_CODE_ERROR.getErrorCode());“nonceStr”:res.nonceStr, //随机串。
微信小程序+后端Java简单几步实现微信支付
最新发布
程序人生
11-13 4085
使用weixin-java-pay实现微信小程序支付功能，后台采用JAVA。
微信支付宝app，h5支付
Figure_hb的博客
08-08 517
这里用的是v2接口 ,使用的是binary-wang 工具。
[微信 支付demo ]
汤圆的博客
05-29 1494
欲买桂花同载酒,终不似,少年游
微信登陆、支付接口对接整理
叽叽叽叽叽叽叽叽叽叽叽叽叽叽叽叽
12-30 937
一、微信登陆 1、根据code获取对应的openid 微信中同一个小程序用户的openid为唯一的，是判定用户身份的重要标识。 @ApiModel(value = "微信登陆请求vo") public class WxReq { @ApiModelProperty("小程序 appId") private String appid; @ApiModelProperty("小程序 appSecret") private String
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值