ScrollView

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

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

使用版本:Unity2017

11111.png

55555.png

666666.png

77777.png

88888.png

999999.png

2222222.png

运行测试

gaollg0.GIF

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

对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

Powered by emlog  蜀ICP备18021003号-1   sitemap

川公网安备 51019002001593号