[unity] ugui学习笔记 | 乐文库-ag九游会登录j9入口

目录 1.text (文字)1.1 属性1.2 通过脚本设置text的属性 2. image(图片)2.1 属性2.2 注意：图片导入 3.button(按钮)3.1 属性3.2 使用时 4. toggle4.1 toggle与button的不同4.2 onchangevalue属性4.3 ison属性4.4 toggle group 5.dropdown (下拉菜单)5.1 绑定监听事件 7.inputfiled (输入组件)7.1 属性7.2 示例 8.raw image (未加工图片)8.1 显示图片8.2 搭配相机显示相机画面8.3 播放视频 9.canvas(画布)9.1 canvas: render mode属性9.2 canvas scaler: 画布缩放模式 10.scroll view (滚动视图)10.1 movement type: 运动类型10.2 visibility: 能见度10.3 mask: 掩饰 11.slider (滑动器)12.scrollbar (滚动条)12.1 number of steps属性 1.text (文字)

  用来像是文字并对其进行处理，最常用。

1.1 属性 1.2 通过脚本设置text的属性

using unityengine;using unityengine.ui;public class text : monobehaviour{    public text testtext; //定义一个text组件    void start()    {        testtext.fontsize  = 88;               //设置字体大小为88        testtext.fontstyle = fontstyle.normal; //字体样式为普通        testtext.color     = color.blue;       //字体颜色为蓝色    }}

2. image(图片)

  用来控制或显示图片，最常用。

2.1 属性 2.2 注意：图片导入 为了在 image 组件上使用我们想要的图片，我们需要将纹理类型改为：sprite/精灵，才可正常使用。选中导入后的图片，在 inspector 面板上可以进行设置点击 texture type 将其设置为 sprite(2d and ui) 然后点击 apply 应用 3.button(按钮)

  通过点击按钮，执行某件事情，动作等等操作。

3.1 属性 3.2 使用时

使用时可以添加监听函数，来监听按钮事件，当检测到按钮的时间被执行后，则通过函数调用做出响应。

动态监听函数

1 先获取到 目标对象的button 组件2 通过.onclick.addlistener(函数) 的方式进行动态添加3 如函数具有参数，可通过lambda表达式.onclick.addlistener(lambda表达式) 动态添加4 如函数具有参数，可通过委托.onclick.addlistener(delegate {函数;}) 动态添加

    private button testbtn;    void start()    {        gameobject.find("button").getcomponent();        testbtn.onclick.addlistener(onclicktest);        testbtn.onclick.addlistener(() => onclick_parameter("lambda 表达式"));        testbtn.onclick.addlistener(delegate { onclick_parameter("delegate 委托"); });    }    ///     /// 点击函数：带形参    ///     public void onclick_parameter(string arg)    {        print(arg);    }    ///     /// 点击函数：无参    ///     public void onclicktest()    {        print("onclicktest");    }

4. toggle

  项目中，经常会用到按钮，模拟或控制开关，如果使用button，那么开发者就需要自己写判断逻辑，告诉计算机这个按钮的状态。   toggle解决了上述问题，动态的模拟了开关按钮。

4.1 toggle与button的不同 1 graphic ：用来控制 toggle 开关图片的显示/隐藏2 ison ：用来表示 toggle 开关状态3 group ：用来表示 toggle 所属开关组/群（后边会讲到） 4.2 onchangevalue属性

  将需要调用的方法添加至onchangevalue中时，和button相同，每次点击都会调用。

动态监听

using unityengine;using unityengine.ui;/// /// chinar专用测试类/// public class demo : monobehaviour{    void start()    {        //找到组件，动态添加，lambda表达式，精简！        //与手动添加效果一致        gameobject.find("toggle").getcomponent().onvaluechanged.addlistener(ison => print("调用"));    }}

4.3 ison属性

ison 默认状态，就是运行后 开关按钮（toggle）的默认状态

监听ison状态

// 手动public class demo : monobehaviour{    // 监听方法：可手动/动态绑定    public void onclick(bool ison)    {        if (ison)        {            print("开");        }        else        {            print("关");        }    }}// 动态监听public class chinardemo : monobehaviour{    // 监听方法：可手动/动态绑定    //     public void onclick(bool ison)    {        if (ison)        {            print("开");        }        else        {            print("关");        }    }}

4.4 toggle group

  在项目开发时，有时需要单选按钮 / 多个按钮，但仅保证一个开启。此时，如果用 button 实现的话，随着按钮数量的增加，逻辑的复杂性将不断增大。unity 给我们提供了一个非常方便的组件 toggle group，使多个 toggle 依赖它可以极其便利的实现一些需求，例如，单选 / 换页 / 切换背包商城页面，等功能…

使用步骤

1 创建多个开关 2 添加开关组: 创建一个空物体，并添加一个toggle group组件(此时的空物体就相当于一个组),将所有开关设为其子物体(不设置亦可实现功能，是为了规范！),并将所有开关组件中的group 属性，设为空物体组toggle group 3 开关组中组件的关系 toggle group 组件所管控与其关联的所有子开关,当我们按下其中一个开关，其余的都会关闭

5.dropdown (下拉菜单) 5.1 绑定监听事件

vlaue属性：代表选择了列表中的第几项，默认为0，则默认选中第一项，写对应脚本时，也是通过这个value值进行区分选择的具体菜单项。

using unityengine;using unityengine.ui;/// /// chinar例子脚本，用以输出/// public class demo : monobehaviour{    void start()    {        //如果通过代码添加监听事件，外部就无需再做添加        //gameobject.find("dropdown").getcomponent().onvaluechanged.addlistener(consoleresult);    }    ///     /// 输出结果 —— 添加监听事件时要注意，需要绑定动态方法    ///     public void consoleresult(int value)    {        //这里用 if else if也可，看自己喜欢        //分别对应：第一项、第二项....以此类推        switch (value)        {            case 0:                print("第1页");                break;            case 1:                print("第2页");                break;            case 2:                print("第3页");                break;            case 3:                print("第4页");                break;            //如果只设置的了4项，而代码中有第五个，是永远调用不到的            //需要对应在 dropdown组件中的 options属性 中增加选择项即可            case 4:                print("第5页");                break;        }    }}

注意事项

如何解决 重复点击菜单项，可以重复调用响应函数。看这个文章: 重写 dropdown 扩展

7.inputfiled (输入组件)

  用来管理输入的组件，用户的账户、密码、或者聊天时输入的文字等。

7.1 属性 7.2 示例

using unityengine;using unityengine.ui;public class inputfield : monobehaviour{    public inputfield account;//账号输入框    public inputfield password;//密码输入框    // 初始化输入框    void start()    {        account = gameobject.find("account").getcomponent();        password = gameobject.find("password").getcomponent();    }    // 绑定到登录按钮上    public void login()    {        print("账号：" account.text "  密码：" password.text);    }}

8.raw image (未加工图片)

  该组件用于显示纹理贴图，常与render texture结合使用，可以搭配相机使用，用来播放视频以及显示相机画面。

8.1 显示图片

  raw image的属性窗口中texture属性为显示图片的引用，将导入的图片直接拖拽放入该属性，即可显示图片。

8.2 搭配相机显示相机画面

  该操作需要搭配render texture渲染纹理来进行使用，将该组件分别添加引用至想要显示图像范围的相机与raw image组件中。

效果

8.3 播放视频 创建raw image对象，创建render texture对raw image对象添加video player组件导入视频并添加至组件相应位置将render texture添加到raw image和video player组件 9.canvas(画布)

  所有的ui组件都是canvas的子集，并且所有组件都要放入到canvas中，否则不能正常显示。

9.1 canvas: render mode属性 screen space – overlay: 屏幕空间覆盖模式 画布下的所有ui永远位于屏幕之前，屏蔽相机渲染场景显示的元素screen space – camera: 相机模式 该模式canvas和相机有一定的距离，可以在相机和canvas之间放置一些模型或粒子特效world space: 世界模式 canvas和普通的3d物体一样，可以控制大小、旋转、缩放等。 9.2 canvas scaler: 画布缩放模式 constant pixer size: 恒定像素 该模式下的ui以像素为大小，同样的像素在不同的分辨率下尺寸不同。scale with screen size: 屏幕尺寸比例 该模式下ui元素的位置与大小按当前屏幕分辨率和设置的分辨率去相对值。若当先屏幕分辨率大于小于设置屏幕分辨率，则canvas按照屏幕分辨率来布局，然后放大缩小来适应屏幕，会导致ui被不均匀的拉伸或缩小，导致界面混乱。constant physical size: 恒定尺寸 该模式中ui以像素为大小，在不同的分辨率下尺寸不同 10.scroll view (滚动视图)

  当有大量元素需要显示时，那么固定的一篇区域一定无法全部显示，所以就需要一个可以滚动的区域进行展示。

10.1 movement type: 运动类型 unresticted: 拖动结束后松开滚动条，则它会根据惯性一直做减速运动，直到速度为0elastic: 拖动结束松开滚动条后，他会根据弹性变量进行回弹clamped: 拖动结束松开滚动条后，如果触碰到最上面或者最下面时，不会有任何动作。 10.2 visibility: 能见度 permanent: 永久显示，滚动条将会一直显示auto hide: 自动隐藏，只有在content不超出viewport的范围的情况下才会隐藏auto hide and expand viewport: 自动隐藏，并扩展窗口 10.3 mask: 掩饰

  无论在content中添加多少张图片，超出viewport的部分都会被隐藏掉，其组件就是mask，挂载在viewport对象中。

11.slider (滑动器)

  是一个滑动条组件，可用来显示进度，也可当作进度条。只需要隐藏起handle组件，再修改其样式或添加文本，就可以达到进度条的效果。

using system.collections;using system.collections.generic;using unityengine;using unityengine.ui;public class slidercontroller : monobehaviour{    private slider slider;    private text text;    // start is called before the first frame update    void start()    {        slider = gameobject.find("slider").getcomponent();        text = slider.transform.find("text").getcomponent();        slider.value = 0;        text.text = " ";    }    // update is called once per frame    void update()    {        if (slider.value < 100)        {            slider.value  = time.deltatime;            text.text = (slider.value / 0.1).tostring("f")   "%";        }    }}

12.scrollbar (滚动条)

  滚动条组件，类似于视频播放器或者音乐播放器中，当前的播放进度。

12.1 number of steps属性

number of steps属性   当该值为1时，则代表滑块可以在该滚动条中任意位置，如果该值不为1，那么滑块移动时，就按照百分比的方式移动。   如果值为2，那么每次移动距离 2/100=1/50，每次移动1/50的长度。如果值为3，每次移动距离3/100=1/33，每次移动1/33的长度。