Unity UGUI ScrollView无限滚动效果

一、发现需求

1、在UGUI中,使用 ScrollView + 表格布局和字段自适应组件 就可以很好的实现列表功能。

2、如果列表中同时存在很多个Item时,显示区域却只显示一部分,就会造成性能不必要的浪费。

3、这时就想到,利用对象池相关知识,只在列表显示的地方实例化有限的Item即可。


二、实现原理

在列表滑动时,根据Content移动的位置偏差,计算出当前需要显示的Item索引,配合对象池,动态刷新Item数据。


三、实现需求

1、新建一个ScrollView,给物体添加CircularScrollRect脚本,设置好参数。

2、然后在其他脚本在合适的时机调用 CircularScrollRect 的 Init()、ShowAndUpdateList()、ClearScrollRectAllItem()等方法即可。


最终效果:

在这里插入图片描述
使用【customeditor特性】给CircularScrollRect脚本写了一个编辑器拓展,方便调参.

在这里插入图片描述


部分代码:

    /// <summary>
    /// 滑动content,更新Item.
    /// </summary>
    private void UpdateCheck()
    {
        if (m_ItemInfos == null) return;  //没有Item,不执行.
           
        //检查超出范围
        for (int i = 0, length = m_ItemInfos.Length; i < length; i++)
        {
            ItemInfo itemInfo = m_ItemInfos[i];
            GameObject obj = itemInfo.obj;
            Vector3 pos = itemInfo.pos;

            float posXY = m_Direction == ScrollRect_Direction.Vertical ? pos.y : pos.x;
            if (IsOutRange(posXY)) //超出显示范围.
            {
                //把超出范围的item 扔进 poolsObj里.
                if (obj != null)
                {
                    EnterPoolsObj(obj);
                    m_ItemInfos[i].obj = null;
                }
            }
            else    //在显示范围内.
            {
                //已在范围内的Item,不需要设置.
                if (obj == null)    
                {
                    GameObject item = GetPoolsObj();    //优先从 poolsObj中 取出. (poolsObj为空则返回 实例化的item)
                    item.transform.localPosition = pos;
                    item.gameObject.name = m_ItemName + "_" + i.ToString();
                    m_ItemInfos[i].obj = item;

                    ImplementActionMethod(m_itemUpdateCallBack, item);
                }
            }
        }
    }
    /// <summary>
    /// 判断是否超出显示范围.
    /// </summary>
    /// <param name="posXY">垂直为Y,水平为X</param>
    /// <returns></returns>
    private bool IsOutRange(float posXY)
    {
        Vector3 contentPos = m_Content_RTrans.anchoredPosition;

        #region if Item中心点在左上角.
        if (m_ItemPivot == Item_Pivot.LeftUp)                   //Item中心点在左上角.
        {
            if (m_Direction == ScrollRect_Direction.Vertical)   //垂直方向.
            {
                if (posXY + contentPos.y > m_ItemObj_Height ||         //上方超出范围.
                    posXY + contentPos.y < -m_RTrans.rect.height)      //下方超出范围.
                {
                    return true;
                }
            }
            else    //水平方向.
            { 
                if (posXY + contentPos.x < -m_ItemObj_Width ||         //左方超出范围.
                    posXY + contentPos.x > m_RTrans.rect.width)        //右方超出范围.
                {
                    return true;
                }
            }
            return false;
        }
        #endregion

        #region else if Item中心点在中央.
        else if (m_ItemPivot == Item_Pivot.Center)  //Item中心点在中央.
        {
            if (m_Direction == ScrollRect_Direction.Vertical)   //垂直方向.
            {
                if (posXY + (m_ItemObj_Height / 2) + contentPos.y > m_ItemObj_Height ||        //上方超出范围.
                    posXY + (m_ItemObj_Height / 2) + contentPos.y < -m_RTrans.rect.height)     //下方超出范围.
                {
                    return true;
                }
            }
            else    //水平方向.
            {
                if (posXY + (m_ItemObj_Width / 2) + contentPos.x < -m_ItemObj_Width ||        //左方超出范围.
                    posXY - (m_ItemObj_Width / 2) + contentPos.x > m_RTrans.rect.width)       //右方超出范围.
                {
                    return true;
                }
            }
            return false;
        }
        #endregion

        #region else Item中心点在其他位置.
        else    //Item中心点在其他位置.Obsolete
        {
            return true;
        }
        #endregion
    }


Github,项目代码

这是以前写的代码,当时阅览过不小博客资源,若有雷同,侵删,完毕.

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现Unity UGUI中的ScrollView滑动居中放大,其他的缩小,可以按照以下步骤进行操作: 1. 创建一个ScrollView,用于显示内容,并设置合适的大小和位置。 2. 在ScrollView中创建一个Content对象,用于放置所有需要显示的子对象,并设置Layout Group组件,以确保内容按照一定的布局排列。 3. 在每个子对象上添加一个自定义的脚本,用于控制子对象的缩放和位置。脚本中需要包含以下几个要点: a. 监听ScrollView的滑动事件,获取当前的滑动位置。 b. 根据当前滑动位置,计算每个子对象在滑动过程中应该设置的缩放比例。例如,距离居中的子对象应该更大,而距离边缘的子对象应该更小。 c. 根据计算得到的缩放比例,分别对每个子对象进行缩放设置。可以使用RectTransform的scale属性来实现缩放功能。 d. 根据子对象的缩放比例和位置信息,将子对象移动到ScrollView的合适位置。可以使用RectTransform的anchoredPosition属性来实现位置调整。 e. 可以根据需要,在脚本中添加其他的功能,例如点击子对象时的反应等。 4. 将自定义的脚本添加到所有的子对象上,确保每个子对象都能根据滑动进行缩放和位置调整。 通过以上步骤,我们可以实现在Unity UGUI中的ScrollView滑动过程中,距离居中的子对象放大,而距离边缘的子对象缩小的效果。具体的缩放比例和位置调整可以根据实际需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值