UGUI源码分析：Scrollbar与ScrollRect滑动列表组件

系列

UGUI源码分析系列总览
相关前置：
UGUI EventSystem源码分析
UGUI源码分析：Selectable交互组件的基类

---

UML图一览

UGUI中的滑动组件主要由ScrollRect与Scrollbar构成，首先先简单介绍以下Scrollbar组件的实现原理。

Scrollbar

BaseClass: Selectable

Interface: IInitializePotentialDragHandler,IBeginDragHandler，IDragHandler,ICanvasElement

Intro: UGUI中滚动条组件

• initializePotentialDrag：提前告知可能触发拖拽的接口
• IXXXDragHandler：三个拖拽接口
• ICanvasElement： Canvas重建接口，当Canvas发生更新时执行重建操作

属性介绍

• Interactable：是否可被交互（false时无法通过EventSystem进行交互）
• Transition：状态变化过渡模式（相关详情）
• Navigation：导航(相关详情)
• Handle Rect ：可滑动的部分
• Direction ：滑动方向
• Value ：滑动条当前值（0~1之间）
• Size ：Handle的尺寸
• NumberOfSteps ：大于1时代表把bar分成Step-1份

实现

Scrollbar组件的实现原理：通过拖拽事件、点击事件、移动按键来控制滚动条在一定区域中移动，并计算位于该区域中（0~1）之间的值value。

拖拽原理类似于ScrollRect，这个我们具体在ScrollRect中进行分析。

点击交互: 发生点击交互时，会根据点击位置启动一个携程来进行位置更新。

public override void OnPointerDown(PointerEventData eventData)
{
   
    //如果是要进行拖拽了那就没事了:)
    if (!MayDrag(eventData))
        return;
    base.OnPointerDown(eventData);//执行Selectable基类方法
    isPointerDownAndNotDragging = true; //标记状态
    m_PointerDownRepeat = StartCoroutine(ClickRepeat(eventData)); //启动变化携程
}

protected IEnumerator ClickRepeat(PointerEventData eventData)
{
   
    //当抬起操作时则此循环结束
    while (isPointerDownAndNotDragging)
    {
   
        if (!RectTransformUtility.RectangleContainsScreenPoint(m_HandleRect, eventData.position, eventData.enterEventCamera))
        {
   
            Vector2 localMousePos;
            //获取鼠标点击位于HandleRect的本地坐标
            if (RectTransformUtility.ScreenPointToLocalPointInRectangle(m_HandleRect, eventData.position, eventData.pressEventCamera, out localMousePos))
            {
   
                //根据轴变化value值,频率取决于size大小
                var axisCoordinate = axis == 0 ? localMousePos.x : localMousePos.y;
                if (axisCoordinate < 0)
                    value -= size;
                else
                    value += size;
            }
        }
        yield return new WaitForEndOfFrame();
    }
    StopCoroutine(m_PointerDownRepeat);
}

到此，Scrollbar组件基本详情已经了解清楚了，因为在日常开发中，Scrollbar经常是与ScrollRect组件一同使用构成滑动列表的（Scroll View），所以我们重点对于ScrollRect进行分析。

---

ScrollRect

BaseClass: UIBehaviour

Interface: IInitializePotentialDragHandler,IXXXDragHandler，IScrollHandler,ICanvasElement,ILayoutElement,ILayoutGroup

Intro: UGUI中滑动列表组件

• initializePotentialDrag：提前告知可能触发拖拽的接口，这个接口只有在存在IDragHandler接口时才会触发，当点击或触碰时便触发了（会发生在BeginDrag之前）
• IXXXDragHandler：三个拖拽接口，这里就简写成这样，监听整个拖拽过程（开始，拖拽，结束）。
• IScrollHandler: 鼠标中间滚动事件接口
• ICanvasElement： Canvas重建接口，当Canvas发生更新时执行重建操作
• ILayoutElement&ILayoutGroup：布局相关接口

ScrollRect，是UGUI中滑动列表功能时经常被使用的组件。它提供了水平和垂直两种滑动模式，配合Scrollbar组件经常被用于UI制作。

属性介绍

• Content ：滚动区域
• Horizontal ：水平滚动开关
• Vertical：垂直滚动开关
• MovementType ：移动模