UGUI控件的一些用法实例（按钮事件、滑动条、下拉框、基本动画）

UGUI Practice Record

Scene 1:

一个按钮和一个text，点击按钮后text改变，再次点击，text恢复，改变屏幕分辨率，按钮适配中间，text适配左上角

• 在Unity中创建一个Button和Text控件，设置其Rect Transform保证自适应
• 创建一个C#脚本 Will_change_text.cs
• 增加一个方法void onclick()，记得设成public以供调用

public void onclick()
{
    Text curText = GameObject.Find ("will_change").GetComponent () as Text;
    if (curText.text == "hello unity") curText.text = "I have changed!";
    else curText.text = "hello unity";
}

• 将上述脚本拖入Text控件绑定
• 在Button中绑定Onclick事件所对应的的控件，并选取脚本中的onclick()方法
• 运行程序，点击按钮即可看见Text内容改变

Scene 2:

一个滑动条和一个text, 可以拖动滑动条，text可以实时显示对应的值 （最小值到最大值分别对应1~100）

• 在Unity中创建一个Slider和Text控件
• 将Text中的文本内容设置为数字1,并设置Slider最大值为100
• 创建一个C#脚本 Slider_trigger.cs
• 增加一个方法

public void slide_trig()
{
    Text numberText = GameObject.Find ("number").GetComponent ();
    Slider slide = GameObject.Find ("text_slider").GetComponent ();
    int curNumber = (int)slide.value;
    numberText.text = curNumber.ToString ();
}

• 将上述脚本拖入Text控件绑定
• 在Slider中绑定On Value Changed事件所对应的的控件，并选取脚本中的slide_trig()方法
• 运行程序，拖动滑动条即可看见Text内容从1变化到100

Scene 3:

一个按钮和一张图片，点击按钮切换图片，再次点击，图片恢复

• 在Unity中创建一个Button和Image控件
• 设置Image的Source
• 创建一个C#脚本 Picture_change.cs

public void image_change()
{
    Image img = GameObject.Find("change_image").GetComponent() as Image;
    string spritePath = string.Format("pic2");
    Sprite oldSprite = Resources.Load(spritePath,typeof(Sprite)) as Sprite;
    if (img.sprite == oldSprite) 
    {
        spritePath = string.Format ("pic1");
        img.sprite = Resources.Load (spritePath, typeof(Sprite)) as Sprite; 
    } 
    else 
    {
        spritePath = string.Format ("pic2");
        img.sprite = Resources.Load (spritePath, typeof(Sprite)) as Sprite; 
    }
    //can be refactor follow if there are many picture
    /*
    Image img = GameObject.Find("change_image").GetComponent() as Image;
    string spritePath = string.Format(pictures[index]);
    index = (index + 1) % pictures.size();
    img.sprite = Resources.Load (spritePath, typeof(Sprite)) as Sprite;
    */
}

• 将上述脚本拖入Image控件绑定
• 在Button中绑定Onclick事件所对应的控件，并选取脚本中的image_change()方法
• 运行程序，点击按钮即可看见Image内容改变

Scene 4:

一个下拉框和一个text，切换下拉框，text改变成对应的name

• 在Unity中创建一个Text和Dropdown控件，并设置Dropdown的下拉列表选项与Text内容
• 创建一个C#脚本 drop_change_text.cs 并实现drop_text()方法

public void drop_text()
{
    Dropdown curDrop = GameObject.Find ("dropToChange").GetComponent () as Dropdown;
    GameObject.Find ("Drop_Text").GetComponent ().text = curDrop.captionText.text;
}

• 将上述脚本拖入Text控件绑定
• 在Dropdown中绑定On Value Changed事件所对应的控件，并选取脚本中的drop_text()方法
• 运行程序，点击按钮即可看见Text内容改变

Scene 5:

一个勾选框，默认状况不勾选，点击勾选，再次点击不勾选
* 在Unity中创建一个Toggle控件，并设置Is On属性

Scene 6:

在主界面加一个button，点击button打开一个面板，面板要有关闭功能
* 在Unity中创建一个Button和Panel控件
* 创建一个C#脚本 ControllPanel.cs

public void open_or_close_panel(){
    Text curText = GameObject.Find ("Panel_Display_Text").GetComponent ();
    Image img = GameObject.Find ("Panel_Image").GetComponent ();
    if (curText.text == "Display") 
    {
        img.enabled = true;
        curText.text = "Hide";
    } 
    else 
    {
        img.enabled = false;
        curText.text = "Display";
    }
}

• 将上述脚本拖入Panel控件绑定
• 在Button中绑定OnClick事件所对应的控件，并选取脚本中的open_or_close_panel()方法
• 运行程序，点击按钮即可打开或关闭面板
• 当然也可以为该面板添加一个打开和关闭的动画以平滑效果