2020-07-22 UGUI基础后续和进阶

2020-07-22  本文已影响0人  JOJO的冒险奇妙

2020/7/22

今天首先学习了UGUI基础的后续内容,然后涉及到一些进阶内容

这里补充两个基础控件

1、ScrollBar(滚动条)

和Slider控件类似,同样有滑动区域和滑块,创建出来后会有ScrollBar脚本组件

Scrollbar脚本组件

Handle Rect:可滑动的区域

Direction:滑动的方向(默认是从左到右)

Value:当前滑块所处位置的值

Size:滑块占整体大小的百分比,介于0-1;

Number Of Steps:可滑动区域分为几步,如果是0和1可以随意滑动

On Value Changed(Single):和Slider相似,也是值产生变化时调用

2、Scroll View控件

Scroll View创建出来后,会有一个Viewport的子物体表示可视范围,Viewport又会有一个Content子物体表示显示的内容,当显示的内容大于可是范围就会有滚动条。水平和竖直滚动条的出现是因为Scroll View的另外两个子物体Scrollbar Horizontal 和Scrollbar Vertical,当然删去这两个子物体就能不出现滚动条,但是ScrollView依然能通过鼠标滚动。

Scroll Rect组件

Content:默认会选择自己的子物体

Movement Type:表示滚动的模式,默认是Elastic,表示有弹力的,还有Unrestricted,表示不受限制的,Clamped,表示夹紧的,滑动条到达两头后不会再移动

Elasticity:表示弹力大小

Inertia:表示是否有惯性

Deceleration Rate:表示减速率

Scroll Sensitivity:表示滚轮灵敏度

Visibility:表示滚轮的可见方式

Spacing:表示与两个滚动条连接处的间距

Rect Transform

用UI控件搭建界面时,要考虑控件的位置,以及UI控件在不同屏幕上的适配,Rect Transfrom就是用来帮助确定大小和在界面当中位置的。Rect Transfrom继承于Transform。

1.中心点Pivot

UI控件上的蓝色小圆圈就是中心点,鼠标拖动UI控件进行旋转、缩放、对齐的时候都会以该点作为对照点

中心点

2.锚点Anchor

锚点是控件上的四个控制点,类似一个×,当父物体进行缩放时,子物体相对锚点四个控制点的距离是不变的。

当锚点呈点状且处于父物体的中心点时,不管父物体如何缩放,子物体相对锚点的位置不变,大小也不变。

当锚点呈线状时,比如,水平线状,父物体竖直方向缩放,子物体相对锚点距离不变,且大小也不变,父物体水平方向缩放时,子物体会按父物体缩放的比例进行缩放,缩放程度受线长影响。

当锚点与组件本身重合时,会同父物体进行等比缩放

当锚点与父物体重合时,子物体会按父物体缩放的比例进行缩放

UGUI进阶

一、Canvas的三种渲染模式

Canvas可以通过RenderMode来设置Canvas的渲染模式,共有三种,分别是Screen Space-Overlay,Screen Space-Camera,World Space。

1、Screen Space-Overlay

在此模式下Canvas显示的UI控件会始终在Game视图的最前面。

2、Screen Space-Camera

此模式下,UI的显示会和摄像机有关,需要设置一个UI Camera,可以在UI前方显示3D模型和粒子系统,其中Plane Distance,可以设置Canvas和摄像机的距离。在摄像机和Canvas中间的物体会显示,在Canvas后面的将会被覆盖。

3、World Space

此模式下,Canvas可以当成3D物体进行操作,值得注意的是Canvas的实际大小是很大的,一般需要缩放。

二、UGUI布局组件

在父物体添加布局组件,所有子物体会进行布局管理,不包括孙物体。布局控件只能添加一个。

1、Horizontal Layout group水平布局控件

水平布局控件

Padding:边距

Spacing:行距

Child Alignment:除去边距后中间空余部分子物体的排列模式

Child Controls Size:设置子物体大小可控

Child Force Expand:自适应宽高,是否强行扩大布局元素以填充剩余可用空间,需要勾选Child Controls Size才能起作用

2、Vertical Layout group垂直布局控件

和水平布局控件相似,不再赘述

3、Grid Layout group网格布局控件

网格布局控件

Cell Size:单元格大小,网格布局调节子物体自身的缩放,只能通过单元格大小

Start  Corner:第一个元素开始的位置

Start Axis:元素排列沿着哪个轴

Constraint:填充方式,可以自适应,也可以固定行列

3、事件

public Button btn;

void Start () {

        btn.onClick.AddListener(Click);

}

    private void Update()

    {

        if (Input.GetKeyDown(KeyCode.Space))

        {

            btn.onClick.RemoveListener(Click);

        }

    }

    public void Click()

    {

        Debug.Log("1234");

    }

上面的代码可以为引用的按钮增加点击事件,按空格键可以删除点击事件。

明天还有一天的UI学习,加油ヾ(◍°∇°◍)ノ゙

上一篇下一篇

猜你喜欢

热点阅读