UGUI基本组件介绍

以下内容是根据Unity 2018.4.13f1版本进行编写的
使用红色字体并用【】中括号提示的是Unity 2020.1.0f1版本的新特性

---

1、UGUI基本控件及常用组件

图一

图二
 

注：本文中控件指的是能直接在面板创建的Unity内置的UGUI控件（如图一），组件指的是挂载在GameObject游戏物体上的Unity内置脚本（如图二）
 

1-1、Image控件

UGUI系统中提供了两种显示图片的控件——Image和Raw Image。
其中Image控件是UGUI中最常用的控件之一，用于挂载图片，其中Image组件各属性如下：
Source Image： 指定要显示的目标图片资源，这里只支持Sprite类型的图片（如下图）

Color： 设置图片的颜色属性，这里会改变图片的色调，一般一些形状相同色值不同的图标类图片，可以让UI出成白图，在unity这边通过叠色实现UI效果
Material： 设置用于渲染图片的材质球
Raycast Target： 这个属性决定了是否接收射线碰撞检测，如果开启，会稍微消耗性能并遮挡后面的UI。但是，如果有Button控件时，必须开启Raycast Target，否则Button控件无法响应事件
Image Type： 设置图片的类型（simple、Sliced、Tiled、Filled）
Simple模式： 此模式下图片我正常模式，如果拉伸图片则会使图片变形，值得注意的是，如果勾选了Preserve Aspect，图片会按原宽高比进行拉伸（如下图）
在这里插入图片描述

【Unity 2020新特性】Use Sprite Mesh：是否使用图片网格

Sliced模式： 俗称九宫格模式，经过九宫格处理的Sprite，在缩放过程中，会保持4个角的切片不做缩放，4个边的切片只完成拉伸，只有中间的切片做缩放操作。Fill Center选项，如果取消勾选，Image不能完整显示，只会显示切片的边缘图片。如果不是九宫格模式的图，则会提示Warning，图也不会有九宫格模式的效果

【Unity 2020新特性】Pixels Per Unit Multipller：之前的Slice模式只能通过拉伸当前节点的宽高来拉长九宫图片，并且不能压缩（压缩会变形），使用这个属性后，可以压缩九宫区域，同时放大非九宫的区域
九宫区域若是正方形，该属性变小时会等比压缩九宫区域，直至九宫区域为0，该属性变大时会等比放大九宫区域，九宫区域可以无限接近节点宽高的大小
九宫区域若是长方形，该属性变小时会先等比压缩，直到九宫区域为一条线后，再压缩直至九宫区域为0，该属性变大时会等比放大九宫区域，九宫区域可以无限接近节点宽高的大小
另外，修改此属性时drawcall并没有发生改变，并且可以从gif中看到，修改时顶点数不会增加，九宫区域为0时顶点数甚至会减少，所以此属性几乎没有性能上的消耗


Tiled模式： 平铺模式，此种情况下，Sprite本身大小会保持不变，Sprite会像铺地面砖那样填充满整个Image控件。这里可以放九宫格或非九宫格的图，如果是九宫格的图，则会把可拉伸部分平铺，如果是非九宫格的图，则会显示Warning，并把整张图作为可拉伸部分平铺

注意：整张图片用作平铺图的时候，图片的Wrap Mode属性需要设置为Repeat模式，这样可以减少需要渲染的顶点数。但是，如果是九宫模式的图片，则不需要设置为Repeat模式，最好也不要使用Tiled模式，因为这会增加需要渲染的顶点数

【Unity 2020新特性】Pixels Per Unit Multipller：如gif所示，此属性可以在不改变当前节点大小的情况下修改平铺图的密度，但这是从左下角为起点的，目前没有属性可以修改起始点。
其实，这与放大（或缩小）当前节点宽高，再缩小（或放大）同样部分节点的Scale值是一样的效果，并且通过改变宽高和Scale值的大小，还可以实现非等比修改平铺图的密度

Filled模式： 填充模式，类似于Slider，可以让Image以一定地展现方式一部分一部分地完全展示出来

Fill Method： 指定填充呈现方式，选项有Horizontal[水平方向]、Vertical[竖直方向]、Radial90[1/4圆呈现]、Radial180[半圆呈现]、Radial360[整圆显现]
Fill Origin： 指定填充显现操作的起点（Bottom、Right、Top、Leaft）。

Fill Amount： 指定了填充的进度。
Clock Wise：针对Radial90/180/190类型的填充显示方式，取消与勾选该项，会“翻转”填充显示“方向”
Preserve Aspect： 根据Sprite宽高比，缩放Image
SetNative Size： 按下此按钮后， Image控件的大小会变成与Sprite图片本身大小一致。值得注意的是，如果Image Type为Sliced或Tiled时，不会出现此按钮


红色图取消勾选了Maskable属性

【Unity 2020新特性】Image组件增加了Raycast Padding和Maskable两个属性，这两个属性都比较有用，其中：
Raycast Padding： 设置图片上下左右四个方位的Raycast Target范围，正数往内压，负数往外加，在之前的Unity版本中，部分按钮的图标比较小，但是策划又希望把点击范围扩大，就必须要增加一个父节点来扩大按钮的点击范围，增加了节点后还需要开发同步修改代码，现在这个属性完美的解决了这个问题
Maskable： 设置当前节点是否能被Mask类组件（Mask，Rect Mask 2D）遮挡，若不勾选则不会被遮挡，这也能满足开发时部分特殊的需求

注意：
在调整Ratcast Padding大小的时候，不会特殊显示Raycast Padding的边界，这在设计中时比较麻烦的问题，可以做一个工具显示其Raycast Target的范围；

Maskable属性取消勾选的话，可以实现Mask（或Rect Mask 2D）组件内部分图不会被Mask遮挡的特殊效果，但是，如果节点是可点击的，那么在遮罩范围外的部分不会响应点击事件

经测试，使用遮罩会打断合批渲染，而在遮罩内取消勾选图片的Maskable属性，会再次打断遮罩内图片的合批渲染

但是，如果遮罩内有多个取消勾选Maskable的图片，那么这些图片也会进行合批渲染
 

1-2、Raw Image控件

Texture： 指定要显示的图片，注意：图片类型可以是任何类型
Color： 与Image控件一致
Material： 与Image控件一致
Raycast Target： 与Image控件一致
UV Rect： 可以让图片的一部分显示在RawImage控件中，x、y属性用于控制UV左右、上下偏移，W、H用于控制UV的重复次数。

【Unity 2020新特性】Raw Image组件与Image一样增加了Raycast Padding和Maskable两个属性，其效果同Image
 

1-3、Text控件

Text： 静态文本输入的内容
Font： 设置字体样式
Font Style： 设置字体风格（粗体、斜体、正常、粗体加斜体）
Line Spacing： 设置行间距
Rich Text： 是否使用富文本，勾选后，在Text输入的内容中可以使用HTML的一些字体修饰符来改变字体属性。例如：<color=#fffbeb>字体，意思是被尖括号括起来的部分的色值是#fffbeb
Alignment： 对齐方式（第一个是设置左右对齐方式，第二个是设置上下对齐方式）
Align By Geometry： 使用字形几何的范围来执行水平对齐。实际上，不勾选时，文本内容与控件边缘会有一点距离，勾选就没有了
Horizontal Overflow： 设置文本的水平溢出属性。其中有Wrap（包裹，意思是显示的内容会被包裹在Text控件中，多出来的文本不自动换行）、Overflow（溢出，意思是内容不受Taxt控件大小的限制，所有内容都会在一行显示）
Vertical Overflow： 设置文本的垂直溢出属性。具体与水平方向上的溢出属性一致
Best Fit：勾选后，会把文本内容限制到文本大小，并显示全部内容，根据文本内容自动控制字体大小，可以设置最小和最大的字体，使用这个功能会消耗一定的性能
Color： 设置字体颜色，与Image组件相似
Material： 设置材质球，与Image组件相似
Raycast Target： 与Image组件相似

【Unity 2020新特性】Text组件与Image一样增加了Raycast Padding和Maskable两个属性，其效果同Image
 

1-4、Button控件

Button控件其实就是在一个Image控件上多加一个Button组件，并在子节点添加一个Text控件，此时Image组件的Raycast Target属性必须勾选，否则无法响应点击事件。也可以在Text控件上添加Button组件，作为文本按钮。
Button组件的属性如下：

Interactable： 是否接收事件响应（是否交互），不勾选的话，即使Image（或Text）组件上的Raycast Target属性勾选了，也是不会接收事件响应的
Transition： 确定控件以可视方式响应用户操作的方式的属性，即设置点击后会出现什么效果，这里有4种效果可选择，None无效果，Color Tint(默认)颜色变化，Sprite Swap图片精灵变化(文本按钮无法使用)，Animation点击动画，其中格属性的详细可以自行尝试，这里不作赘述
Navigation： 按钮导航，在EventSystem中，存在一个当前被选中按钮，我们可以通过方向键来切换当前选中的按钮。该导航有五种：
None：关闭
Automatic： 自动导航，自动识别最近一个控件并导航到下一个控件
Horizontal： 水平导航，水平方向导航到下一个控件
Vertical： 垂直导航，垂直方向导航到下一个控件
Explicit： 指定导航，可以自定义按下特定方向键时导航到的下一个控件
Visualize： 显示导航关系
On Click： 绑定按钮点击事件，可以通过拖拽游戏物体，选择挂载在游戏物体身上的脚本中的函数，按钮被点击时会执行该函数。一个Button组件可以绑定多个函数。一般不会直接使用挂载的方式添加点击事件，而是通过脚本添加事件响应
 

1-5、outline组件

UGUI中的Outline组件其实就是对应Photoshop中的描边，一般在Text控件下使用，但是Outline组件与PS的描边又有不同的地方，Outline组件是通过复制4个文本，根据在编辑器中设置的Effect Distance偏移量，来设置复制出来的4个文本的位置，根据在编辑器中设置的Effect Color来设置4个文本的色值。所以说，用了一个Outline组件相当于用了4个Text组件，而1个字 = 1张图片 = 2个三角形 = 4个顶点，如果在一个Text控件上使用了Outline组件，相当于把顶点数量乘以5，容易报顶点数过多的错误： Canvas element contains more than 65535 vertices. This is not supported，所以Outline需要慎用。还有一点需要注意的是，因为UGUI中的Outline组件与PS的描边实现方法不同，所以描边大小一般不超过1个像素，描边大小超过1个像素的话可能会与PS上的描边效果有较大偏差

Use Graphic Alpha： 是否使用Graphic中的Alpha透明度，勾选后，Outline颜色的透明度会随着Text文本的透明度而变化
 

1-6、Shadow组件

UGUI中Shadow组件的效果是制造阴影（文字阴影和图片阴影），其中的属性与Outline组件的属性相同。
 

1-7、Canvas Renderer组件

Canvas Renderer组件是UI控件（主要是Image组件和Text组件）中必须的，在添加Image或Text组件时会自动添加，并且Image组件和Text组件依赖于Canvas Renderer组件，此时不可单独删除Canvas Renderer组件。

【Unity 2020新特性】Cull Transparent Mesh：当网格的每个顶点的顶点颜色alpha接近零时，是否可以忽略此渲染器发出的几何。

1-8、Mask组件

Mask组件的效果是遮罩效果，在其子节点下的物体都会受到影响。Mask组件一般用在Image控件上，并且Mask组件可以根据Image组件中精灵图（Sprite）的透明度属性来实现遮罩效果
Show Mask Graphic： 是否显示Sprite精灵图，如果取消勾选，则不会显示图片，但是遮罩效果还在


 

1-9、Rect Mask 2D组件

Rect Mask 2D组件是另一种实现遮罩的方式，与Mask组件不同，Rect Mask 2D组件不需要Image控件，相对的，Rect Mask 2D组件的范围是当前GameObject的Rect Transform范围，其不能使用图片遮罩，但是性能消耗会减少（drawcall减少）

【Unity 2020新特性】Rect Mask 2D组件增加了Raycast Padding和Softness两个属性，其中Raycast Padding属性的效果同Image，即可以在不变动当前节点宽高的情况下，更改遮罩的大小
Softness：可以设置上下左右的渐入渐出效果，X设置左右的渐变范围，Y设置上下的渐变范围
注意：Softness的效果个人感觉不算很好，另外，目前还不支持上下左右分别设置，只支持上下和左右
 

1-10、InputField控件

UGUI中的InputField控件（输入框）中默认带有一个Image组件以及一个InpuField组件，子节点下有两个节点，名字分别是PlaceHolder和Text，都是挂载了一个Text组件，其中PlaceHolder是InputField默认显示的文本，Text则是接收用户输入的文本，当Text中有输入文字时，PlaceHolder自动隐藏。其中InputField组件上半部分的属性与Button组件相同，这里不做赘述。
Text Component： 在此挂载输入域的文本组件
Text：设置默认的文本
Character Limit： 字符数量限制，在此处可设置最大可输入字符的数量，0为不限制，值得注意的是，中文字符和英文字符都被认为是一个字符
Content Type： 内容类型，指的是输入框的用途，根据不同的用途有不同的操作
Standard（标准类型）： 什么字符都能输入，只要是当前字体支持的。
Integer Number（整数类型）： 只能输入一个整数。
Decimal Number（十进制数）： 能输入整数或小数。
Alpha numeric（文字和数字）： 能输入数字和字母。
Name（姓名类型）： 能输入英文及其他文字，当输入英文时自动姓名化（首字母大写）。
Password（密码类型）： 输入的字符隐藏为星号。
Line Type（换行方式）： 当输入的内容超过输入域边界时的换行方式，分别是Single Line
single Line（单一行）： 超过边界也不换行，继续延伸此行，输入域中的内容只有一行；
multi Line Submit（多行）： 超过边界则换行，输入域中内容有多行；
multi Line Newline（多行）： 超过边界则新建换行，输入域中内容有多行。
Placeholder（位置标示）： 此输入域的输入位控制符，无默认文本以及用户无输入时显示，用作提示文本，有输入时自动隐藏。
Caret blink rate（光标闪烁速度）： 标示输入光标的闪烁速度。
Caret Width（光标宽度）： 光标闪烁时显示的宽度，默认1像素
Custom Caret Color（光标颜色）： 勾选后可以设置光标的颜色
Selection Color： 多选文字时，设置选中字体的背景色
Hide mobile input ： 手机隐藏输入
Read Only： 只读模式，勾选后输入框变为不可输入
On Value Changed： 值改变时触发消息，其挂载事件方式与Button组件相同。
End Edit： 结束编辑时触发消息，其挂载事件方式与Button组件相同。
 

1-11、Slider控件

Slider滑动条有三个游戏对象，Background（背景）、Fill Area（填充区域）、Handle Slider Area（手柄），Slider组件的属性与Button组件有相同的地方，这里讲解几个特有的属性：
Fill Rect： 填充区域
Handle Rect： 手柄
Direction： 滑动条的方向，有4种方向：Left To Right、Right To Left、Top To Bottom、Bottom To Top
Whole Numbers： 控制Values属性为整数输入，其中Min Value和Max Value分别设置整数的最小值和最大值
Value： 滑动条的值，相当于进度
On Value Changed： 挂载事件，滑动条的Value值每次发生改变时响应挂载的事件
 

1-11、Scroll View控件与Scroll Bar控件

UGUI提供了内置的滑动列表控件，可以很方便的实现滑动列表视图，其中的属性如下：
Content： 滑动的内容，可以是任意有宽高的游戏物体，一般挂载需要显示的内容，这里必须挂载游戏物体，否则滑动列表将没有反应
Horizontal： 是否支持左右滑动，不需要则必须取消勾选
Vertical：是否支持上下滑动，不需要则必须取消勾选
MovementType： 滑动类型（Unrestricted不受滑动内容边界限制，可以无限滑动；Elastic带边界回弹限制的滑动；Clamped边界夹紧，滑动区域不可超过边界），一般使用默认的Elastic模式
Inertia： 是否支持滑动惯性（Deceleration减速率，相当于惯性的大小。一般使用默认大小，不会特殊设置）
Scroll Sensitivity： 滑动的灵敏度
Viewport： 视口，一般是content的父物体，是带遮罩的展示区域，可为空，其遮罩可以挂载到带有Scroll Rect组件的物体上
Horizontal Scrollbar： 左右方向上的滑动条，可以通过滑动条控制列表滑动
Vertical Scrollbar： 垂直方向上的滑动条
Visibility： 滑动条可见性，一般使用系统默认，不做详细说明
OnValueChanged： 挂载函数，每次滑动时调用

其中，Scrollbar组件的属性如下：
Handle Rect： 滑动条手柄
Direction： 滑动方向
Value： 当前值，表示滑动到整个列表的哪个部分
Size： 手柄尺寸，一般根据内容的多少自动计算
Number Of Steps： 步数，如果设置为10，则每次会滑动内容长度1/10的距离

注意：在项目中，一般可以直接通过在游戏物体上加Scroll Rect组件实现滑动列表，最简单的结构为一个Scroll Rect 加 一个Content，并且挂载有Scroll Rect组件的游戏物体必须挂载含有Raycast Target属性的组件，否则无法滑动，我一般会在Scroll Rect节点上挂一个有Raycast Target的组件（如Image），以此保证无论手指点到滑动列表的哪隔地方，都能触发滑动
 

1-12、DrapDown控件

DrapDown是UGUI内置的下拉列表组件，但是项目中一般很少有使用到，而且可以通过Button 加 滑动列表的方式实现，此处不做说明
 

1-13、Toggle控件和Toggle Group组件

Toggle控件是复选框控件，其结构是由一个复选框背景图Background，复选标记CheckMark，一个标题文本Label组成。Interactable：是否可操作，通过这个属性来控制组件是否可被点击触发
Transition： 过渡，系统提供了四种方式。
Is On： 通过这个属性控制选中和未选中的状态
Toggle Transition： 切换过渡模式，None为无切换过渡，Fade为切换时Graphic所指目标渐隐渐显。
Graphic： 标识选中的UI图片
Group： 通过挂载有Toggle Group的GameObject来实现多个Toggle之间的单选，需要控制单选的所有Toggle需挂载同一个Toggle Group游戏物体

Allow Switch Off： 勾选则允许Toggle Group内全部复选框都无选中
 

1-14、Panel控件

Panel控件其实是UGUI内置的背景控件，相当于在一个空物体上添加一个Image组件，将其Source Image设置为Unity内置的Background精灵图，并将Color值的透明度设置为50%，一般项目不会用到。
 

1-15、Position As UV1组件

用途：（官方文档翻译）把Canvas空间下的顶点坐标设置到UV1中，用于在Text和Image这样的图形组件中实现一些特效（特效要自定义shader实现）
 

1-16、Selectable组件

Selectable组件是很多UGUI交互组件的基类如Image、Text等，其属性与Image组件部分属性完全相同
 

2、自适应组件

 
有些时候，为了实现更好的美术效果，或者部分组件（如滑动列表Scroll Rect）的需要，需要对一些节点进行排序，甚至还需要自适应节点的宽高及位置，这时候就需要自适应类的组件。
 

2-1、Horizontal Layout group，Vertical Layout Group，Grid Layout Group

Padding： 填充（边距），有Left、Right、Top、Bottom四个属性
Spacing： 子节点的间距

Child Alignment： 子节点对齐方式，一共9种
Control Child Size： 勾选则控制子节点的宽度和高度
Child Force Expand： 勾选则根据剩余可用空间强制扩展字节点的间距（宽或高）

Grid Layout Group是网格自动排版，属性与上面的组件有些不同：
Cell Size： 子节点的大小（即宽高），设置后子节点的宽高会被强制拉伸（或压缩）到设置的宽高，默认为100 x 100
Spacing： 子节点在横向（X）或纵向（Y）的间距
Start Corner： 设置开始排序位置（哪一个角落开始排序），有4种，分别是左上角、左下角、右上角、右下角

Start Axis： 选择横向排序还是纵向排序
Constraint： 设置对子节点的个数约束，Flexible不限制行数和列数，但会根据当前节点大小（也就是挂载了Grid Layout Group组件的节点）自适应，Fixed Column Count约束指定数量的列数，Fixed RowCount约束指定数量的行数

注意：自动排版是耗性能的，越复杂的越消耗性能。另外，一些很复杂的排版在后续的迭代和优化中也比较难维护，所以，一般在情况下，能够顾及美术的情况下尽量不使用

【Unity 2020新特性】Reverse Arrangement：勾选后，可以再不改变子节点排列的情况下，使子节点的排列顺序翻转
【Unity 2020新特性】Use Child Scale：勾选后，会将子节点的宽高乘上子节点的Scale值作为子节点的最终宽高来计算Layout

 

2-2、Content Size Fitter

Unconstrained： 不受约束
Min Size： 最小尺寸
Preferred Size： 首选尺寸（最佳尺寸），选择后unity会根据子节点的大小来计算当前节点的最佳尺寸

注意：如果当前节点的父节点有Layout Group类组件，则不需要挂Content Size Fitter组件了，若挂载了则会在组件下显示警告并且在运行游戏时有可能需要强制刷新一遍Layout Group，自动排版才会排版正确。
 

2-3、Aspect Ratio Fitter

Aspect Mode： 纵横比模式，有5种模式：
None不使用： 不控制宽高比
Width Controls Height宽度控制高度： 高度会根据宽度自动调整，宽高比不变
Height Controls Width高度控制宽度： 宽度会根据高度自动调整，宽高比不变
Fit In Parent适应父对象： 宽度，高度，位置和锚点会自动调整，使当前节点根据父节点短的一边适应大小
Envelope Parent覆盖父对象： 宽度，高度，位置和锚点会自动调整，使当前节点根据父节点长的一边适应大小
Aspect Ratio： 宽高比，即宽度除以高度。在None模式下无法调整该属性，但可以通用调整当前节点宽高调整；其它模式下无法调整当前节点的宽高，但是可以通过调整该属性来调整节点的宽高比
 

2-4、Layout Element

Ignore Layout： 忽略布局，勾选后，布局系统将忽略此布局元素，即忽略父节点的Layout Group类组件对当前节点宽高的控制
Min Width： 最小宽度，勾选后，可以设置当前节点的最小宽度
Min Height： 最小高度，勾选后，可以设置当前节点的最小高度
Preferred Width： 首选宽度，勾选后可以设置当前节点的首选高度
Preferred Height： 首选高度，勾选后可以设置当前节点的首选高度
Flexible Width： 弹性宽度，勾选后，布局系统会根据父节点剩余空间填充当前节点的宽度
Flexible Height： 弹性高度，勾选后，布局系统会根据父节点剩余空间填充当前节点的高度
Layout Priority： 此组件的布局优先级。如果一个GameObject具有一个以上具有布局属性的组件（例如，一个Image组件和一个LayoutElement组件），则布局系统将使用来自具有最高Layout Priority的组件的属性值。如果组件具有相同的Layout Priority，则布局系统将为每个属性使用最大值，而不管其来自哪个组件

注意：Layout Element一般在Layout Group类的子节点下使用，实现自定义的布局，或一些特殊的布局

另外，挂载Layout类（三种Layout Group以及Layout Element）的组件时，一般会在Inspector底部显示其Layout Element的信息，可以用于参考。
 

3、适配不同分辨率的屏幕

 
目前主流手机多种多样，屏幕的样式也分为很多种，为了使绝大部分手机屏幕如刘海屏，水滴屏等都能正确显示UI界面，需要对界面UI做分辨率适配
 

3-1、项目对不同手机分辨率的处理

 
（一般是往内压像素）无需内压的背景图可以写脚本防止内压
 

3-2、RectTransform

中心点和锚点部分待补充~

蓝图模式（第一个按钮）和原始编辑模式（第二个按钮）

默认情况下，蓝图模式是不开启的，此时修改旋转或缩放属性，Rect框的大小会一起变化
点击开启蓝图模式后，修改旋转属性或缩放属性时，Rect框的大小不会改变

默认情况下，原始编辑模式也是不开启的，此时修改锚点或中心点，锚点或中心点会一起变化，当前节点的位置也会变化

点击开启原始编辑模式后，修改锚点或中心点时，锚点或中心点的坐标不会改变，节点的位置也不会改变，而是图片的位置发生变化

值得注意的是，开启蓝图模式后，图片按钮的点击范围仍然是图片的范围，即使Rect框并没有发生改变
 

3-3、对于超宽屏幕手机的处理

一般是挂载脚本，运行时脚本会根据宽高比判断是否宽屏，在宽屏时会自动往内压两边的像素（一般是60像素），有一些大背景图不需要被压扁，因此一般会有另一个脚本防止内压的

一些超宽屏的分辨率，考虑到性能和内存的消耗，一般设计时UI界面不会做到这么大，而是通过压黑边的办法，即屏幕多出来的部分加黑色遮罩；也有直接拉大整个背景图的，例如3840*1644的分辨率，就把背景图的Scale值设置为大概1.1，即放大1.1倍，其它不变
 

3-4、针对不同分辨率手机的UI设计

例如标准分辨率下（1280*720）左右边界UI只显示部分，宽屏下才显示全，如图：

1280 * 720分辨率

1560 * 720分辨率

 
 

大佬们发现有错误欢迎拍砖~