Unity 探索 -- UI 篇

最近又开始使用 Unity 引擎，以前学习都是囫囵吞枣的一下全吞下去。基本都忘了，既然又开始使用 Unity ，那么就系统的学习一下。
仅记录 不同的、易忘记 的部分，以及 不好理解 的部分

Unity UI 模块探索

UI 模块基础

• UI 中的层的顺序影响图层的顺序

图层顺序 图层顺序

• Rect Transform

Rect Transform 是所有 UI 的最基础的组件，合理的利用约束布局，会使创建的 UI 有很强的适应性。

Rect Transform 设置面板

代码控制 Rect Transform：

//Rect Transform 继承自 Transform
//常用的数据
    // Use this for initialization
    void Start()
    {
        ResizeWithParent(m_text.gameObject.GetComponent<RectTransform>()
            ,new Vector2(10,20),new Vector2(30,40));
    }

    /// <summary>
    /// 根据父节点调整位置
    /// </summary>
    /// <param name="tran">本节点</param>
    /// <param name="leftBottom">左、下的边距</param>
    /// <param name="RightTop">右、上的边距</param>
    public void ResizeWithParent(RectTransform tran, Vector2 leftBottom, Vector2 RightTop)
    {
        tran.anchorMin = new Vector2(0, 0);
        tran.anchorMax = new Vector2(1, 1);
        tran.offsetMin = leftBottom;
        tran.offsetMax = RightTop;
    }

以上代码结果：

    void Start()
    {
        ResizeHeightWithParentTopEdge(m_text.gameObject.GetComponent<RectTransform>()
            , 60);
    }
    /// <summary>
    /// 根据父节点的顶部，调整宽度
    /// </summary>
    /// <param name="tran">本节点</param>
    /// <param name="height">高度</param>
    public void ResizeHeightWithParentTopEdge(RectTransform tran, float height)
    {
        tran.pivot = new Vector2(0, 1);
        tran.anchorMin = new Vector2(0, 1);
        tran.anchorMax = new Vector2(1, 1);
        tran.offsetMin = new Vector2(0, -height);
        tran.offsetMax = new Vector2(0, 0);
    }

以上代码的结果：注意 tran.offsetMin = new Vector2(0, -height); 符号是负的。

修改结果

Text

Text 只能显示有限的文字，超出显示范围的文字不会显示滑动条

Text 设置面板

Text 完整 API 参考：https://docs.unity3d.com/ScriptReference/UI.Text.html

常用代码相关操作：

    public Text m_text;

    /// <summary>
    /// 设置 Text 的字体相关信息
    /// </summary>
    /// <param name="fontName">字体的名字</param>
    /// <param name="fontSize">字体的大小</param>
    /// <param name="fontStyle">字体的风格</param>
    public void setFont(string fontName,int fontSize, FontStyle fontStyle)
    {
        m_text.font = new Font(fontName);
        m_text.fontSize = fontSize;
        m_text.fontStyle = fontStyle;
    }

    /// <summary>
    /// 获取 Text 的文本
    /// </summary>
    /// <returns></returns>
    public string getText()
    {
        return m_text.text;
    }

    /// <summary>
    /// 设置显示的文本
    /// </summary>
    /// <param name="text">需要显示的文本</param>
    public void setText(string text)
    {
        m_text.text = text;
    }

Image

Image 的可设计的属性较少，如果需要调整图片大小，需要修改 Rect Transform 的属性

Image 设置面板

添加图片之后，设置选项会增加

Image 设置面板

     // Update is called once per frame
    void Update()
    {
        CoolTime(Image.FillMethod.Radial360, 5);
    }

    /// <summary>
    /// 冷却时间的环
    /// </summary>
    /// <param name="fillMethod">填充方式</param>
    /// <param name="fillOrigin">起始轴 0，1，2，3 (n % 4)分别表示下、右、上、左</param>
    public void CoolTime(Image.FillMethod fillMethod, int fillOrigin)
    {
        m_image.fillMethod = fillMethod;
        m_image.fillOrigin = fillOrigin;
        if (m_image.fillAmount > 0)
        {
            m_image.fillAmount -= 0.01f;
        }
        else
        {
            m_image.fillAmount = 1;
        }
    }

代码运行后结果：

运行后的结果 运行后的结果

Raw Image

Raw Image 也就是 Image 的缩水版。

Raw Iamge 设置面板

代码详细参考：https://docs.unity3d.com/ScriptReference/UI.RawImage.html

Button

Button 一般直接设置好就行了，代码里面用的较多的也就是 Click 事件的编写。

Button 的 Transition 属性分为四种：None、Color Tint、Sprite Swap、Animation

四种模式

• None：什么都没有。
• Color Tint：状态变化体现在颜色变化上。
• Sprite Swap：通过更换图片来体现不同的状态
• Animation：配合 Animation 模块来体现不同的状态。（很强大，可以实现很平滑的动画）

Button 设置面板

Toggle

Toggle 也就是 Button 的加强版。跟 Button 对比，Toggle 多了一个显示状态的图片，以及多了一个状态值 is on

Toggle 设置面板

• Group：在同一个组里的 Toggle 同时只能激活一个。
• Graphic：当 Toggle 在 off 状态时，Toggle.graphic 的 alpha 等于零。

Slider

Slider 去掉 Interactable 可是用来制作进度条、血条、或者技能读条之类的东西。

Slider 设置面板

代码详细参考：https://docs.unity3d.com/ScriptReference/UI.Slider.html

Scrollbar

Scrollbar 也就是 Slider 的同素异形体（借用化学名来理解 _(:3 」∠ )_ ）。

• 适用于根据内容来变化的滚动条之类的东西。

Scrollbar 设置面板

代码详细参考：https://docs.unity3d.com/ScriptReference/UI.Scrollbar.html

Dropdown

由 一个 Dropdown 脚本加上一个 Template（下拉模板） 组合在一起

Dropdown 设置面板

     public Dropdown m_dropdown;

    // Use this for initialization
    void Start()
    {
        SetOptions();
    }


    /// <summary>
    /// 把选项设置成 0 - 10
    /// </summary>
    public void SetOptions()
    {
        m_dropdown.options.Clear();

        List<Dropdown.OptionData> dropList = new List<Dropdown.OptionData>();

        for (int i = 0; i < 10; i++)
        {
            Dropdown.OptionData item = new Dropdown.OptionData(i.ToString());
            dropList.Add(item);
        }

        m_dropdown.AddOptions(dropList);
    }

    /// <summary>
    /// 在 console 输出选项的序号（非内容）
    /// </summary>
    public void getValue()
    {
        Debug.Log(m_dropdown.value);
    }

结果：

结果图 结果图 结果图

Input Field

Input Field 由两个子 Text 组成，其中 Placeholder 显示提示的文本，Text 显示输入的文本。

Input Field 设置面板

• Content Type 可以设置输入的类型
• Line Type 可设置成处理多行输入

代码处理：

    public InputField m_inputField;
    /// <summary>
    /// 结束时，获取输入的文本
    /// </summary>
    public void InputOver()
    {
        Debug.Log("Input over and the string is : " + m_inputField.text);
    }

结果图：

结果图

由于显示只显示两行，所以后面的文字没有显示出来，但实际上已经获取到了。

Canvas

非 Root Canvas 不能启用 Canvas Scaler 脚本，主要用于做 UI 的根节点。

Root Canvas 设置界面

Panel

Panel 也就是一个包含 Image 组件的面板，没有专门的设置面板，一般用于管理包含在其节点下的子物体。

Scroll View

默认 Scroll View 有一个 Viewport 用来记录显示窗口的内容，另外有两个 Scrollbar，分别表示横着的，和竖着的滚动条。其中 Viewport 中的Mask 组件是用来确定内容的显示的范围的。

Scroll View 设置面板

Event System

与输入有关的设置

Event System 设置面板