• GUI之ScrollView的使用


    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,控制图片的大小。

    这样这个列表看着就比较正常了。

  • 相关阅读:
    Nginx之keepalived高可用工具
    Linux安装Nginx
    Nginx解决服务器宕机问题
    前端知识小札
    SQL入门(3):定义约束/断言assertion/触发器trigger
    SQL入门(2): Oracle内置函数-字符/数值/日期/转换/NVL/分析函数与窗口函数/case_decode
    Excel VBA入门(8): 快捷键/内置常量/代码调试/错误处理/代码优化
    小学生都看得懂的C语言入门(6): 字符串
    小学生都看得懂的C语言入门(5): 指针
    小学生都看得懂的C语言入门(4): 数组与函数
  • 原文地址:https://www.cnblogs.com/blueberryzzz/p/9903405.html
Copyright © 2020-2023  润新知