GUI的分类：OnGUI、NGUI、UGUI

UGUI之前使用的是OnGUI（性能、只能用代码编写）。
NGUI是OnGui的插件

OnGui

public Rect rect;
public Texture texture;

public GUIContent content;
public string fieldContent;
public string password;
public string textArea;
public bool toggleValue;
public float sliderValue;

public Vector2 scrollPos;

void OnGUI(){
    GUI.Label(rect,"hello label!");
    GUI.Label(rect,texture);
    GUI.Label(rect,content);

    if(GUI.Button(rect,"button")){
        print("button is Click");
    }
    GUI.Button(rect,texture);
    GUI.Button(rect,content);

    GUI.TextField(rect,fieldContent);
    GUI.passwordField(new Rect(100,200,100,30),password,'#');
    textArea = GUI.TextArea(new Rect(100,300,200,200));
    toggleValue = GUI.Toggle(rect,true,"开关");
    sliderValue = GUI.HorizontalSlider(rect,sliderValue,0,1);
    //sliderValue = GUI.VerticalSlider(rect,sliderValue,0,1);
    scrollPos = GUI.BeginScrollView(new Rect(400,400,100,100),scrollPos,new Rect(0,0,200,100));
    GUI.Button(rect,content);
    GUI.EndScrollView();
    }

UGUI

UGUI简介

分类

  1. 可以单独进行使用的，即单个组件就可以完成某种功能的，如：Text
  2. 需要多个组件配合使用的，如：Button（Button、Image、Text配合）

依赖

EventSystem

EventSystem是UGUI的事件系统，没有他就不能对UI进行操作

Canvas

Canvas是画布，所有UI在其上显示

RectTransform

简介

RectTransform继承自Transform，相比于Transform，它有：

  1. width、height
  2. anchor
  3. pivot

局部坐标和世界坐标

transform.position（世界坐标）与面板不同。
transform.localPosition;是面板显示的坐标。

锚点

锚点是RectTransform的一个属性，UI的位置信息都是相对于锚点。
UI的localPositon是相对于锚点来说的。

中心点

中心点与锚点的相对距离就是UI的位置信息。
旋转时是围绕着中心点进行旋转的。

注意事项

对于Rotation和Scale，最好只有做动画的时候，才能进行修改。
按住alt键呼出锚点控制快捷键

代码示例

transform.position;//世界坐标
transform.localPosition;//局部坐标
//获取中心点
GetComponent<RectTransform>().pivot;

UGUI的组件

1. Text:显示文本

RichText（富文本）

在一个文本框中的文字有不同的样式，有点类似于html语言（或者xml）。

<color=green>Hello!</color><size=32> the</size> <i>Text</i>
OutLine组件

配合Text使用添加边线。

Shadow组件

配合Text使用添加阴影。

2. Image:显示图片

ImageType
  1. Simple原始
  2. Sliced切割（Sprite Editor）
    避免边缘被拉伸（九宫格切割，只拉伸内部）
  3. 平铺
    重复显示图片
  4. 填充
    可以根据value显示不同的大小，血条、闹钟…

3.RawImage:渲染纹理

资源中的Texture

资源中的Texture中的第一个属性Texture Type若为default，则说明其为纹理。不能给它赋给Image。

UV
作用
  1. 小地图
  2. 相机
  3. 播放视频
  4. 显示动态图片

4.Button：按钮

xxxColor

控制各种按钮各种情况下的颜色

按钮添加事件
  1. Inspector里OnClick中添加事件。
  2. 通过代码进行事件添加。
public Button button;

void Start()
{
    button.onClick.AddListener(this.OnButtonClick);
}

public void OnButtonClick()
{
    //添加事件代码    
}

5.Toggle：多选按钮

isOn

控制按钮开和关

ToggleTransition

是否打开透明度渐变效果

脚本监听

Toggle toggle;

void Start()
{
    toggle.onValueChanged.AddListener(this.OnToggleValueChange);
}

public void OnToggleValueChange(bool isOn){
    //添加事件代码
}

6.Slider：滑动条

Min Value,Max Value

设置滑动条的左右端点

Whole Numbers

是否只能整数变化

脚本监听

参数为float

7.ScrollBar:与Slider大致相同

8.DropDown：下拉列表

带图片的列表项

新建图片，然后在Option中设置

Template

点击后生成列表的模板，可以对Item进行修改。

Dropdown dropdown;

void Start()
{
    List<OptionData> options = new List<OptionData>();
    options.Add(new OptionData("123",null));
    dropdown.options = options;
}

9.InputField：输入框

PlaceHolder

提示的内容

Text

输入的文字

InputType

控制输入的类型，只能输入数字之类、密码显示之类

访问
inputField.Text;//访问输入的内容

10.Panel：容器

实质

Image，修改了全屏和透明度

11.ScrollView:滚动窗口

ScollRect：实现对内容拖拽

Content：拖动的部分
Horizontal、Vertical：水平或竖直方向的拖动
(Horizontal、Vertical)ScrollBar：滚动条设置
OnValueChanged：参数类型为Vector2

Viewport中的Mask：遮罩

对其下的子物体进行裁剪（比如上边的拖拽内容）

时间绑定
public void OnScrollViewChanged(Vector2 e)
{
    //拖动到最上面y变成1，最右边x变成1
    //从下到上，从左到右
}
辅助组件：VerticalLayoutGroup（自动排列）

spacing：修改间距

辅助组件：ContentSizeFilter（适应大小）

Horizontal/Vertical Fit：
preferredSize：根据子物体的尺寸，自动计算以最优的尺寸赋值给该组件。此时，不可以自行修改RectTransform。

常见问题及解决方案

UI层级问题

解决办法：向UI添加组件Canvas，并调整sorting layer

添加Canvas后，子物体点击没反应

解决办法：添加组件Graphic Raycaster