Unity Scroll View简单介绍和使用

Unity Scroll View简单介绍

最近用到Scroll View组件就简单记录一下
Content：（内容）内容元素的引用。
Horizontal：（水平）水平方向拖动。
Vertical：（垂直）垂直方向拖动。
Movement Type：（类型）无限制，弹性，收紧。弹性和收紧模式下将内容限制在滚动矩阵范围中，弹性模式在达到滚动矩阵的边缘会反弹。
Elasticity：（弹性）弹性模式下的弹性系数。
Inertia：（惯性）设置惯性后拖动后松开内容会继续滑动。未设置则只有在拖动才会滑动。
Deceleration Rate：（减速率）设置惯性后，减速率决定元素停止移动的速度。0立即停止，1不会减速。
Scroll Sensitivity：（滚动灵敏度）滚轮滚动事件灵敏度。
Viewport：（视图端口）层级Viewport引用。
Horizontal Scrollbar：（水平滚动条）对水平滚动条元素引用
Visibility：（能见度）滚动条是否在不需要时自动隐藏，是否还可以扩展。
Spacing：（间隔）滚动条和视口的空间。

1.含有Scroll Rect组件的根节点：Scroll View
2.含有Mask组件的节点：Viewport
3.所有内容的父节点Content，常含有布局控件
4.滚动条，包括横向和纵向

节点Scroll View中的组件Rect Transform的Width和Height控制着整个区域大小，组件Scroll Rect的滚动条设置也会影响显示区域的边界位置是否完整；
节点Viewport的组件Image中的Image Type属性会影响显示的区域；
节点Content的组件Rect Transform的布局和宽高影响了显示的区域。

了解完组件，我们只需要在Content中将我们的元素放入。为了自动布局可以使用自带的组件



前后添加组件区别。这个组件需要自己去调整尺寸于是我们可以直接用下面这个组件

组件组要作用就是可以自动调整尺寸。

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

public class ScrollViewTest : MonoBehaviour,IBeginDragHandler,IDragHandler,IEndDragHandler
{
    private ScrollRect scrollRect;
    private RectTransform contentRectTrans;
    void Start()
    {
        scrollRect = GetComponent<ScrollRect>();
        //关于RectTransform的探究
        contentRectTrans = scrollRect.content;

        //当前UI的世界坐标
        Debug.Log("当前UI的世界坐标" + contentRectTrans.position);
        //当前UI的局部坐标
        Debug.Log("当前UI的局部坐标" + contentRectTrans.localPosition);
        //当前UI的宽度（从左到右的长度）
        //Debug.Log("当前UI的宽度"+contentRectTrans.rect.right);
        Debug.Log("当前UI的宽度" + contentRectTrans.rect.xMax);
        Debug.Log("当前UI的宽度" + contentRectTrans.rect.width);

        //当前UI的左坐标
        Debug.Log("当前ui的左坐标" + contentRectTrans.rect.x);

        //当前UI的高度
        Debug.Log("当前ui的高度" + contentRectTrans.rect.height);

        //这里要注意，他只是当前transform 的x轴的方向
        //就像是transform。right自身方向的右边
        Debug.Log("当前ui的左坐标" + contentRectTrans.right);

        //当前UI底部相对于顶部的相对长度，负数为向下延展，同理则反
        Debug.Log(contentRectTrans.rect.y);

        //当前UI的宽高
        Debug.Log(contentRectTrans.sizeDelta);
        Debug.Log(contentRectTrans.sizeDelta.x);
        Debug.Log(contentRectTrans.sizeDelta.y);


        //以下为常用API
        //宽度应该是我们想要增加的值
        contentRectTrans.sizeDelta = new Vector2(200,178);
        //水平滚动位置为0到1的值，0为左边，1为右边
        scrollRect.horizontalNormalizedPosition = 1;
        //拖动事件注册
        scrollRect.onValueChanged.AddListener(PrintValue);
    }

    
    private void PrintValue(Vector2 vector2)
    {
        Debug.Log("传递出来的参数值" + vector2);
    }
    }

直接把代码挂到scrollview上，可以看到其对应属性
得注意的是content宽高决定了可拖拽的范围。如果超过范围就拖不到最后的元素。
增加一个例子。平时滑动的时候我们需要图画在正中间显示不会偏移，我们就需要对移动的距离进行单位化比例。如果不进行规则化就想下面这样。

直接上代码

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

public class SlideCanCoverScrollView : MonoBehaviour,IBeginDragHandler,IEndDragHandler  
{
    private float contentLength;//容器长度
    private float beginMousePostionX;
    private float endMousePositionx;
    private ScrollRect scrollRect;
    private float lastProportion;//上一个位置比例
    private RectTransform rect;//获取scrollview组件

    private float scrollviewWidth;//scrollview组件宽度
    public int cellLength;//每个单元格长度
    public int spacing;//间隙
    public int leftOffset;//左偏移量
    private float upperLimit;//上限值
    private float lowerLimit;//下限值
    private float firstItemLength;//移动第一个单元格的距离
    private float oneItemLength;//移动一个单元格需要的距离
    private float oneItemProportion;//滑动一个单元格所占比例

    public int totalItemNum;//共有几个单元格
    private int currentIndex;//当前单元格索引

    private void Awake()
    {
        rect = GetComponent<RectTransform>();
        scrollviewWidth = rect.sizeDelta.x;
        scrollRect = GetComponent<ScrollRect>();
        contentLength = scrollRect.content.rect.xMax+scrollviewWidth - 2 * leftOffset - cellLength;
        Debug.Log("contentLength" + scrollRect.content.rect.xMax);
        firstItemLength = cellLength / 2 + leftOffset;
        oneItemLength = cellLength + spacing;
        oneItemProportion = oneItemLength / contentLength;
        upperLimit=1- firstItemLength / contentLength;
        lowerLimit = firstItemLength / contentLength;
        currentIndex = 1;
        scrollRect.horizontalNormalizedPosition = 0;
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        beginMousePostionX = Input.mousePosition.x;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        float offSetX = 0;
        endMousePositionx = Input.mousePosition.x;
        offSetX = (beginMousePostionX - endMousePositionx)*2;
        if (Mathf.Abs(offSetX)>firstItemLength)//执行滑动动作的前提是要大于第一个需要滑动的距离
        {
            if (offSetX>0)//右滑
            {
                if (currentIndex>=totalItemNum)
                {
                    return;
                }
                int moveCount = (int)((offSetX - firstItemLength) / oneItemLength) + 1;//当次可以移动的格子数
                
                currentIndex += moveCount;
                if (currentIndex>=totalItemNum)
                {
                    currentIndex = totalItemNum;
                }
                //当次需要移动的比例：上一次已经存在的单元格位子的比例加上这一次需要去移动的比例
                lastProportion += oneItemProportion * moveCount;
                if (lastProportion>=upperLimit)
                {
                    lastProportion = 1;
                }
            }
            else//左滑
            {
                if (currentIndex <=1)
                {
                    return;
                }
                int moveCount = (int)((offSetX + firstItemLength) / oneItemLength) - 1;//当次可以移动的格子数
                currentIndex += moveCount;
                if (currentIndex <= 1)
                {
                    currentIndex = 1;
                }
                //当次需要移动的比例：上一次已经存在的单元格位子的比例加上这一次需要去移动的比例
                lastProportion += oneItemProportion * moveCount;
                if (lastProportion <= lowerLimit)
                {
                    lastProportion = 0;
                }
            }
        }

        DOTween.To(() => scrollRect.horizontalNormalizedPosition, lerpValue => scrollRect.horizontalNormalizedPosition = lerpValue, lastProportion, 0.5f).SetEase(Ease.Linear);
    }
}

这样就实现了自适应。