Unity3d——UGUI学习笔记

控件

一、Text控件

文本控件

Character:

Font:字体
Font Style:字体类型
Font Size:字体尺寸
Line Spacing:行间距
Rich Text:选中后，可以识别Text中的标签属性，可以直接使用标签控制文本样式
	<b>Text</b>
	<i>Text</i>
	<size = 15>Text</size>

Paragraph:

Alignment:对齐方式
Align By Geometry:几何对齐
Horizontal Overflow:水平溢出
Vertical OverFlow:垂直溢出
Best Fit:自适应大小，但需要在Min Size和Max Size范围内。
Color:字体颜色
Material：材质

Paycast Target:

射线投射目标，是否能响应图形射线

脚本：文本内容交互

1、引入命名空间

using UnityEngine.UI;

2、设置Text组件中的属性值

public Text thisText;    
public Font textFont;
    void Start()
    {
    
    
        thisText = this.GetComponent<Text>(); //获取文本组件
        thisText.text = "<b>蜗牛</b>\n蜗牛"; //设置文本内容
        thisText.font = textFont; //设置font属性
        thisText.supportRichText = true; //设置Rich Text属性
 }

二、Image控件

说明：图片控件

属性：

Source Image：源图像，Sprite图像资源，需要把图片的Texture Type设置成Sprite(2D and UI)模式。
Color：颜色与透明度
Material：材质
Raycast Target：射线投射目标，开启后可以检测到射线
Paycast Padding：
Maskable：
Image Type:
Simple：默认，在拉伸区域内完全显示一张图片
Sliced：切片，九宫格应用，需要图片做过九宫格分割，四角在图片拉升时不会拉伸变形
Tiled：平铺，填满整个控件
Filled：填充，技能冷却主要依靠这个属性
Fill Amount：用来实现技能冷却的效果，技能剩余时间除以冷却总时间。
Use Sprite Mesh：
Preserve Aspect：保持长宽比
Set Native Size：点击后，图片回归到自身的原始尺寸

三、RawImage控件

属性：

Texture：纹理，Image控件中的Source Image只能用Sprite图片，Texture则能绑定所有图片
Color：颜色
Material：材质
Paycast Target：射线检测
Paycast Padding：
Maskable：
UV Rect：UV矩阵，改变UV坐标，可实现一张图片切分，如果这一组图片相互切换变成一个动画，例如动物跑动，就能实现动图效果。

说明：RawImage核心代码比Image少很多，RawImage不支持交互，可用于显示任何图片不仅仅是Sprite，一般用在背景、图标上、支持UVRect(用来设置值显示图片的某一部分)，而Image不支持UV Rect。
扩展 ：OutLine描边组件，Shadow引用组件。

脚本：图片轮播

说明：将一张从0到9的横排数字，通过UV Rect每次只显示一个数字，轮流显示，实现计时效果。

素材：

public class RawIamgeTest : MonoBehaviour
{
    
    
    public RawImage thisRawImage;
    public float speed = 1f;

    public float intervalTime = 1f;
    public float timer = 0;

    // Start is called before the first frame update
    void Start()
    {
    
    
        //1、渐入动画效果
        /*thisRawImage = this.GetComponent<RawImage>();
        thisRawImage.uvRect = new Rect(new Vector2(-1,0),new Vector2(1,1));*/

        //2、动画切换效果
        thisRawImage = this.GetComponent<RawImage>();
        thisRawImage.uvRect = new Rect(new Vector2(0,0),new Vector2(0.1f,1));
    }

    // Update is called once per frame
    void Update()
    {
    
    
        //1、渐入动画效果
        /*if (thisRawImage.uvRect.x < 0)
        {
            thisRawImage.uvRect = new Rect(new Vector2(thisRawImage.uvRect.x+speed * Time.deltaTime,0),new Vector2(1,1));
        }
        else
        {
            thisRawImage.uvRect = new Rect(new Vector2(0, 0), new Vector2(1, 1));
        }*/

        //2、动画切换效果
        timer += Time.deltaTime;
        if (timer >= intervalTime)
        {
    
    
            if (thisRawImage.uvRect.x>0.9f)
            {
    
    
                thisRawImage.uvRect = new Rect(new Vector2(0, 0), new Vector2(0.1f, 1));
            }
            thisRawImage.uvRect = new Rect(new Vector2(thisRawImage.uvRect.x + 0.11f,0),new Vector2(thisRawImage.uvRect.width,1));
            timer = 0;
        }
    }
}

四、Button控件

说明：按钮控件

属性：

Interactable：是否可交互，禁用按钮。

按钮交互动画效果：

Transition：设置交互的方式。
Transition四个属性（None无、Color Tint颜色改变、Sprite Swap图片交换、Animation动画）
	Normal *：没有点击的时候
	Highlighted *：鼠标移动到按钮时
	Pressed *：点击
	Selected *：
	Disabled *：禁用
Auto Generate Animation：点击后可以为按钮创建一组代表不同响应的动画，选中按钮>Window>Animation>Animation，就可以编辑动画了。

导航：

Navigation：将按钮设为Horizontal水平、Vertical垂直或Explicit指定导航按钮，经过EventSystem的控制，有一个按钮被选中时，就可以通过按上下左右，更改被选中按钮。
Visualize：显示控件之间的导航。

点击事件：

方法一：

On Click()：点击+号，将带有脚本的控件拖到None(Object)，然后就能在No Funtion中找到脚本中的方法并选择，于是当点击这个按钮时就会触发脚本中对应的方法。

方法二：

给按钮绑定脚本后，由脚本通过监听事件方法控制事件响应（委托）。

脚本：点击事件

	void Start()
    {
    
    
        //获取Button控件，监听到onClick事件后执行ClickButton方法
        this.gameObject.GetComponent<Button>().onClick.AddListener(ClickButton);
        string str = "button have parameter";
        //绑定带参数的方法
        this.gameObject.GetComponent<Button>().onClick.AddListener(()=> ClickButtonParameter(str));
    }

    public void ClickButton()
    {
    
    
        Debug.Log("button test");
    }
    public void ClickButtonParameter(string str)
    {
    
    
        Debug.Log(str);
}

五、Toggle控件

说明：可以用来实现单选效果。

属性：

avigation及以上内容，参考前面的控件就行。
Is On：默认是否选中
Toggle Transition：切换是否有过渡效果，Fade代表有，None代表没有。
Graphic：设置开关要起作用的图形对象，不一定非要是默认的对等。
Grounp：设置分组，把多个Toggle放在同一个对象下，在这个物体上添加Toggle Group组件，并将该物体分别赋值给一组中的Toggle，就可以实现单选。

分组：

1、新建一个Empty并起个名ToggleGroup,，给ToggleGroup添加Toggle Group组件，将一组Toggle都拖到Toggle Group下面，然后将ToggleGroup分别拖动到每个Toggle下的Group中，这样就实现了单选功能。
2、Toggle Group组件下的Allow Switch Off代表可以关闭被选中按钮，达到所有单选按钮的都没有被选中的效果，如果关闭该按钮则无法关闭被选中的单选按钮，一定会有一个被选中。

值改变事件：

On Value Change：当Toggle值改变时所调用的函数，和按钮的Onclick差不多。

脚本：值改变事件

	void Start()
    {
    
    
        this.gameObject.GetComponent<Toggle>().onValueChanged.AddListener((bool isOn) => OnToogleValueChanged02(isOn));
}
//无参
    public void OnToogleValueChanged()
    {
    
    
        Debug.Log("Tooggle Value Change");
    }
    //有参
    public void OnToogleValueChanged02(bool isOn)
    {
    
    
        Debug.Log(isOn);
    }

六、Slider控件

说明：滑竿控件，可以用于血量的显示

属性：

Fill Rect：以血条为例，指向填充血条的图片Fill。
Handle Rect：以血条为例，指向血条剩余血量最大值的图标。
Direction：方向，以血条为例，血条减少的方向，从左至右，从上至下或是其他的
Min Value：滑竿最小值。
Max Value：滑竿最大值。
Whole Numbers：选中后，滑竿每次改变的数值只能是1的倍数
value：滑竿的值

值改变事件：

同Toggle的控件

脚本：实现拖动滑竿控制音频音量的功能

(1)添加Audio Source组件，将准备好的音频拖动到AudioClip属性值中。
(2)要保证滑竿值的范围和音频组件的音量值的范围一致。

public void SliderValueChanged()
    {
    
    
        float value = this.gameObject.GetComponent<Slider>().value;
        this.gameObject.GetComponent<AudioSource>().volume = value;
}

脚本：实现血条

1、Backgroud：血条背景，可以用一张红色长条图片代替背景。
2、 Fill：填充血条的图片，可以用一张绿色长条图片代替填充，需要将Image Type设置为Filled,Fill Method可以设置（Horizontal水平、Radial 360圆周，如果是环形血条就可以使用圆周。）
3、然后再Slider中就可以通过控制value的值，控制血条。
4、Handle Slide Area：血条最大位置的图标。

七、Scrollbar控件

说明：滚动条，可以用于背包系统右侧的滚动条、游戏设置右侧的滚动条等。

属性：

Handle Rect：操作条矩形，指向Handle。
Direction：方向，滚动条的方向，从左至右，从上至下或是其他的。
Value：当前滚动条对应的值
Size：缩放操作条矩形。
Number Of Steps：滚动条可以操作的步数，当为2时，操作条的value只能在最开始和最后两个位置跳跃，当为3时，操作条只能在最开始、中间、最后三个位置间跳跃，每次平分滚动背景。

值改变事件：

On Vlue Changed：和Slider控件中的On Vlue Changed一样。

八、Scroll View控件

说明：

1、滚动视图，是一个能上下或者左右拖动的UI列表，用于展示图像、文本、按钮等，在需要展示比较多的内容的时会用到，例如：背包、长文字、游戏设置等。
2、滚动视图需要Scrollbar滚动条，Mask遮罩，Layout Group组成结构
Scroll View：挂在Scroll Rect组件。
Mask：遮罩，挂载到父物体时，选中后子物体超出父物体显示范围的内容将不再显示。
Viewport：视口，挂载Mask组件。
Content：内容。

Content中可以挂载三种Layout Group组件：

1、Guid Layout Group，自动排列子物体对象。

属性：

Padding：内间距。
Cell Size：子物体的长宽
Spacing：物体水平方向的间距，垂直方向的间距。
Start Corner：起始位置。	
Start Axis：排列方式，水平、垂直。
Child Alignment：子物体对齐方式。
Constraint：
	Flexible：无约束
	Fixed Column Count：约束列，每行显示几列
	Fixed Row Count：约束行，每列显示几列

2、Horizontal Layout Group

3、Vertical Layout Group

属性：

Content：滚动的内容，这里指向Viewport下的Content，内容可以指向Text文字内容，也可以是图片内容。
Horizontal：允许水平方向滚动；Vertical：允许垂直方向滚动
Movement Type：滚动类型
	1、Unrestricted无限制；
	2、Elastic弹性，弹性模式指在到达滚动矩形的边缘时会反射内容，Elasticity：弹性/弹跳量；
	3、Clamped固定；
	
Inertia：惯性，拖动后释放指针，内容将继续移动。
Deceleration Rate：惯性减速率，减速率将决定内容停止移动的速度，比率0将立即停止运动。值为1表示运动永远不会减速。
Scroll Sensitivity：鼠标滚动灵敏度，鼠标滚轮和触控板滚动事件的敏感性。鼠标滚动的速度。
View port：视口，滚动内容的父物体，需要用到Mask遮罩，遮罩部分为滚动内容可视部分。
Horizontal Scrollbar：水平滚动
Visibility：能见度，永久的、自动隐藏、自动隐藏并扩展视口；
Spacing：间距。
Vertical Scrollbar：垂直滚动，同Horizontal;
On Value Changed：事件，同Slider控件中的On Value Changed

补充：通常不需要滚动条，因为不好看。

九、Dropdown控件

说明：下拉列表。

十、InputField控件

说明：输入框

属性：

Text Component：显示文本输入的组件。
Text：初始值。
Character Limit：字符串中最大字符数量，0为不限制。
Content Type：内容类型，限制输入内容类型，包括数字，密码等。
	常见的类型如下：	
		Standard：标准类型，什么字符都能输入，只要是当前字体支持的。
		Autocorrected：自动更正
		Integer Number：整数类型，只能输入整数
		Decimal Number：十进制数，只能输入整数或小数
		Alphanumeric：文字和文字和数字，能输入数字和字母
		Name：姓名，能输入英文及其他文字，当输入英文时自动姓名化（首字母大写）。
		Password：密码类型，输入的字符隐藏为*
		Email Address：邮箱类型
		Pin：Pin类型，字符隐藏为*
		Custom：自定义。
		
LineType：换行方式，当输入内同超过输入域边界时。
	Single Line：单行，不换行，继续延伸。
	Multi Line Submit：多行，超过边界则换行
	Multi Line NewLine：多行，超过边界则新建换行
	
Placeholder：位置标示，此输入域的输入位控制符，任何带有Text组件的物体。
	注意：当输入框为空时显示此内容。
	
Caret Bink Rate：光标的闪烁速度
Caret Width：光标的宽度
Custom Caret Color：启动光标颜色
Caret Color：设置光标颜色
Selection Color：选中文本的背景颜色。
Hide mobile input：手机端隐藏输入
Read Only：只读，不允许输入

On Value Changed：点击内容事件
On End Edit：当光标移除事件

Placeholder：默认
Text：正在输入

其他

一、Rect Transfrom组件

属性

1、Rect Transform是UGU对象所特有的组件，和Transform最大的区别就是锚的存在。


2、Anchors：锚，UI对象所特有的，由四个位于UI对象物体矩形边框范围内的四个点组成（UGUI对象都是矩形边框），用来锚定UI对象
	1、有三种形态：锚点、锚线、锚框
		无论父物体的位置尺寸大小如何改变，UI子物体的Rect Transform四个参数的值不变。不同情况，Rect Transform四个参数有不同的含义。
		
	2、锚点：在左下角情况，四个点重合的情况，无论如何改变父物体的尺寸，UI子物体Rect Tranform四个参数的值不变，其含义分别为：
		(1)PosX：锚到带UI子物体左边框的垂直距离
		(2)PosY：锚点到UI子物体下拉框的垂直距离
		(3)Width：UI子物体的宽度
		(4)Height：UI子物体的高度
		(5)说明：也就标识UI子物体的尺寸大小不变，并且锚点与UI子物体左下角的点的方向距离不变；进而推断出轴点与锚点的方向距离保持不变。
		
	3、锚线：在左边框情况，两个点重合的情况。改变父物体的尺寸，UI子物体Rect Transform四个参数值不变，其含义分别为：
		(1)PosX：锚线与UI子物体左边框的垂直距离
		(2)Top：锚线上方端点与子物体上边框的垂直距离
		(3)Width：UI子物体的宽度
		(4)Bottom：锚线下方端点与UI子物体下边框的垂直距离。
		(5)垂直锚线：锚线到UI子物体轴心点的垂直距离保持不变，但是UI子物体的高度会随着父物体的高度变化而变化。
		(6)水平锚线：和垂直锚线相反。
		
	4、锚框：四个点分开的情况。改变父物体的尺寸，UI子物体Rect Transform四个参数的值不变，其含义分别为：
		(1)Left：左方锚线与UI子物体左边框的垂直距离
		(2)Top：上方锚线与UI子物体上边框的垂直距离
		(3)Right：右方锚线与UI子物体右边框的垂直距离
		(4)Bottom：下方锚线与UI子物体下边框的垂直距离
		(5)也就是表示UI子物体的尺寸大小包括高度宽度都会随着父物体的尺寸改变而改变。
		(6)注意：UI父物体与UI子物体的尺寸大小变化会受两者Scale大小比例影响，当父物体的比例是1，子物体比例大于1时，放大到一定比例，子物体的大小就会超过父物体。


3、Pivot：轴点，UI对象旋转的中心点
（Min_x,Min_y）;（Min_x,Max_y）;（Max_x,Min_y）;（Max_x,Max_y）;

二、RaycastTarget属性、Graphic Paycaster组件

说明：
	创建UI的时候Canvas和EventSystem自动创建，这两个是必不可少的。
	其中射线基检测依赖Canvas身上的Graphic Paycaster组件（图形射线）。
	射线检测：检测鼠标与UI的交互。

脚本：通过射线检测被点击的UI

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class PaycastTest : MonoBehaviour
{
    
    
    //EventSystem中的EventSystem组件
    public EventSystem eventSystemTest;
    //Canvas中的Graphic Paycaster图形射线组件
    public GraphicRaycaster rayTest;
    public List<GameObject> raycastTargetGameobjects;

    // Update is called once per frame
    void Update()
    {
    
    
        if (Input.GetMouseButtonDown(0))
        {
    
    
            raycastTargetGameobjects = GetGameObjectByRaycast(Input.mousePosition);
        }
    }

    public List<GameObject> GetGameObjectByRaycast(Vector2 inputPosition)
    {
    
    
        List<GameObject> resultList = new List<GameObject>();

        PointerEventData ped = new PointerEventData(eventSystemTest);
        ped.position = inputPosition;
        List<RaycastResult> rayCastResultsList = new List<RaycastResult>();
        rayTest.Raycast(ped, rayCastResultsList);
        if(rayCastResultsList.Count > 0)
        {
    
    
            foreach (var item in rayCastResultsList)
            {
    
    
                resultList.Add(item.gameObject);
            }
        }

        return resultList;
    }
}

补充：解决检测输入的时候报错的问题，将设置中Other Settings中的Active Input Handing设置为Both。

三、画布

说明：
	1、画布：创建UI物体时，会自动创建，并且，所有UI物体都是Canvas的子物体。和Canvas一同创建的还有一个EventSystem，其是一个基于Imput的事件系统，可以对键盘、触摸、鼠标、自定义输入进行监听处理。
	2、画布中的UI元素是以它们在层次结构中出现的顺序绘制的。首先绘制第一个孩子，然后绘制出第二个孩子，以此类推。如果两个UI元素重叠，则后一个元素将出现在前一个元素的顶部。
	3、要更改哪个元素显示在其他元素的顶部，只需拖动层次结构中的元素即可。

Canvas组件

1、Screen Space -Overlay：屏幕空间-叠加，表示Canvas下所有的UI空间永远位于屏幕的前面，不管有没有相机，UI元素永远在屏幕最前面，主要是2D效果。在这种模式下，在不同的屏幕分辨率下画布会自动适配屏幕的分辨率大小大小。
(1) Pixel Perfect：完美像素，UI元素精确到像素对齐，边缘更清晰。

2、Screen Space -Camera：屏幕空间-相机模式，Canvas和摄像机之间有一定的距离，可以在摄像机和Canvas之间播放一些粒子特效，主要是3D效果。
(1)Pixel Perfect：完美像素，UI元素精确到像素对齐，边缘更清晰。
(2)Render Camera：指定一个相机，用于渲染Canvas
(3)Order in Layer：层级顺序，同Sorting Layer下，Order越大，显示优先级越高。

3、World Space
(1)设置成这种模式后可以自定义画布大小

Canvas Scaler组件

1、Constant Pixel Size：无论屏幕大小如何，都使UI元素保持相同的像素大小
2、Scale Factor：以此比例缩放Canvas中的所有UI元素。
3、Reference Picels Per Unit：设置成100就行不要改变，否则画面会拉伸到看不懂。

Scale With Screen Size：根据不同屏幕尺寸自动改变UI大小。

Constant Physical Size：恒定物理尺寸

Graphic Paycaster组件

图形射线组件

Ignore Reversed Graphics：当被勾选时，Canvas中的UI如果经过翻转，则及时开启射线检测无法被检测到，