Unity实现滑动列表(一)

Step1:创建UI结构

在这里插入图片描述
先要有一个框架frame,框架下包括两个东西,一个是列表list,一个是滑动条scrollbar。
具体的列表项grid放在list的下面

Step2:为frame添加组件

为frame添加Scroll Rect组件和Mask组件
添加完组件后,Mask组件就这样放着就行了
但是需要对Scroll Rect组件进行如下操作:
1.将list拖入到Content里面去:这是说明list是我们要滑动的列表的对象
2.将Horizontal的勾去掉:因为我们要做的是上下滑动,如果要做左右滑动,就是去掉Vertical的勾
3.将Scroll Bar拖到Vertical Scrollbar里面去:这是将滑动条与滑动对象绑定起来
如果需要使超出某一范围的内容不可见的话,就要给frame上添加两个组件。
Image和Mask。
把Mask的Show Mask Graphic取消勾选,Image是不会显示图片的。
然后在ScrollRect里的ViewPort,把自身放进去,那么在自身范围内的内容才回可见了。
在这里插入图片描述

Step3:为list添加组件

首先要将list的锚点改为Top-Center,锚点的Y值设为1,不然的话,每次进去列表的初始位置不会在列表顶部
在这里插入图片描述
然后为list添加Grid Layout Group组件和Content Size Fitter这两个组件
Grid Layout Group组件说明:
在这里插入图片描述
Padding:上下左右的填充值
Cell Size:每个列表项的长宽大小
Spacing:列表项之间的间隔,X为左右两个的间隔距离,Y为上下两个的间隔距离
Start Corner:列表开始的位置,一般都是左上角
Start Axis:列表开始的轴,也就是决定列表是竖着排还是横着排
child Alignment:列表项的对齐方式,左对齐右对齐居中对齐啥的
Constraint:Flexible是自适应,另外两个选项是固定行数或固定列数的
Content Size Fitter组件说明
在这里插入图片描述
这个是设置水平和垂直方向的自动适配的。
Unconstrained与Preferred Size的差别:
Unconstrained:无论list下面有多少个grid,list的尺寸都是一个grid大小的尺寸。
Preferred Size:list的尺寸等于恰好可以包含住所有的grid的尺寸。
所以,当要做垂直滑动的时候,就必须要将Vertical Fit设置成Preferred Size,不然list在垂直方向的长度只有1个grid的长度,会造成滑动条无法滑动的现象出现。

这样,滑动列表就实现完成了。
在这里插入图片描述

  • 13
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Unity实现循环滑动列表可以使用 ScrollRect 组件和 ContentSizeFitter 组件。以下是一个基本的步骤: 1. 创建一个空白 GameObject,并向其中添加 ScrollRect 组件。 2. 在 ScrollRect 组件中设置 Content 属性为一个包含所有列表项的 GameObject。 3. 向 Content 中添加一个 VerticalLayoutGroup 组件,用于设置列表项的垂直布局。 4. 向每个列表项 GameObject 中添加一个 LayoutElement 组件,用于设置列表项的高度。 5. 向 ScrollRect 中添加一个 ContentSizeFitter 组件,并将 Vertical Fit 设置为 Preferred Size。 6. 编写一个脚本,用于控制滑动列表的循环滚动。该脚本应该包含以下步骤: - 在 Start() 方法中获取列表项的总数和高度。 - 在 Update() 方法中检查 ScrollRect 是否已经滚动到列表的顶部或底部,并相应地更新 Content 的位置以实现循环滚动。 下面是一个简单的示例代码: ```csharp using UnityEngine; using UnityEngine.UI; public class LoopScroll : MonoBehaviour { public float itemHeight; // 列表项的高度 public int itemCount; // 列表项的总数 private RectTransform content; private ScrollRect scrollRect; private float contentHeight; private void Start() { content = GetComponent<ScrollRect>().content; scrollRect = GetComponent<ScrollRect>(); contentHeight = itemHeight * itemCount; content.sizeDelta = new Vector2(content.sizeDelta.x, contentHeight); } private void Update() { if (scrollRect.verticalNormalizedPosition <= 0f) { content.anchoredPosition = new Vector2(content.anchoredPosition.x, content.anchoredPosition.y + contentHeight); scrollRect.verticalNormalizedPosition = 1f; } else if (scrollRect.verticalNormalizedPosition >= 1f) { content.anchoredPosition = new Vector2(content.anchoredPosition.x, content.anchoredPosition.y - contentHeight); scrollRect.verticalNormalizedPosition = 0f; } } } ``` 在这个示例中,我们在 Start() 方法中计算了 Content 的总高度,并在 Update() 方法中检查 ScrollRect 是否已经滚动到列表的顶部或底部。如果是,我们就相应地更新 Content 的位置以实现循环滚动。注意,我们还将 ScrollRect 的 verticalNormalizedPosition 设置为 0f 或 1f,以保持滚动位置不变。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值