鸟语天空

ScrollView

作者：追风剑情 发布于：2017-7-14 19:35 分类：Unity3d

利用UGUI的ScrollView组件制作滚动区域

使用版本：Unity2017

运行测试

以上步骤基本都采用的默认设置，只调整了下坐标和尺寸。

对ScrollView的主要参数进行下说明：

Movement Type: 
Unrestricted: 无限制，不受内容大小影响，可以一直滚动。
Elastic: 橡皮筋效果，滚动到最底端还可再滚动。
Clamped: 滚动到最底端将无法再滚动。

Scroll Sensitivity: 滚动灵敏度。

注意：如果内容项使用了EventTrigger组件，此组件会接管所有事件，导致ScrollView无法滑动。

ScrollRect.verticalNormalizedPosition: 控制垂直滚动距离，有效值范围[0, 1]
ScrollRect.horizontalNormalizedPosition: 控制水平滚动距离，有效值范围[0, 1]

// 滚动到顶部
IEnumerator ScrollToTop()
{
    yield return new WaitForEndOfFrame();
    m_ScrollRect.verticalNormalizedPosition = 1;
}

// 滚动到底部
IEnumerator ScrollToEnd()
{
    yield return new WaitForEndOfFrame();
    m_ScrollRect.verticalNormalizedPosition = 0;
}

二、解决拖动Item时，ScrollView不滚动

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
/// <summary>
/// 挂到ScrollView组件的Item上，否则拖动Item时无法滚动。
/// 将Drag事件转发给ScrollRect组件
/// </summary>
[DisallowMultipleComponent]
public class UIDragScrollViewItem : MonoBehaviour, IInitializePotentialDragHandler, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    [SerializeField]
    private GameObject m_scrollView;

    public void OnInitializePotentialDrag(PointerEventData eventData)
    {
        ExecuteEvents.Execute(m_scrollView, eventData, ExecuteEvents.initializePotentialDrag);
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        ExecuteEvents.Execute(m_scrollView, eventData, ExecuteEvents.beginDragHandler);
    }

    public void OnDrag(PointerEventData eventData)
    {
        ExecuteEvents.Execute(m_scrollView, eventData, ExecuteEvents.dragHandler);
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        ExecuteEvents.Execute(m_scrollView, eventData, ExecuteEvents.endDragHandler);
    }
}

三、设置Content

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
/// <summary>
/// 添加在ScrollView的Content结点上
/// </summary>
public class UIScrollViewContent : MonoBehaviour
{
    [SerializeField]
    private RectTransform rectTransform;

    // 设置宽度
    public void SetWidth(float value)
    {
        Vector2 sizeDelta = rectTransform.sizeDelta;
        sizeDelta.x = value;
        rectTransform.sizeDelta = sizeDelta;
    }

    // 设置高度
    public void SetHeight(float value)
    {
        Vector2 sizeDelta = rectTransform.sizeDelta;
        sizeDelta.y = value;
        rectTransform.sizeDelta = sizeDelta;
    }

    // 让滚动返回到顶部
    public void ResetPositionTop()
    {
        Vector2 anchoredPosition =  rectTransform.anchoredPosition;
        anchoredPosition.y = 0;
        rectTransform.anchoredPosition = anchoredPosition;
    }
}

标签: Unity3d