Unity学习之UGUI(二)

六、Image

1、作用

图像控件,用于显示Sprite的关键组件,除了背景图等大图,一般都是使用Image来显示UI中的图片元素

2、主要参数

在这里插入图片描述
在这里插入图片描述

(1)Image Type——Sliced(拉伸)

Sliced-切片模式,9宫格拉伸,只拉伸中央十字区域(适合需要横向或者纵向拉伸的图形)
在这里插入图片描述

(2)Image Type——Tiled(重复)

Tiled,平铺模式,重复平铺中央部分,适合一些用于做底部纹理的图片
在这里插入图片描述

(3)Image Type——Filled(填充)

Filled,填充模式,有不同的填充类型,从无到有或者从有到无,可以用于血条等图形
在这里插入图片描述
Fill Method,填充类型
Fill Origin,填充原点
Fill Amount,填充量
Clockwise,顺时针方向
Perserve Aspect,保持宽高比

3、代码控制

Image image = this.GetComponent<Image>();
image.fillAmount = 0.5f;

七、Text

1、作用

用于文本内容显示

2、主要参数

在这里插入图片描述

在这里插入图片描述

(1)富文本

类似于html,可以在文本内容中进行文本格式的设置

3、边缘线和阴影

(1)边缘线

在这里插入图片描述

(2)阴影

在这里插入图片描述

4、代码控制

Text text = this.GetComponent<Text>();
text.text = "你好";

八、RawImage

1、作用

RawImage是原始图像组件,用于显示任何纹理的关键组件。
一般RawImage用于显示大图(背景图、不需要打入图集的照片、不需要网络下载的图等等)

2、主要参数

在这里插入图片描述
在这里插入图片描述

3、代码控制

RawImage rawImage = this.GetComponent<RawImage>();
rawImage.texture = Resources.Load<Texture>("ui_TY_lvseshuzi_00");

九、Button

1、作用

Button是按钮组件,是玩家用于交互的关键组件
Button主要由两个对象组成
父对象:Button依附对象,同时挂载了一个Image组件,作为按键背景图
子对象:按钮文本,挂载一个Text组件,如不需要可以删除

2、主要参数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、代码控制

    void Start()
    {
    
    
        //代码控制
        Button button = this.GetComponent<Button>();
        button.interactable = true;
        button.transition = Selectable.Transition.None;
        //添加按钮事件
        button.onClick.AddListener(ButtonClick);
        //移除按钮事件
        button.onClick.RemoveListener(ButtonClick);
    }

    void ButtonClick()
    {
    
    
        print("1");
    }

十、Toggle

1、作用

Toggle是开关组件,用于处理玩家单选框多选框相关交互的关键组件
多个Toggle,默认是多选框,可以通过配合ToggleGroup组件制作为单选框
默认创建Toggle包含4个对象组成
父对象:Toogle组件依附
子对象:背景图(必备),选中图(必备),说明文字(可选)

2、主要参数

在这里插入图片描述
在这里插入图片描述

3、代码控制

    void Start()
    {
    
    
        Toggle toggle = this.GetComponent<Toggle>();
        //打印当前的toggle是否被选中
        print(toggle.isOn);

        //通过ToggleGroup找出当前哪个toggle被选中
        ToggleGroup toggleGroup = this.GetComponent<ToggleGroup>();
        foreach (var item in toggleGroup.ActiveToggles())
        {
    
    
            print(item.name + " " + item.isOn);
        }
        //监听事件添加
        toggle.onValueChanged.AddListener(Change);
    }

    public void Change(bool isOn)
    {
    
    
        print("状态改变" + isOn);
    }

十一、InputField

1、作用

InputField,是UGUI中处理玩家文本输入相关交互的关键组件
默认创建包含3个对象
父对象:InputField组件依附对象,同时还挂载了一个Image组件作为背景图
子对象:文本显示组件(必备),默认显示文本组件(必备)

2、主要参数

在这里插入图片描述
在这里插入图片描述

(1)Content Type,输入的字符类型限制

在这里插入图片描述
在这里插入图片描述

(2)Line Type,行类型

在这里插入图片描述

3、代码控制

void Start()
    {
    
    
        //获取输入的文本内容
        InputField inputField = this.GetComponent<InputField>();
        string input = inputField.text;

        //监听事件
        inputField.onValueChanged.AddListener(ChangeInput);
        inputField.onEndEdit.AddListener(EnInput);
    }

   public void ChangeInput(string str)
   {
    
    
        print("改变的输入内容"+"  "+str);
   }

   public void EnInput(string str)
    {
    
    
        print("结束时输入内容" +"  "+ str);
    }