美文网首页
使用UGUI建立Scroll List和Scroll Grid

使用UGUI建立Scroll List和Scroll Grid

作者: 达屯菜狗 | 来源:发表于2019-06-27 18:34 被阅读0次

最近在做一个Demo演示程序,因为全程使用Playmaker,所以需要在不依靠代码的情况下拼出具有Scroll List和Scroll Grid功能的界面,于是总结一下防止自己忘记。

备注:UGUI自己提供的Scroll View 在不依靠代码的情况下不太好用,所以我们使用Scroll Rect组件来进行制作。

实现步骤

1.我们在场景中新建一个Image命名为Scroll,当然你也可以新建空物体或者Panel,我这里是为了调试方便。

2.为Scroll添加Scroll Rect组件和Mask组件。

Scroll Rect组件和Mask组件

3.在Scroll下创建一个子物体Image命名为Grid

添加子Grid

,这里带有Image组件也是为了调试方便。

4.将Grid拖到Scroll中Scroll Rect组件内的Content内容里,

由此岔开两条分支,分别制作Scroll List和Scroll Grid如下:

    一、Scroll List

        1.根据你的需求为Grid添加竖直组组件或水平组组件和内容适配组件,我这里以竖直组件为例制作。

竖直组件和内容大小适配组件

        2.调整Grid的Pivot到你想要的效果,默认初始是(0.5,0.5),一般情况下我们都会让Grid的第一个子对象在最上(左)方且后续子对象自动排列,此时将数值调整为(0.5,1)或(0,0.5)。

Grid的Pivot

        3.至此,竖直滚动列表就做好了,你可以在Grid下加入同样的单元物体了。(记得自己设置Scroll内的各种滑动和弹性参数,这里就不讲解啦。)

    二、Scroll Grid

        1.只有一点与Scroll List不同,就是为Grid添加的不是竖直组组件或水平组组件,而是Grid Layout Group组件。

Grid Layout Group组件

        2.现在你就可以在Grid中建立类似背包的一个界面了,记得按照自己的需求调整参数哦。

以上,就是记录关键部分的如何使用UGUI建立Scroll List和Scroll Grid。

相关文章

网友评论

      本文标题:使用UGUI建立Scroll List和Scroll Grid

      本文链接:https://www.haomeiwen.com/subject/smxdcctx.html