Unity学习笔记:使用ScrollView(ScrollRect)实现滑动切换页面的功能

写在文章开头:我的unity版本是2018.3,写这个的目的是为了刚刚接触unity的小白(就是我),因为项目中使用Cocos的PageView做了公告系统,最近在自学unity,所以想着用unity怎么实现。翻了很多博客,感觉对我这样的小白很不友好,自己边参考边摸索着实现了这个功能,就想写下来,希望能帮助到其他小白。

模仿大佬放一下github地址:https://github.com/liushuang620/Unity_ScrollView

利用ScrollView实现多个页面滑动切换的功能,具体实现效果如下gif

1. 工程面板中添加ScrollView,可以把ScrollBar子对象删除, content大小设置成可容纳四张图片,并在content下添加4个image子对象,整个工程完整目录如下图

2. ScrollView下添加PageView子组件

3.添加空对象GameObject,命名为GameController,给它挂载GameControler脚本(Button关联响应函数的话,相关脚本必须挂载在当前场景中的某个物体上)

4. 添加InputField和Button, InputField的子对象Placeholder中的Text文本改为“请输入页码...”,Button关联GameController下的OnButtonDown函数

 

5.创建一个空物体GameObject,给它添加ToggleGroup组件,空物体下添加Text和4个Toggle子对象,具体结构参考第一张工程结构总图,为每一个Toggle对象绑定OnValueChange事件,可参考下图

注:为Toggle有两种绑定事件的方式具体见文章番外:)

ToggleGroup的作用:开关组,简单点儿说,开关组的作用就是在这组开关中,只能有一个开关处于true的状态,详细说明可参考以下链接

https://blog.csdn.net/qq992817263/article/details/51754442

====================工程说完了接下来是代码了=============================

PageView脚本:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System;

public class PageView : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{
    private ScrollRect rect;
    private float targethorizontal = 0;
    private List posList = new List();//存四张图片的位置(0, 0.333, 0.666, 1) 
    private bool isDrag = true;
    private float startTime = 0;
    private float startDragHorizontal;
    private int curIndex = 0;

    public float speed = 4;      //滑动速度  
    public float sensitivity = 0; 
    public Toggle[] toggleArray;  //toggle开关
    public Text curPage;


    void Start()
    {
        rect = GetComponent();
        float horizontalLength = rect.content.rect.width - GetComponent().rect.width;
        var _rectWidth = GetComponent().rect.width;
        for (int i = 0; i < rect.content.transform.childCount; i++)
        {
            posList.Add(_rectWidth * i / horizontalLength);   //存四张图片的位置(0, 0.333, 0.666, 1) 
        }
        curIndex = 0;
        toggleArray[0].isOn = true;
        curPage.text = String.Format("当前页码:0");

    }

    void Update()
    {
        if (!isDrag)
        {
            startTime += Time.deltaTime;
            float t = startTime * speed;
            rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition, targethorizontal, t);  //加速滑动效果
            //rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition, targethorizontal, Time.deltaTime * speed); //缓慢匀速滑动效果

        }
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        isDrag = true;
        //开始拖动
        startDragHorizontal = rect.horizontalNormalizedPosition;  //horizontalNormalizedPosition这个参数是scrollRect滑动期间变化的x坐标值,在(0, 1)之间
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        Debug.Log("OnEndDrag");
        float posX = rect.horizontalNormalizedPosition;
        int index = 0;
        float offset = Mathf.Abs(posList[index] - posX);  //计算当前位置与第一页的偏移量,初始化offect
        for (int i = 1; i < posList.Count; i++)
        {    //遍历页签,选取当前x位置和每页偏移量最小的那个页面
            float temp = Mathf.Abs(posList[i] - posX);
            if (temp < offset)
            {
                index = i;
                offset = temp;
            }
        }
        curIndex = index;
        targethorizontal = posList[curIndex]; //设置当前坐标,更新函数进行插值  
        isDrag = false;
        startTime = 0;
        toggleArray[curIndex].isOn = true;  //因为使用了ToggleGroup,所以这里只把要显示的页面置true即可,其他Toggle会自己改为false(这个是我踩过的坑)
        curPage.text = String.Format("当前页码:{0}", curIndex.ToString());
    }

    public void pageTo(int index)
    {
        Debug.Log("pageTo......");
        curIndex = index;
        targethorizontal = posList[curIndex]; //设置当前坐标,更新函数进行插值  
        isDrag = false;
        startTime = 0;
        toggleArray[curIndex].isOn = true;   
        curPage.text = String.Format("当前页码:{0}", curIndex.ToString());
    }
}

GameController脚本:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class GameController : MonoBehaviour
{
    public InputField inputField;
    public PageView pageView;
    //public Toggle toggle0;    //代码动态添加监听方法,无需在界面指定,如果使用这种方法就不要在界面再绑定一次了
    //public Toggle toggle1;
    //public Toggle toggle2;
    //public Toggle toggle3;

    private void Start()
    {
        //代码动态添加监听方法,无需在界面指定
        //toggle0.onValueChanged.AddListener(OnValueChanged0);
        //toggle1.onValueChanged.AddListener(OnValueChanged1);
        //toggle2.onValueChanged.AddListener(OnValueChanged2);
        //toggle3.onValueChanged.AddListener(OnValueChanged3);
    }

    public void OnButtonDown()
    {
        int index = int.Parse(inputField.text);
        pageView.pageTo(index);
    }



    public void OnValueChanged0(bool check)
    {
        Debug.Log("OnValueChanged0");
        if (check)
        {
            Debug.Log("Page to 0");
            pageView.pageTo(0);
        }
        else
        {
            Debug.Log("Toggle0 isOn false");
        }
    }

    public void OnValueChanged1(bool check)
    {
        Debug.Log("OnValueChanged1");
        if (check)
        {
            Debug.Log("Page to 1");
            pageView.pageTo(1);
        }
        else
        {
            Debug.Log("Toggle1 isOn false");
        }
    }

    public void OnValueChanged2(bool check)
    {
        Debug.Log("OnValueChanged2");
        if (check)
        {
            Debug.Log("Page to 2");
            pageView.pageTo(2);
        }
        else
        {
            Debug.Log("Toggle2 isOn false");
        }
    }

    public void OnValueChanged3(bool check)
    {
        Debug.Log("OnValueChanged3");
        if (check)
        {
            Debug.Log("Page to 3");
            pageView.pageTo(3);
        }
        else
        {
            Debug.Log("Toggle0 isOn false");
        }
    }
}

 

==============================这里是番外=========================================

Toggle--onValueChanged: isOn的值改变的时候调用,有两种绑定事件的方式,一种是在unity编辑器inspector界面自己手动绑定事件,如下图

另外一种是在代码里动态绑定,代码如下

 

public class GameController : MonoBehaviour
{
    public Toggle toggle0;    //代码动态添加监听方法,无需在界面指定
    private void Start()
    {
        //代码动态添加监听方法,无需在界面指定
        toggle0.onValueChanged.AddListener(OnValueChanged0);
    }
    public void OnValueChanged0(bool check)
    {
        Debug.Log("OnValueChanged0");
        if (check)
        {
            Debug.Log("Page to 0");
            pageView.pageTo(0);
        }
        else
        {
            Debug.Log("Toggle0 isOn false");
        }
    }
}

 

 

你可能感兴趣的:(Unity学习笔记:使用ScrollView(ScrollRect)实现滑动切换页面的功能)