码迷,mamicode.com
首页 > 其他好文 > 详细

GUI之ScrollView的使用

时间:2018-11-04 14:10:43      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:范围   nta   例子   可见   one   bubuko   拉伸   hid   分组   

ScrollView

ScrollView是unity提供的一个方便的滚动视图。

组成

技术分享图片
ScrollView由四个部分组成:

ViewPort 和 Content

ScrollView: 视图范围,Content的Mask,控制Content的显示范围。
Content: 滚动视图的内容容器,一般会配合Layout组件做成一个列表。

Scrollbar Horizontal 和 Scrollbar Vertical

Content的水平、竖直滚动条。

ScrollRect详解

ScrollRect是ScrollView最核心的Component。用于控制Content的移动等操作。
Content: 滚动视图的内容容器。
Horizontal: 是否允许Content水平滑动。
Vertical: 是否允许Content竖直滑动。
MovementType: 滑动类型
?1.Unrestricted: 无滑动限制,可以随意进行滑动,允许Content滑出Viewport区域。
?2.Elastic: 弹性滑动,有两个表现
??①允许Content被拖出ViewPort区域,但是在被拖出时会对滑动的距离进行修正,比如Content本来应该向下滑动10单位的距离,现在就只会下滑8单位的距离。模拟出拉动弹簧的距离越长,就会越来越费力的感觉。
??②当Content被拖出ViewPort区域时停止拖动操作,Content会根据Elasticity参数进行回弹,恢复到刚好未被拖出的状态。
??Elasticity: 回弹的参数,数值越大,回弹的越慢。
?3.Clamped: 严格控制Content不会超出ViewPort的范围。
Inertia: 是否有惯性,DecelerationRate参数越大,拖动结束时Content自动滑动的距离越长。
ScrollSensitivity: 滚轮的敏感度,值越大,滚动滚轮时滑动的距离越长。
ViewPort: 滚动视图的视图范围。
Horizontal Scrollbar: 水平滚动条。
?Visibility: 滚动条的可见性。
?1.Permanent: 不管Content多大,永久可见。
?2.Auto Hide: 当Content的宽度小于等于ViewPort时,不可见。
?3.Auto Hide And Expand ViewPort: 当Content的宽度小于等于ViewPort时,不可见。且ViewPort的宽度会随HorizontalScrollbar的宽度和spacing值变化,保持为ScrollView的宽度 - spacing - HorizontalScrollbar的宽度。比如ScrollView宽度为200,HorizontalScrollvar宽度为20,spacing值为-3,那么ViewPort的宽度为200-(-3)-20 = 183。在stretch下表现为W Delta的值为183 - 200 = -17。
?Spacing: ScrollBar和ViewPort之间的间隔。
Vertical Scrollbar: 竖直滚动条,参数含义和Horizontal Scrallbar一样,这里就不介绍了。
技术分享图片

使用

用一个简单的竖向列表做例子。
1.先通过将ScrollRect的Horizontal值设为false限制列表的水平移动,然后给Content添加VerticalLayoutGroup(用于对item的自动竖直布局),ContentSIzeFitter(用于让Content的高度随Content中item的增多而自动增加)。
技术分享图片
2.给里面加几张图片
技术分享图片
3.因为Content的ContentSizeFitter只有Vertical改为了PreferredSize,所有直接添加的图片宽度会被强制修改为Content的宽度,高取图片Sprite的原始高度。
这样子图片就被拉伸的太厉害了,这并不是我们想要的结果,所以我们还希望主动控制每个图片的大小,所以我们给每个图片加上一个LayoutElement,控制图片的大小。
技术分享图片
这样这个列表看着就比较正常了。

GUI之ScrollView的使用

标签:范围   nta   例子   可见   one   bubuko   拉伸   hid   分组   

原文地址:https://www.cnblogs.com/blueberryzzz/p/9903405.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!