UGUI ScrollRect实现带按钮翻页支持拖拽-猿码集

1. UGUI ScrollRect介绍

UGUI（Unity Graphical User Interface）是Unity中用于制作游戏界面的工具集，其中的ScrollRect是一种可滚动的区域，常用于显示大量内容的列表，例如排行榜、道具列表等。ScrollRect的特点是可以通过拖拽或点击按钮来翻页，这在很多游戏中都是一种常见的界面交互方式。

2. ScrollRect基本使用

2.1 创建ScrollRect

首先，在Unity编辑器中创建一个空物体，并给其添加一个RectTransform组件，用于确定ScrollRect的大小和位置。然后，在该物体下创建一个Image对象，作为ScrollRect的背景。最后，在这个Image对象下创建一个ScrollRect对象，此时会自动生成一个Content对象作为ScrollRect的子物体，用于放置需要显示的内容。


GameObject scrollRectObj = new GameObject("ScrollRect");
RectTransform rectTransform = scrollRectObj.AddComponent();
rectTransform.sizeDelta = new Vector2(400, 600);
Image backgroundImage = scrollRectObj.AddComponent();
backgroundImage.color = Color.gray;
ScrollRect scrollRect = scrollRectObj.AddComponent();

2.2 填充内容

ScrollRect的Content对象是用来放置需要显示的内容，可以是多个子物体组成的列表。在这些子物体上可以添加Button组件或其他需要的交互组件。通过设置Content的RectTransform的Size和Position，可以确定内容的大小和位置。


RectTransform contentRectTransform = scrollRect.content;
contentRectTransform.sizeDelta = new Vector2(400, 1000);
for (int i = 0; i < 10; i++)
{
    GameObject itemObj = new GameObject("Item " + i);
    itemObj.transform.SetParent(contentRectTransform);
    
    // 添加需要的组件和设置位置等
}

2.3 设置滚动方向

ScrollRect的滚动方向可以通过设置Vertical属性（垂直滚动）或Horizontal属性（水平滚动）进行控制。同时可以设置Viewport的Size和Position来确定ScrollRect的显示区域。


scrollRect.vertical = true;
scrollRect.horizontal = false;
RectTransform viewportTransform = scrollRect.viewport;
viewportTransform.sizeDelta = new Vector2(400, 600);

2.4 添加翻页按钮

为了实现翻页功能，可以在ScrollRect外添加两个Button对象，一个用于上一页，一个用于下一页。通过监听这两个按钮的点击事件，来改变ScrollRect的Content的位置，实现翻页效果。


Button prevButton = Instantiate(buttonPrefab);
prevButton.name = "PrevButton";
prevButton.transform.SetParent(scrollRectObj.transform);
prevButton.onClick.AddListener(ScrollPrev);
Button nextButton = Instantiate(buttonPrefab);
nextButton.name = "NextButton";
nextButton.transform.SetParent(scrollRectObj.transform);
nextButton.onClick.AddListener(ScrollNext);

2.5 实现翻页方法

翻页的实现可以通过修改Content的位置实现。假设Content的大小为(400, 1000)，每页显示大小为(400, 600)，那么默认的显示位置为(0, 0)，上翻一页的位置为(0, 600)，下翻一页的位置为(0, -600)。可以通过设置Content的anchoredPosition属性来改变位置。


void ScrollPrev()
{
    Vector2 newPosition = scrollRect.content.anchoredPosition;
    newPosition.y += 600;
    scrollRect.content.anchoredPosition = newPosition;
}
void ScrollNext()
{
    Vector2 newPosition = scrollRect.content.anchoredPosition;
    newPosition.y -= 600;
    scrollRect.content.anchoredPosition = newPosition;
}

3. 实现拖拽功能

除了支持按钮翻页之外，ScrollRect还可以通过拖拽的方式来实现滚动的效果。拖拽功能可以通过给ScrollRect对象添加一个Drag脚本来实现。


public class Drag : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler
{
    private bool isDragging = false;
    private Vector2 startPosition;
    private Vector2 dragStartPosition;
    public void OnBeginDrag(PointerEventData eventData)
    {
        isDragging = true;
        startPosition = scrollRect.content.anchoredPosition;
        dragStartPosition = eventData.position;
    }
    public void OnDrag(PointerEventData eventData)
    {
        if (isDragging)
        {
            float delta = eventData.position.y - dragStartPosition.y;
            scrollRect.content.anchoredPosition = startPosition + new Vector2(0, delta);
        }
    }
    public void OnEndDrag(PointerEventData eventData)
    {
        isDragging = false;
    }
}

3.1 添加拖拽脚本

创建一个新的C#脚本文件，命名为"Drag"，并将其添加到ScrollRect对象上。这样，我们就可以在拖动ScrollRect区域的时候，改变Content的位置。


Drag drag = scrollRectObj.AddComponent();

4. 总结

通过以上步骤，我们可以实现一个带按钮翻页和拖拽功能的ScrollRect。这样的ScrollRect更加灵活和交互友好，可以满足游戏中各种列表的需求。同时，我们可以根据具体需求对ScrollRect进行功能的扩展和定制。

UGUI ScrollRect实现带按钮翻页支持拖拽