Unity3D 基本的UI系统

Unity3D 基本的UI系统

一、前言

之前的几次分享都是与3D物体相关的，在目前大多数的3D游戏中，比如血量，背包，设置，手游摇杆，技能等都是通过UI来显示和控制的。所以UI在3D游戏中也占有着一定份量。所以，今天就来介绍一下我们Unity中的UI系统。

二、目录

基础UI

按钮

文本

输入框

复选框

滚动条

下拉框

原始图像

图像

滚动条

容器

面板

滚动视图

布局

锚点布局

垂直布局

水平布局

网格布局

实用组合

可自动扩展尺寸的滚动视图

三、详解

UI作为2D显示部分，自然是要与3D场景区分开的，为此Canvas的功能便派上用场了，这个组件一般不用我们管，在添加UI组件时，unity就已经自动添加好了的。作为面向对象的语言，不同UI元素之间的区分只在于添加组件的不同。‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

下面进入正题：

1. 基础UI

按钮(Button)

【组件属性图】

‍

可点击的组件之一，通过该组件你可以自定义点击后要执行的脚本

‍

文本(Text)

【组件属性图】

该组件用于显示需要显示的文本信息

输入框(InputField)

【组件属性图】

该组件用于收集需要用户进行输入的信息。

复选框(Toggle)

【组件属性图】

用于选中/取消选中

滑动条(Slider)

【组件属性图】

可用于显示加载进度/血量等信息。

下拉框(DropDown)

【组件属性图】

可用于显示多个可选项信息

原始图像(RawImage)

【组件属性图】

可接收任何类型的纹理图片显示在UI上，比如可以用于制作小地图。

支持UV剪切，

图像(Image)

【组件属性图】

只能接受精灵类的纹理图片进行显示，也就是在导入图片时要将图片类型设置为Sprit纹理类型才能被该组件显示。

滚动条(ScrollBar)

【组件属性图】

通过该组件你可查看一个较大尺寸的图片/地图。 下面的滚动视图中就使用了该组件。

2. 容器

容器：用于装UI的箱子，用于分类分组

面板(Panel)

【组件属性图】

作为其他组件的父组件，可用于为组件分组，添加背景...

滚动视图(ScrollView)

【组件属性图】

作为其他组件的父组件，对于屏幕大小无法显示完整的UI进行扩展显示，该视图允许你使用鼠标/滑动的方式有序浏览各部分内容。

你需要指定的只是其显示内容的尺寸，支持水平和垂直滚动。

缺陷是当动态向滚动视图添加子组件时，还需要手动更新内容尺寸，否则将显示不全，下面“可扩展的滚动视图”解决了这个痛点。

3. 布局

当Canvas中的内容较多时，会显得杂乱无章，而且在不同分辨率/尺寸的屏幕下进行显示时，将会导致UI错乱，于是布局的重要性就体现出来了。

锚点布局(Anchors)

【组件属性图】

对于UI来说，RectTransform组件是必不可少的，和3D中的transform组件有着同等地位，该组件记录了他们的绝对位置/相对位置、旋转角度等信息，其中还包含了锚点、相对偏移量等信息。

通过对该组件中的锚点信息进行设置，可以实现不同设备尺寸下的UI位置的固定性以及UI大小的可缩放性。

垂直布局(VerticalLayoutGroup)

【组件属性图】

通过添加垂直布局组件，你可以省去手动设置各个UI组件位置和尺寸的时间。

通过垂直组件，你可以得到一个自动垂直排列的列表。

使用方法，创建一个面板，并在其上添加该组件，之后想组件中添加你需要的UI组件作为其子组件，此时子组件就会收到该布局组件的控制，根据你的需要设置该组件的属性即可。

水平布局(HorizontalLayoutGroup)

【组件属性图】

通过添加水平布局组件，你可以省去手动设置各个UI组件位置和尺寸的时间。

通过水平组件，你可以得到一个自动水平排列的列表。

使用方法同垂直组件，不同的是该组件是自动水平排列。

网格布局(GridLayoutGroup)

【组件属性图】

通过添加该组件，你可以省去手动设置各个UI组件位置和尺寸的时间。

通过该组件，你会得到一个整齐排列的表格，你只需设置好拥有该组件UI的尺寸和该组件中单元格的尺寸信息。

使用方法如垂直布局； 不同的是属性信息，一看就懂，该组件是自动水平和垂直排列。对于如背包系统非常实用。

四、高级——可扩展的滚动视图

我们都知道在Unity中，任何东西都可组件化，对于可扩展的滚动视图来讲，不过是对基础的滚动视图容器添加了其他的一些组件。

如：

ContentSizeFitter

【组件属性图】

该组件会根据添加的子组件数量，动态调整该UI的尺寸大小，包括运行模式和编辑器模式。

ScrollableRect

【组件属性图】

该组件是五哥在网上艰难找到的，该组件是为了解决当鼠标在视图子物体上滚动时，滚动视图没反应的问题。

添加了这两个组件之后，可以说你的滚动视图容器才能算完美。

武、最后

这就是今天分享的关于UI组件的一些基础知识。