UIScrollView组件下拉加载刷新功能

发表于2018-12-05
评论0 3.8k浏览
相信很多人都玩过微博,经常会去刷新微博看新内容,那么这个功能是如何实现出来的呢,下面就要请出今天的主角UIScrollView组件,借助UIScrollView组件实现下拉加载刷新内容的功能。

注意:在实现该功能的时候需要了解如何使用Scrollbar和ScrollRect组件。

一、组件部分

1、创建一个Canvas,在Canvas下添加Panel。

2、在Panel上添加ScroRect组件

3、在Panel下添加一个空物体改名为Grid添加GirdLayoutGroup与ContentSizeFitter组件并进行相应合适的设置。

4、在Canvas下添加Scroll bar,根据自己的需求去设置,这个控件就是用来判断列表是否到最底部

5、回来设置ScroRect组件,将Grid与ScrollBar拖到相应的地方。

6、制作单条列表的预制件,在这里简单制作,所以我就创建了一张图片并添加了Text组件显示信息区别每一条列表信息

二、预制件的代码

在预制件上我添加了ItemControl脚本用来简单的控制单条信息的显示,代码如下:
public class ItemControl : MonoBehaviour {
    private Text tNum;
    public void ShowItemText(string str) {
        tNum = this.transform.GetComponentInChildren<text>();
        tNum.text = str;
    }
}</text>

非常简单,获取到子物体上的Text组件并且进行赋值。

三、主要控制代码

接下来就是主要的代码了,我在Panel上添加了一个test脚本,继承MonoBehaviour,与IEndDragHandler接口,并且实现IEndDragHandler接口中的OnEndDrag()方法,当我们滑动列表结束的时候将会调用OnEndDrag()方法,注意在这里不是滑动到列表的最下面时调用,而是我们每一次滑动结束时这个方法就会被触发。

1、首先绑定我们需要的scrollbar,GridLayoutGroup还有我们的预制件。
    public Scrollbar bar;//获得Scrollbar组件
    public GridLayoutGroup vGroup;//获得GridLayoutGroup组件
    public ItemControl item;//添加预制件

2、在Start方法中 初始化数据与列表的状态。
 private void Start()
    {
        AddItem();//添加数据
        //将列表移动到第一条数据
        bar.value = 1;
    }

在这里 bar.value=1 是因为我出现了每次加载后都是从中间的数据显示,列表移动了中间位置,并不是从第一条数据显示,估计是我哪个地方没有设置好,设置了半天又没有找到,所有直接通过滚动条的value值,把数据移动到了第一条。

3、接下来就是添加数据,每一次添加5条数据。
 void AddItem() {
        for (int i = 0; i < 5; i++)
        {
            GameObject newItem = AddItemGameobject(item.gameObject, vGroup.gameObject);
            string str = "现在是第:" + indexItem + "项," + "第:" + index + "条";
            newItem.GetComponent<ItemControl>().ShowItemText(str);
        }
    }
    public  GameObject AddItemGameobject(GameObject o, GameObject parent)
    {
        index++;//创建的第几条数据
        GameObject go = GameObject.Instantiate(o) as GameObject;
        go.transform.SetParent(parent.transform);//设置父物体,将数据添加到 Grid物体下面,并且设置位置,大小。
        go.transform.localPosition = Vector3.zero;
        go.transform.localScale = Vector3.one;
        return go;
    }

4、接下来就要实现刷新了,开始我们实现了OnEndDrag()方法,用来检测滑动结束,所有我们的刷新就在放在这里,然后我们通过bar.value的值来判断有没有到最后一条数据,bar.value值永远都是从0~1进行改变,之前我们也选择的是从下到上,所以0就代表了最下面 , 1 代表顶层。

代码如下:
  public void OnEndDrag(PointerEventData eventData)
    {
        if (bar.value == 0) {//判断当最下面的时候就进行加载,同理我们做上拉刷新时,只要判断value是否等于1
            indexItem++;//第几次创建
            AddItem(); //加载数据
        }
    }

同理当我们用到上拉刷新的时候也可以使用这个方法。

整体代码:
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class test : MonoBehaviour, IEndDragHandler
{
    public Scrollbar bar;//获得Scrollbar组件
    public GridLayoutGroup vGroup;//获得GridLayoutGroup组件
    public ItemControl item;//添加预制件
    private int index = 0;
    private int indexItem = 1;
    private void Start()
    {
        AddItem();//添加数据
        //将列表移动到第一条数据
        bar.value = 1;
    }
    public void OnEndDrag(PointerEventData eventData)
    {
        if (bar.value == 0) {//判断当最下面的时候就进行加载,同理我们做上拉刷新时,只要判断value是否等于1
            indexItem++;//第几次创建
            AddItem(); //加载数据
        }
    }
    void AddItem() {
        for (int i = 0; i < 5; i++)
        {
            GameObject newItem = AddItemGameobject(item.gameObject, vGroup.gameObject);
            string str = "现在是第:" + indexItem + "项," + "第:" + index + "条";
            newItem.GetComponent<ItemControl>().ShowItemText(str);
        }
    }
    public  GameObject AddItemGameobject(GameObject o, GameObject parent)
    {
        index++;//创建的第几个物体
        GameObject go = GameObject.Instantiate(o) as GameObject;
        go.transform.SetParent(parent.transform);//设置服务体,将数据添加到 Grid物体下面
        go.transform.localPosition = Vector3.zero;
        go.transform.localScale = Vector3.one;
        return go;
    }
}

四、运行

因为我这里隐藏了ScrollBar组件上的所有图片 所有这里ScrollBar不会显示出来

五、总结

以上就是使用UIScrollView组件实现下拉加载刷新内容,非常简单,可以在这基础上添加 异步读取数据,添加加载时的提示等等。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引