Unity-UGUI太难用?!自定义适配触摸屏和鼠标的ScrollView组件

【原创文章】转载请标记出处。-----拉婓Laughing----

Unity自带的ScrollView组件实在太难用了!

Unity-UGUI太难用?!自定义适配触摸屏和鼠标的ScrollView组件_第1张图片


槽点:

  1. 当用户把鼠标点在滚动窗体的内容Icon上时,无法滑动ScrollView
  2. 滚动窗体的Rect宽高需要根据实际内容调整,才能适配实际的滑动效果。(笔者每回都要调整很久 x_x ||| ,而且这部分如果涉及到动态修改Icon的数量和内容,十分不易扩展!)。
  3. 【滚动窗体+内容按钮】在滑动过程中,无法有效规避误点击按钮的事件触发。
  4. 种种原因,导致ScrollView在移动端(触摸屏),更加难用!

总结name多!还有什么理由阻止我们重新设计,编写一套属于自己的ScrollView组件呢!

我们的目标是:

1.改善:
  • ScrollView 装载内容的创建,以及动态创建装载内容时,能够根据实际的内容进行动态适配。
  • ScrollView 在滑动时,需要有效规避对动态装载内容的点击误判断。(滑动时,点选按钮无效;点选时,不滑动。)
  • ScrollView 能够良好支持PC端的鼠标事件,和触摸屏的触摸事件。
2.保持:
  • ScrollView 能够在滑动尽头,还原到指定头尾位置。(Elasticity)
  • ScrollView 能够通过Mask遮罩机制,显示指定范围内的装载内容。

执行与挑战!

  1. 制作滑动响应事件:

    原型设计:我们来仔细想象在一款正常交互作品中,对滑动框的控制方式。当鼠标或者手指在滑动框上按下时,滑动框被激活;激活状态下,用户滑动鼠标,或拖动手指,即可让滑动框跟着滑动。
    OK,功能需求都描绘出来了,接下来就要代码去实现吧!

    private RectTransform rt;  //需要控制的滑动窗体
    private Vector3 dragDelta; //滑动数据量
    public Camera renderCamera;//渲染滑动窗体的相机
    private bool isMouseDown;
    private bool isPointDown;
    //主要逻辑在Update里面
    private void Update()
    {
            //触摸
            if (Input.touchCount > 0)
            {
                Touch[] touches = Input.touches;
                int tCount = touches.Length;
                for(int i = 0; i < tCount; i++)
                {
                	//检测触摸及鼠标坐标是否在滑动窗口内
                    if (DetectedPosition(touches[i].position))
                    {
                        selectTouch = touches[i];
                        dragDelta = new Vector3(selectTouch.position.x, selectTouch.position.y, rt.anchoredPosition3D.z) - rt.anchoredPosition3D;
                        isPointDown = true;
                        break;
                    }
                }
            }
           //鼠标
            if(Input.GetMouseButtonDown(0))
            {
           		 //检测触摸及鼠标坐标是否在滑动窗口内
                if (DetectedPosition(Input.mousePosition))
                {   
                    dragDelta = Input.mousePosition- rt.anchoredPosition3D;
                    Debug.Log("MY");
                    //增加一层与Icon之间的触摸阻隔
                    isMouseDown = true;
                }
            }
            //这里开始实际控制滑动窗体的滑动
            if (isMouseDown&&!isPointDown)
            {  
            	//这是笔者自己封装在框架里的为transform修改localPosition的方法,因为项目实际只需要能在X轴上进行滑动。
              rt.SetLocalPos(Pos.x, Input.mousePosition.x - dragDelta.x);
            }
            else if (isPointDown&&!isMouseDown)
            {
                rt.SetLocalPos(Pos.x, selectTouch.position.x - dragDelta.x);   
            }
    }
    //检测触摸坐标是否在滑动窗体内
    //注意这里要指定一下渲染的相机是哪一个(以防在不同项目中,canvas的RenderMode不同,导致Rect失效)
    private bool DetectedPosition(Vector2 ScreenPosition)
    {
            if (RectTransformUtility.RectangleContainsScreenPoint
            (rt, ScreenPosition, renderCamera))
            {
                return true;
            }
            else
            {
                return false;
            }
    }
    ···
    

1.1. 一直到上一步,已经基本可以控制滑动窗口进行水平滑动了,接下来我们需要对窗口的显示画面

Unity-UGUI太难用?!自定义适配触摸屏和鼠标的ScrollView组件_第2张图片
c_icon_group 附上刚刚的脚本,子物体都是滑动窗体实际的装载内容。
在这里插入图片描述
将渲染相机,赋给RenderCamera


2. 下一步,我们要让整个窗体的长度和起始位置,在编辑器运行时,能够自动适配装载内容的数量和内容。(数学问题,不过多解释原理,无非就是按照装载内容的位置坐标对窗体长度进行匹配计算。)

void Start(){
			rt = transform.GetComponent();
            oldPos = rt.anchoredPosition3D;
            //设置content的宽高和位置
            int width =(int)(transform.GetChild(transform.childCount - 1).GetComponent().anchoredPosition3D.x+ transform.GetChild(transform.childCount - 1).GetComponent().sizeDelta.x);
            //这里笔者根据实际的项目分辨率,对宽度的上限与下限进行控制
            if (width <=1920)
            {
                width = 1920;
            }
            rt.sizeDelta = new Vector2(width, rt.sizeDelta.y);
            rt.SetLocalPos(Pos.x,width * 0.5f - Screen.width * 0.5f);
}
  1. ScrollView 能够在滑动尽头,还原到指定头尾位置。(Elasticity)
    对于这一需求,总的思路为:
    3.1 设定两个滑动的极限值,一为左滑初始值(同滑动条的初始位置值),一为右滑初始值。(这两个值,同样自匹配)
    3.2 在滑动结束时(即鼠标或手指抬起时),检测滑动窗体的位置,如果位置超过滑动窗体的极限值,即用Dotween动画,将滑动条还原到极限值【动画1】。
    3.3 用【动画1】的持续时间,来表现滑动条的弹性。

整体代码如下:

/***
* Copyright(C) by #Laughing#
* All rights reserved.
* FileName:     #ScrollView_Custom#
* Author:       #Laughing#
* Version:      #v1.0#
* Date:         #20190527_1200#
* Description:  ##
* History:      ##
***/
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using RDFW;
using System.Linq;
using UnityEngine.EventSystems;
using UnityEngine.UI;
using System;
using DG.Tweening;

namespace RDFW
{
    public class RDScrollRect : MonoBehaviour
    {
        private bool isMouseDown;
        private bool isPointDown;
        private float endX;
        private float startX;
        public float endReserved;
        public Camera renderCamera;
        private GameObject mask;
        private Vector3 dragDelta=Vector3.zero;
        private RectTransform rt;
        private Vector3 oldPos;
        private Touch selectTouch;
        //补间动画对象
        private Tweener tweener;
        //窗体弹性
        [Range(0,1)]
        public float sensitive;
        private void Start()
        {  
            rt = transform.GetComponent();
            rt.anchoredPosition3D = new Vector3(startX, rt.anchoredPosition3D.y, rt.anchoredPosition3D.z);
            oldPos = rt.anchoredPosition3D;
            //设置content的宽高和位置
            int width =(int)(transform.GetChild(transform.childCount - 1).GetComponent().anchoredPosition3D.x+ transform.GetChild(transform.childCount - 1).GetComponent().sizeDelta.x);
            if (width <=1920)
            {
                width = 1920;
            }
            rt.sizeDelta = new Vector2(width, rt.sizeDelta.y);
            rt.SetLocalPos(Pos.x,width * 0.5f - Screen.width * 0.5f);
            startX = width * 0.5f - Screen.width * 0.5f; 
            endX = ((width - Screen.width)*0.5f+endReserved)*-1;
            if (width == 1920)
            {
                endX = 0;
            }
        }
        private void Update()
        {
            //触摸
            if (Input.touchCount > 0)
            {
                Touch[] touches = Input.touches;
                int tCount = touches.Length;
                for(int i = 0; i < tCount; i++)
                {
                    if (DetectedPosition(touches[i].position))
                    {
                        selectTouch = touches[i];
                        dragDelta = new Vector3(selectTouch.position.x, selectTouch.position.y, rt.anchoredPosition3D.z) - rt.anchoredPosition3D;
                        isPointDown = true;
                        break;
                    }
                }
            }

            if(Input.GetMouseButtonDown(0))
            {
                if (DetectedPosition(Input.mousePosition))
                {   
                    dragDelta = Input.mousePosition- rt.anchoredPosition3D;
                    Debug.Log("MY");
                    //增加一层与Icon之间的触摸阻隔
                    isMouseDown = true;
                }
            }
            if (Input.GetMouseButtonUp(0))
            {
                isMouseDown = false;
                isPointDown = false;
                if (rt.anchoredPosition3D.x < endX)
                {
                    tweener?.Kill();
                    tweener=rt.DOLocalMoveX(endX,1- sensitive);
                }
                else if(rt.anchoredPosition3D.x > startX)
                {
                    tweener?.Kill();
                    tweener =rt.DOLocalMoveX(startX,1- sensitive);
                }
                
            }

            if (isMouseDown&&!isPointDown)
            {
                tweener?.Kill();
                rt.SetLocalPos(Pos.x, Input.mousePosition.x - dragDelta.x);
            }
            else if (isPointDown&&!isMouseDown)
            {     
                tweener?.Kill();
                rt.SetLocalPos(Pos.x, selectTouch.position.x - dragDelta.x);
            }

        } 

        private bool DetectedPosition(Vector2 ScreenPosition)
        {
            if (RectTransformUtility.RectangleContainsScreenPoint(transform.GetComponent(), ScreenPosition, renderCamera))
            {
                return true;
            }
            else
            {
                return false;
            }
        }
        
    }
}
效果如下:


在这里插入图片描述

这里的EndReserved 可以根据具体需求来设定,意为末端位置的预留长度。
  1. 其实到这一步,我们的滑动条已经完成大半了,明显区别于Unity自带的ScrollView的地方,你会发现即便鼠标放在装载内容,即Icon上去拖动,也能控制滑动条。接下来,我们来处理
    “ScrollView 在滑动时,需要有效规避对动态装载内容的点击误判断。(滑动时,点选按钮无效;点选时,不滑动。)”

实现这个需求其实很简单,只要在为装载内容,即Icon按钮注册点击事件时,对鼠标滑动和触摸滑动事件做过滤即可,即当鼠标滑动,触摸滑动时,不触发按钮注册事件。

private void AddIcon(PointerEventData eventData)
{
        if (!eventData.dragging && !eventData.IsPointerMoving())
        {
            //这里做按钮按下,你想要做的事
        }
}
  1. 最后一步,我们为整个窗体在Hierarchy面板上的结构,添加一个父物体,并添加ugui遮罩组件,让窗口局部显示。
    Unity-UGUI太难用?!自定义适配触摸屏和鼠标的ScrollView组件_第3张图片

最终效果如下:

【原创文章】转载请标记出处。-----拉婓Laughing----

你可能感兴趣的:(Unity-UGUI太难用?!自定义适配触摸屏和鼠标的ScrollView组件)