Unity:UGUI之Scroll View剖析Demo,游戏等级UI设计,Layout,Toggl

知识点:

1.UI的基本控件

2.Toggle的使用

3.自动布局,网格自动布局的使用 

 


Scroll View 是UGUI中最复杂的复合组件,也是由多个控件组成,当然在自定义中可以将某些控件剪裁以达到自己需要的效果.

UGUI中默认的Scroll View:

没错,一个Scroll View组件默认的就是这么多元素组成.其中包括视图窗口,两个拖动条bar(可剪裁)

其中要达到可以拖动的效果的前提条件就是内容视图一定大于显示窗口的大小,才有将未显示部分拖动而显示出来.

其中 Viewport 表示显示视图,Content是元素集合,通常需要用Layout Group来自动排版,里面包含了元素集合;

Scrollbar Horizontal 水平拖动条

Scrollbar Vertical 竖直拖动条

在自定义中,一般拖动条用到较少,而是通过代码来实现拖动.因此经常被剪裁掉.

Scroll View 默认的组件

Content : 内容的集合,通常用layout Group自动布局,自定义的时候需要手动拖进来;

Horizontal: 是否可以水平拖动;

Vertical: 是否可以竖直拖动

Movement Type : Unrestricted,Elastic,Clamped; 分别对应为:不受限制的,有弹性的,钳制的

如果选择有弹力的,还可以设置弹力系数.

Inertia:惯性,是否开启;

Vieport是自定义时必须拖入的,

拖动条可选;

还有一个重要的Mask,遮罩,是否用视图窗口遮罩遮住未显示区域

游戏等级滑块的实现:


Grid:为要显示的视图窗口,有Scroll Rect 和Mask控件,Scroll实现卷轴的功能,Content内填入内容集合;Mask控件遮罩遮住多余不能现实的内容;

Content:是元素的集合,一般要添加网格布局控件来控制排版

cell size:是每个内容单元的限制大小.(小技巧)先用空物体充当容器填满,

再在此容器内具体布局每个单元的内容;这样元素之间的间隔好控制.此时容器之间都是紧挨着的,没有空隙.在容器内再布局背景实现元素的大小布局.


Toggle Group:


这个就是典型的Toggle自定义的应用.

在这里面需要注意的就是,Graphic 的image其实就是控制那片绿叶是否显示表示被选中了.

这里的监听直接就在面板中操作了.监听了是否有选中该Toggle,

如果isOn为真,则执行Grid身上的ScrollControl的MovePageXXX方法;

源码资源下载:点击打开链接


猜你喜欢

转载自blog.csdn.net/u013509878/article/details/80157100