2020-07-22 UGUI基础后续和进阶
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学习,加油ヾ(◍°∇°◍)ノ゙