UGUI

1.通过Slider设置图片的滑动时加载的效果

2.Image Type

Image分为四个类型

Simple：有个Preserve Aspect，勾选后UI会保持相对大小而不是填充整个Canves

Sliced：可以保证被切割的部分不会随着放大缩小而失真，需要在图片自身的Sprite Editor里设置九宫格所切的部分，切割后只有中心部分会拉伸

Tiled：根据图片自身的大小铺满Image

Filled：可以设置加载/切割的大小（如左到右或360）

 

3.控制技能冷却，通过改变图片的Fill Amount值来显示图片

UI中放在最下面的图片是最靠近表层的（如同一个物体中有许多图片时，位在最下面的会覆盖前面的）

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

public class Skill : MonoBehaviour {

    public float coldTime = 2f;     //冷却时间
    private Image fillIcon;
    private float timer = 0f;       //计时器
    private bool isClick = false;
    public KeyCode keyCode;


    
    
    // Use this for initialization
    void Start () {
        fillIcon = transform.Find("FillIcon").GetComponent<Image>();
        fillIcon.fillAmount = 0;
    }
    
    // Update is called once per frame
    void Update () {

        //通过快捷键触发技能
        if (Input.GetKey(keyCode))
        {
            isClick = true;
        }

        //改变Fill Amount的值
        if (isClick)
        {
            timer += Time.deltaTime;
            fillIcon.fillAmount = (coldTime - timer) / coldTime;
            if(timer>=coldTime)
            {
                fillIcon.fillAmount = 0;
                timer = 0;
                isClick = false;
            }
        }
    }

    public void OnClick()
    {
        isClick = true;
    }
}

 

4.可以在Component -> layout里给物体添加各种平铺的组件

直接把图片放到带有layout组件的物体下面会出现某些问题（如偏移等）

可以先创建一个空物体设置好相应位置，然后把UI放入空物体中并让Pivot定在中心位置

父物体会影响子物体但是不太会影响到孙物体

（如设置grid后图片就不能随意拖拽摆放，而是自动排列，但是创建一个空的object并把图片放入其中就可以随意拖放）

 

 5.Scroll Rect组件

设置Scroll Rect组件后把内容放到此物体下面就可以实现在范围内滑动

添加Mask组件可以隐藏显示范围外的物体，不选Show Mask Graphic能把组件所在的图片隐藏掉

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;     //IBeginDragHandler,IEndDragHandler这两个接口的命名空间
using UnityEngine.UI;

public class LevelScroll : MonoBehaviour, IBeginDragHandler, IEndDragHandler {

    private ScrollRect scrollRect;
    private float[] scrollArray = new float[] { 0f, 0.48f, 0.96f };
    private float targetPos = 0;
    private bool isDrag = false;

    public Toggle[] toggleArray;     //在脚本面板里把相应的Toggle按钮拖拽进去 

    // Use this for initialization
    void Start()
    {
        scrollRect = GetComponent<ScrollRect>();
    }

    void Update()
    {
        //实现滑动结束后缓慢滑动到目标位置的效果
        //此处如果不设置条件在点击来回滑动时会出现闪烁bug
        if (isDrag == false)
        {
            scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition, targetPos, Time.deltaTime * 4);
        }

    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        isDrag = true;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        //Siki老师写的
        //float posX = scrollRect.horizontalNormalizedPosition;
        //int index = 0;
        //float offset = Mathf.Abs(scrollArray[index] - posX);
        //for(int i=1;i<scrollArray.Length;i++)
        //{
        //    float offsetTemp = Mathf.Abs(scrollArray[i] - posX);
        //    if(offsetTemp<offset)
        //    {
        //        index = i;
        //        offset = offsetTemp;
        //    }
        //}
        //scrollRect.horizontalNormalizedPosition = scrollArray[index];


        isDrag = false;

        //有点小问题，有时候滑动处于中间位置时会滞留在那一区域
        //当前水平位置（0 ~ 1）
        float posX = scrollRect.horizontalNormalizedPosition;

        //位置赋值
        for (int i = 0; i < scrollArray.Length; i++)
        {
            float offset = Mathf.Abs(posX - scrollArray[i]);
            if (offset <= 0.2)
            {
                targetPos = scrollArray[i];
                toggleArray[i].isOn = true;     //相应的toggle按钮也开启
            }
        }

    }

    //通过Toggle移动到指定位置
    public void Page1(bool isON)
    {
        if(isON)
        {
            targetPos = scrollArray[0];
        }
    }

    public void Page2(bool isON)
    {
        if (isON)
        {
            targetPos = scrollArray[1];
        }
    }

    public void Page3(bool isON)
    {
        if (isON)
        {
            targetPos = scrollArray[2];
        }
    }
}

 

6.开关的切换

由于Toggle组件只能设置图片的显示与隐藏，而不能设置图片+文字的切换，所以此处要用脚本来实现

通过Switch 上Toggle组件的isOn开关来控制ON/OFF两个GameObject的激活

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

public class AudioSwitch : MonoBehaviour {

    public GameObject audioON;
    public GameObject audioOFF;
    private Toggle switchToggle;

    // Use this for initialization
    void Start () {
        switchToggle = GetComponent<Toggle>();
        SwitchAudio(switchToggle.isOn);

    }
    
    public void SwitchAudio(bool isON)
    {
       audioON.SetActive(isON);
       audioOFF.SetActive(!isON);
    }
    
}

 

 

7.input Field

PlaceHolder： 显示的是未输入时的默认文字，当有输入后就会disable其中的Text组件

可以在Content Type那设置输入内容，设置为PassWord后输入的文字会自动变成****