Unity3D - UGUI的手动搭建

了解UGUI组件的搭建方式，有助于搭建我们自己的UI界面。

Text 文本

　　text 是UGUI中的基本控件，在Hierarchyi面板创建一个空物体 - 给这个空物体添加一个Text组件即可实现与text空间相同的功能。

Image 图像

　　　Image 是UGUI中的基本控件，在Hierarchyi面板创建一个空物体 - 给这个空物体添加一个Image组件即可实现与Image控件相同的功能。

Raw Image 原始图片

 　　Raw Image 和 Image基本相同，

　　功能上Raw Image比Image少了image Type功能，Raw Image可以添加所有类型的图片 而Image只能添加Spritie（精灵）类型的图片；

　　性能上由于Raw Image比Image的功能少，Raw Image的性能比Image 的性能要好，Raw Image主要用于做一些不需要在游戏运行中不需要改动的图片，例如 背景图片。

Button 按钮

 　　Button中的组件：Image组件，Button组件，Text组件（非必需）。

　　搭建方式：

　　　　1.在Canvas下创建一个空物体（改名为Button）

　　　　2.给这个Button添加一个Image组件和一个Button组件

　　　　3.在创建一个空物体作为Button的子物体（改名为Text）

　　　　4.给Text添加一个Text组件，即完成了控件Button的搭建。

Toggle 开关

 　　Toggle中的组件：Toggle组件，两个Image组件,Text组件

　　搭建方式：

　　　　1.在Canvas创建一个空物体（改名为Toggle）

　　　　2.给Toggle添加一个Toggle组件

 

　　　　3.添加一个Image控件作为Toggle的子物体，用于做开关的背景（将该控件改名为Background）

　　　　4.添加一个Image控件作为Background的子物体，用于做开关的前景（将该空间改名为Checkmark）  

　　　　5.创建一个空物体作为Toggle的子物体（改名为Label）

　　　　6.给Label添加一个Image组件或添加一个Text组件（注意：Image组件、Text组件、Raw Image组件不能同时存在于一个物体上）

　　　　7.点击物体Toggle，找到它上面的Toggle组件，将Background拖拽到TargetGraphic属性上，在将Checkmark拖拽到Graphic属性上

　　　　8.最后将每个物体调整到合适大小，即完成了控件Toggle的搭建

Slider 滑竿

 　　Slider中的组件：Slider组件，三个Image组件

　　搭建方式：

　　　　1.在Hierarchy面板创建一个空物体（改名为Slider）

　　　　2.给Slider添加一个Slider组件

　　　　3.添加三个Imge控件作为Slider的子物体（分别改名为Background、Fill、Handle）

　　　　4.给每个子物体添加图片，并调整到合适的大小

　　　　5.点击物体Slider，找到它上面的Slider组件，将Background拖拽到Target Graphic属性上 作为Handle未经过的区域，将Fill拖拽到Fill Tect属性上作为Handle经过的区域，将Handel拖拽到Handel Reck属性上作为拖动点。

　　　　6.调整各个物体的大小即可完成Slider的创建。

注意：

　　调整图片时Slider组件的Value值需为1，Handle需在滑竿右边。

　　若果实现功能时图片位置异常，可能是Background和Fill的位置放反了。

Scrollbar 滚动工具

 　　Scrollbar中的组件：Scrollbat组件、两个Image组件

　　搭建方式：

　　　　1.在Canvas下创建一个空物体（改名为Scrollbar）

　　　　2.给Scrollbar添加一个Scrollbar组件和一个Image组件

　　　　3.添加一个Iamge控件作为Scrollbar的子物体（改名为Handle）

　　　　4.点击物体Scrollbar，找到Scrollbar组件，将Handle拖拽到Target Graphic的位置和Handle Rect的位置

　　　　5.调整各个物体到合适大小即可完成Scrollbat的搭建

注意：搭建时和Slider不同，创建滑块的位置时value值要为0，若为1则滑动条右侧会有空隙。

Dropdowm 下拉菜单

 

Input Field 输入框

 　　Input Fild中的组件:Input Fild组件、Image组件、两个Text组件

　　搭建方式：

　　　　1.在Canvas下创建一个空物体（改名为InputField）

　　　　2.给InputField添加一个InputField组件和一个Image组件

　　　　3.添加两个Text控件作为InputField的子物体（分别改名为Text、Placeholder）

　　　　4.点击物体InputField，找到InputField组件，Target Graphic一般会默认添加它自身，将Text拖拽到Text Component的位置 用于显示用户输入的文本，将Placeholder拖拽到Placeholder的位置 用于显示提示信息（提示用户输入的内容）。

　　　　5.调整各个物体到合适大小即可完成Input Dield的搭建

Canvas 画布

 

Panel 面板

 

Scroll View 滚动视图

 　　Scroll View 中的组件:Image组件和Scroll Rect组件、Image组件和Mask组件、

　　搭建方式：

　　　　1.在Canvas下创建一个空物体（改名为ScrollView）

　　　　2.给ScrollView添加一个ScrollRect组件和一个Image，Image可添加图片做背景。

　　　　3.创建一个空物体作为ScrillView的子物体（改名为viewport），该物体的大小为可见范围，若需要显示的内容超出了这个范围那么超出的部分会被隐藏。

　　　　4.给viewport添加一个Mask组件和一个Image组件，（Mask中的Show Mask Graphic默认是勾选的 意思是显示viewport的背景图片，如取消勾选 则viewport中背景图片将不可见）

　　　　5.创建一个空物体作为viewport的子物体（改名为Content），若Content的范围大于viewport的范围，那么覆盖部分可以在游戏运行过程中拖拽显示，也可以将要显示的内容作为Content的子物体，但是该子物体需要在Content范围内。

　　　　6.点击ScrollView找到Scroll Rect组件，将Viewport拖拽到Viweport的位置，将Content拖拽到Content的位置。

　　　　7.调整各个物体到合适大小即可完成ScrollView的搭建

Event System 事件系统

 

在自己搭建UI界面时最好先创建一个UGUI提供的控件，然后把控件删除保留Canvas和EventSystem