UGUI是unity中自带的UI软件
如何创建UI?
1.在层级视图上-Create-UI-Image图片
2.选中图片,在检视视图上选择Image组件,属性如下:
source Image:图片来源
Color:颜色
Material:材质
Image Type:图片类型
Set Native Size:设置图片为原来大小
(1)如何改图片格式:
选中图片,在检视视图上,Texture Type-Sprite(2D and UI)-Apply
3.如何实现屏幕适配?
已背景为例
选中Image,在场景视图中有锚点(花瓣),拉动锚点到画布的四个边上,
这时在检视视图上-rect Transform-Left左设置为0,Bottom底设置为0即可,
这时背景图片占满整个画布
4.Text文本:
Font :字体
Font Style:字体样式
Normal;无样式
Bold:加粗
Italic:倾斜
Bold and Italic:加粗并倾斜
Font Size:字体大小
Line Spacing:行间距
Alignment:对齐方式
Horizontal Overflow:水平溢出
Vertical Overflow:垂直溢出
Color:字体颜色
Input Filed输入框
在输入框里有Placeholder是提示输入的,Text是将输入的内容存放在里面
InputFiled里的属性
Normal Color:正常颜色
Highlighted Color:鼠标放上去的颜色
Pressed Color:按压的颜色
Disabled Color:禁用时的颜色
Character Limit:字符类型
Content Type:输入类型
Standard:标准,可以输入数字、汉子、字母
Integer Number:整数
Decimal Number:高精度的数(小数)
Name:名字
email Address:邮箱地址
Password:密码
Botton:按钮
如何添加点击事件
Button-检视视图-butt on组件-On click()-“+”,把要拖进去的东西拖进
None的位置,在No function中选择GameObject-SetActive(bool),若不让
物体显示出来则打√,若不让物体显示出来则不打√
如何给I mage添加点击事件?
创建Image-检视视图-Add component-添加Button组件即可
Toggle:单选框
组件的子物体:
Background:背景图片
Checkmark:对号图片
Label:文本,用来改提示的
Toggle组件中的属性
Is on:是否选中
Group:组合,添加带有ToggleGroup的组件的物体
制作Toggle
1.在画布里创建一个GameEmpty空物体,显示出来是Game Object
2.在空物体下创建两个Toggle子物体,选中其中一个,在右边检视视图上
Is On去掉√
3.选中空物体,检视视图-Add Component-Toggle Group
4.选中子物体,分别给子物体-检视视图-Group-拖入空物体
5.运行,这时只能选择其中一个即完成
Slider:滑动条
子物体:
Background:背景图片
Fill Area:划过之后所变得颜色图片
Handle Slide Area:滑动块
Slider组件的属性:
Direction:方向
Left to Right:从左向右
Right to Left:从右向左
Top to Bottom:从上到下
Bottom to Top:从下到上
Min Value:最小值的设置(默认为0)
Max Value:最大值的设置(默认为1)
Value:值(在代码中会用到)
Scrollbar:滑动块
本身自带Image:代表的是背景图片
子物体:sliding area:代表的是滑动块图片
Scrollbar的属性
Direction:方向
Left to Right:从左向右
Right to Left:从右向左
Top to Bottom:从上到下
Bottom to Top:从下到上
value:值(在代码中会用到)
size:滑块的大小
Number Of steps|:滑块走的步数0代表任意位置停
Dropdown:下拉框
子物体:label:就是Text组件,用来接收你所选择的内容
Arrow:用来显示下三角
Dropdown的属性:
Options:用来修改内容的,点击+添加新的内容
panel:蒙版
在检视视图-Image-Image Type-filled
属性
Fill Method:旋转角度
Fill Origin:旋转开始的位置
Fill Amount:旋转的值(在代码中会用到)
滑动视图的创建:
1.新建Panel,添加组件Scroll Rect
2.在panel下创建子物体panel
(1)添加组件Grid Layout Group布局组合
3.在Panel(1)下创建Image或着Button,选择合适图片后,按ctrl+d复制并黏贴
4.创建两个scroll Bar,一个作为水平滑块,一个作为垂直滑块
5.选择Panel-Content上添加Panel(1),在horizontal Scrollbar上添加水平滑块,在Vertical Scrollbar上选择垂直滑块
6.运行即可