利用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;
}
}