UGUI学习笔记（十一）自制优化版滚动视图

原创

已于 2022-09-12 21:23:12 修改 · 593 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#unity #ui

于 2022-09-12 16:38:46 首次发布

本文介绍了一种优化的滚动视图实现方法，避免了性能消耗和内存浪费。通过手动计算子元素数量，动态调整内容大小，并利用数据驱动实时更新子物体，实现高效且节省资源的滚动效果。

一、效果展示

二、使用自带组件实现

为了让「Scroll View」组件实现内容框自适应大小，我们可以在「Content」上挂载「Vertical Layout Group」组件和「Content Size Fitter」组件。

效果如下

但这种实现方式有诸多问题。一方面，「Vertical Layout Group」这类排序组件可能会增加性能消耗；另一方面，「Content Size Fitter」必须靠子项才能撑开，当子项数量较多但又只需要展示少数几条时，会造成内存的浪费。因此我们需要自己实现一个优化版的滚动视图。

三、手动实现

3.1 准备工作

首先在场景中创建一个「Scroll View」并命名为「ScrollViewPlus」，在其上挂载一个同名脚本。创建一个子物体脚本命名为「ScrollViewPlusItem」。创建名为「ScrollViewPlusItem」的预制体，用于之后实例化子物体。

3.2 生成子物体

在生成子物体之前，首先要计算出最少需要的子物体数量。子物体的数量通过子物体的高度与间距就可以计算出来，但需要考虑到当前视口高度无法整除子物体高度加间距的情况。这种情况下就需要向上取整。另外还需要在计算出来的数量上加1，以避免在滚动时“露馅”。

代码如下：

public class ScrollViewPlus : MonoBehaviour
{
   
   
    // 子物体预制体
    public GameObject ItemPrefab;
    // 子物体间距
    public float ItemOffset;
    // 子物体高度
    private float _itemHeight;
    private RectTransform _content;
    private List<ScrollViewPlusItem> _items;
    void Start()
    {
   
   
        _items = new List<ScrollViewPlusItem>();
        _content = transform.Find("Viewport/Content").GetComponent<RectTransform>();
        _itemHeight = ItemPrefab.GetComponent<RectTransform>().rect.height;
        int num = GetShowItemNum(_itemHeight, ItemOffset);
        SpawnItem(num, ItemPrefab);
    }
    /// <summary>
    /// 获取展示区域子元素个数
    /// </summary>
    /// <param name="itemHeight"></param>
    /// <param name="itemOffset"></param>
    /// <returns></returns>
    private int GetShowItemNum(float itemHeight, float itemOffset)
    {
   
   
        float height = GetComponent<RectTransform>().rect.height;
        return Mathf

最低0.47元/天解锁文章