2.7 UGUI基础

day7 UGUI基础

一 ,UGUI概述

1.UGUI概述: 由NGUI创始人参与开发 2. 与Unity结合更加密切 3. 自适应系统更加完善 4. 更方便的深度处理 5. 省去Altas，直接使用Sprite Packer.

2,UGUI画布

1,UGUI画布也称为Canvas，UGUI是所有控件的父类 2. 所有UGUI控件都必须绘制在画布上面 3. 当创建UGUI控件工程当中没有Canvas的时候会自动创建 Canvas与EventSystem.

二,UGUI基础插件

1,Text:Text控件是用来显示文本的文本控件.

Text属性:

text.text = "账号";

text.alignment = TextAnchor.MiddleCenter;

text.fontSize = 20;

text.fontStyle = FontStyle.BoldAndItalic;//字体样式

text.color = Color.red;

2,Image

ImageType总共有四种选项：simple显示单个会拉伸；Tilled平铺 显示，图片按照原始显示；Sliced按照九宫格显示，拉伸区域只会在九 宫格中间；Filled填充显示

image = GameObject.Find ("Image").GetComponent (); //方法

image.fillMethod = Image.FillMethod.Radial180;

image.fillAmount += Time.deltaTime;

3,Button

Transition用于设置按钮在不同状态间的过渡效果，总共有四种方式

（1）None：无过渡效果

（2）Color Tint：设置不同状态不同颜色来过渡

（3）Sprite Swap：设置不同图片来过渡不同状态

（4）Animation：设置不同动画过渡不同状态

Button btn;

void Start ()

{

//获取到按钮

btn = GameObject.Find (“Button”).GetComponent<Button>();

//给按钮添加监听事件

btn.onClick.AddListener (BtnClick); }

void BtnClick() {

//按钮响应事件

Debug.Log (“btn.onClick.AddListener ()”); }

4,Slider

Slider slider;

void Start ()

{ //获取到Slider组件

slider = GameObject.Find (“Slider”).GetComponent ();

//添加监听事件

slider.onValueChanged.AddListener (SliderValueChange); }

// 事件响应

public void SliderValueChange (float value)

{ Debug.Log (“value = “+ value); }

4,ScrollBar

5,Toggle

Toggle属性如下所示，其中Group表示当前选中框是否属于某一组 选中框，若是的话则所有选中框只能选中一个。

Toggle toggle;

void Start () {

//获取Toggle组件

toggle = GetComponent ();

//给Slider组件添加监听事件

toggle.onValueChanged.AddListener (ToggleAction); }

void ToggleAction(bool isOn){ print (isOn); }

6,InputField

InputField创建出来如下图所示，InputField层级视图当中包含 Placeholder与Text，Placeholder用于显示占位符，即输入框没有输入文 本时显示的文本，例如下图的“Enter text”，Text用于显示输入的内容。

给InputField添加监听事件

InputField inputField;

void Start () {

//获取输入框

inputField = GameObject.Find(“InputField”).GetComponent (); inputField.onEndEdit.AddListener (InputFieldEndEdit); }

void InputFieldEndEdit(string text)

{ print (“⽂本框当中的⽂本:” + text); }

7,Panel

面板，功能相当于控件的容器，里面可以存放其他控件。 作用：使用Panel控件可以整体移动和处理一组控件 设计规范：一个功能完备的UI界面往往会使用多个Panel控件。

三,RectTransform

1,RectTransform的作用用来计算UI的位置和大小，RectTransform继承于 Transform，具有Transform的所有特诊，通过RectTransform能够实现基本的 布局和层级控制。

RectTransform当中专有名字：

Pos X,Pos Y Pivot与Anchor的距离

Pivot 中轴，中心点

Anchor 锚点

Width&Height 宽与高，相对于锚点

Left,Right,Top,Bottom 左右上下

2,锚点的四种摆放方式

(1),锚点呈点状:不管父物体怎么变,UI距离子物体的位置固定,大小固定.

(2),锚点与组件本身重合,UI的大小与父控件的大小变换成正比.

(3),锚点跟父物体重合:无论父物体怎么变化,UI控件四条边相对锚点四条边的距离保持不变.

(4)锚点呈线状:当UI控件的锚点呈线状并为竖直方向时，则UI控件竖 直方向的大小与父物体竖直方向的大小成正比，水平方向大小不变。当锚 点呈线状并且为水平方向时，则水平方向大小与父物体水平方向的大小成 正比，竖直方向大小不变。