zoukankan      html  css  js  c++  java
  • uGUI练习(六) ScrollView

    练习目标

    练习uGUI的滑动组件

    一、相关组件

    • ScrollRect
    • Mask
    • Grid Layout Group
    • Scrollbar

    二、步骤

    1、创建一个Panel,命名为ScrollRect,添加 ScrollRect组件

    image

    2、在ScrollRect下创建一个子Panel,命名为Grid,添加Grid Layout Group 组件

    image

    3、在Grid下,创建一个Image,按Ctrl+D ,Copy出多个Image

    image

    4、在Scene视图,可以看到Image的排列(注意:排列成了两行)

    image

    5、让Grid下的Image排列成一行;做法:拉伸Grid的长度,让它变长

    image

    6、在Game视图,看到Image已经超出了Scroll Rect

    image

    7、给Scroll Rect添加Mask组件

    image

    8、添加完Mask组件之后,Image就不再超出了,但此时仍然不能Drag它

    image

    9、设置参数

    image

    10、设置完参数之后,就能Drag了

    Scroll View-1

    2.2 添加Scrollbar

    11、创建一个Panel,命名HScrollbar,添加 Scrollbar 组件

    image

    12、在HScrollbar下 创建一个空的GameObject,命名Stretch ,添加 Rect Transform组件,设置Stretch为All

    image

    13、在Stretch 下 创建一个Image,命名 Handler

    image

    14、为HScrollbar设置好Handler参数

    image

    15、同时为Scrollbar设置Horizontal Scrollbar

    image

    三、Scroll View 效果

    Scroll View

    四、补充

    本周(2014年11月的最后一周),Unity4.6正式版发布了,我在新版本里用上面同样的步骤试用了ScrollView是可行的,但也发现有几个地方可能会让初学者迷惑,这里指出。

    步骤1:

    默认创建一个Panel是Stretch的,没有Width和Height,也就是它会撑满全屏幕

    image

    我们可以手工缩放它的大小成我们需要的,但此时它具有Anchor 特性,就是会根据屏幕来拉伸

    image

    所以建议,把panel的布局方式改一下,这里我选择的是Middle – Center,这样就可以控制Panel的大小为绝对值了

    image

    步骤2:

    有可能你创建出来的Scroll,滑动不了内容。表现为:明明Grid下有很多Image,但它就是只能滑动那么一点点。(—!gif工具突然不能录制了!)

    这是因为你的Grid的宽度不够!如所下图

    image

    我知道有两个方法:

    方法1、给Grid选择固定列数,比如我有10个child,我就填10,填完之后,Grid Rect的宽度会自动帮你计算出来

    image

    方法2、自己计算,比如Grid下有10个Image,每个100x100,它们之前的spacing是x:10,y:10,那么我可以这样填

    image

    总之就是要把Grid下所有的Item都在同一直线上

    image

    image

    步骤2.2

    我在4.6正式版中,发现可以直接创建一个Scrollbar,就不需要手工的配置了,比较方便。

    scrollview

    附注

    Unity5.0Beta UIMask bug

    有同学发现在unity5.0 beta片UI的mask组件有bug

    bug1

    给panel添加mask后,chid组件全部不可见,可能是mask把它们alpha设置成0了

    bug2

    同样的,还有同学在做背包时,发现click事件很容易被当作scroll事件,所以建议大家在做UI时,更新到4.6的正式版。

  • 相关阅读:
    P1351 联合权值
    c++ 贪心讲解大礼包
    取石子 找规律
    树 dfs暴力判环 题意转化
    P2519 [HAOI2011]problem a
    P1640 [SCOI2010]连续攻击游戏 二分图最大匹配 匈牙利算法
    P2756 飞行员配对方案问题 二分图匹配 匈牙利算法
    cogs 49. 跳马问题 DFS dp
    cogs 2. 旅行计划 dijkstra+打印路径小技巧
    cogs 1440. [NOIP2013]积木大赛 贪心水题
  • 原文地址:https://www.cnblogs.com/zhaoqingqing/p/3973167.html
Copyright © 2011-2022 走看看