image-20200612210547111.png

Unity UI系统是一个开源项目，我们可以查看源代码来更加清晰的看这些组件的功能实现。

1.Image

image-20200612211016041.png

图片组件使用Sprite显示图片，可以更改图片的颜色，Material可以自己定义如在assets窗口右键创建一个Material

image-20200612211426038.png

但要更改shader为UI使用的。

Image Type

当我们给Image一个图片后，它就会多出一个Image Type 属性。

image-20200612211828324.png

image-20200612212006470.png

Slimple

Simple 这个类型下图片完全填充组件，根据组件的大小拉伸变化。但是它有一个属性Preserve Aspect,勾选之后图片不会整个填充至组件的大小而是等比例扩大或缩小。

勾选前

image-20200612212422092.png

勾选后

image-20200612212459599.png

另外下面还有一个按钮Set native size，不论是否勾选，单击这个按钮会直接显示图片本身的大小。

Sliced

这个类型下注意，如果所选择的Sprite没有切割就会给出警告，这个类型适合于那些切割成九宫格类型的图片，如

image-20200612222742795.png

一个图片进入编辑，设置border也就是边框，可以直接拖拽绿色边框设置，也可以通过数值设置。之后选择这个Sliced类型就可以使用。然后我们看看这个类型。

image-20200612224557615.png

在这个类型下，拉伸图片的时候九宫格四个角是不被拉伸的，而左右和上下分别只能被纵向和横向拉伸，中间是可以被随意拉伸的。

Fill Center 不勾选的话中间的那块直接不显示，如下

image-20200612224758877.png

这种类型在显示下面这样的边框的时候会更加友好

image-20200612224933387.png

Tiled

image-20200612225429686.png

平铺模式，事实上这个用来显示边框更加友好，如下

image-20200612225028657.png

选择这个类型在切割成九宫格的图片就是这样显示。

如果图片没有切割则会从左下角开始平铺图片，就像瓷砖铺在地面一样。如下

image-20200612225323414.png

Filled

image-20200612225507454.png

这个模式下有很多变量

Fill Method 选择填充的模式

Fill Origin 选择填充的起始位置

Fill Amount 选择填充多少，1是全部，如图示就是选择从底部开始环形填充，如果更改Fill Amount为0.6，显示如下

image-20200612225756108.png

Clockwise 选择顺时针还是逆时针

Preserve Aspect 可以选择是否等比例缩放

当然也有其他的方式比如从上到下、从左到右、180度擦除、90度擦除等等都可以在Fill Method里面选择，而Fill Origin可以选择从哪里作为起始位置底部、顶部、左下角等等。

有很多种组合，我们可以使用左右擦除显示的模式同时更改Fill Amount来实现战斗中血条的显示或者进度条的显示，如下

image-20200612230539931.png

image-20200612230550665.png

2.Raw Image

image-20200615194801784.png

这个组件是使用Texture不是精灵体，下面的UV Rect XY表示照片显示的起点0,0表示从左下角开始显示，WH表示照片的长和宽，这样就可以任意写实照片的位置。

image-20200615195155598.png

image-20200615195208306.png

Render Texture

使用方法现在Assets里面右键创建一个Render Texture资源，然后赋给Camera组件里面的Target Texture，如下

image-20200615195538604.png

然后再把这个Render Texture赋给Raw Texture的Texture属性。就可以把对应摄像机的内容显示在这个Raw Texture的区域。

Movie Texture

如果在Windows上开发需要下载一个Quick Time来帮助使用，具体可以看官网对应的介绍。

我们要把视频转换后赋给Raw Texture使用脚本获取Raw Texture组件控制播放，注意这是没有声音的，如果要声音要再加载一个声音文件来播放。

3.Text

image-20200615200446478.png

Text

显示的文本，这些文本可以使用Rich Text来设置显示的一些简单格式在官方文档中就有富文本的一些格式。

image-20200615200633565.png

color的颜色是RGBA，要什么颜色可以自己查找，当然官方也有一些定义。

Character

设置字体的显示，比如显示格式Font，可以自己导入自己想要的字体文件，windows搜索Fonts可以找到一个包含字体的文件夹里面的字体格式可以直接使用，字体的Inspector窗口如下：

image-20200615201129186.png

不同character会有不同的显示，比如

image-20200615201226491.png

character设置成Custom Set可以设置显示的字符，只有这些字符才会被显示。

Paragraph

可以设置显示的位置，是否可以超出范围显示，Best Fit如果勾选那么文字会自动适应当前范围，这可能与我们的字号设置冲突。

4.UI Effects

image-20200615201900890.png

以组件的形式添加到UI物体上。

Shadow

image-20200615202338310.png

效果如下

image-20200615202356404.png

其就是再绘制一遍UI图形在不同的地方显示。

Use Graphic Alpha 是否叠加两者的阿尔法通道。

OutLine

image-20200615202741585.png

我们调大了描边的距离，效果如下

image-20200615202804489.png

我们可以看代码，它事实上是把阴影在不同位置使用了4次。

Position As UV1

如果UI使用的材质有Detail，那么这个组件可以控制其是否显示，否则就没有什么效果。

image-20200615203334901.png

如Assets创建一个Material，如图更改shader就可以。选择shader的时候有Lit和Unlit即是否受场景中灯光的影响。当然还有其他一些shader选项可以尝试使用一下。

5.UI 界面的遮罩与滑动

Mask 组件和Scroll Rect组件

如图给一Image组件一个比较大的Sprite，然后点击Set Native Size 设置为原来的大小，这是图片很大我们的界面装不下，如果实现拖动的效果呢？

image-20200616204136475.png

可以直接给这个UI添加一个滚动组件Scroll Rect，然后把Image赋给它的一个属性就可以实现在屏幕上拖动图片显示不同区域的效果，如下：

image-20200616204730233.png

当然我么有更好的使用方式，就是使用遮罩。如下

遮罩显示Mask组件

使用Mask组件

image-20200616222425256.png

创建一个UI物体，添加一个Mask组件，这个物体的子物体都会被它所遮罩，可以个这个物体一张图形，这样遮罩层就会是这个图形。就好像以这个物体的形状显示子物体的图形。

Show Mask Graphic表示是否在被遮罩的物体滑出遮罩区域后显示本物体的图形。

Scroll Rect组件

再在物体添加一个Scroll Rect组件然后将子物体要滑动的图片赋值给它则可以实现遮罩滑动的效果。

image-20200616223538877.png

其中的一些属性，Content表示要滑动的UI，Horizontal和Vertical表示是否沿着水平或者竖直方向滑动。

Movement Type更改移动类型有三种默认的是Elastic表示Content指示的物体在滑动到它的边界的时候可以接着滑动但是一松手是被反弹回来Elasticity表示反弹回来的速度；Unrestricted表示没有限制，移动到边界接着移动不会弹回；Clamped表示不能超出，滑到边界处直接停止。

Inertia表示惯性，物体拖动的时候停下来的速度。

Scroll Sensitivity表示拖拽的灵敏度。

Viewport表示可视区域，像我这节做的直接在一个Image上挂一个Scroll Rect组件是以本身显示的，如果在一个空物体上挂一个Scroll Rect组件就需要指定一个可视区域来显示遮罩的内容。

Horizontal 和Vertical Scrollbar表示可以添加两个滑动条来配合滑动。