UI翻页功能，带同步页码标签

UI翻页功能，带同步页码标签

一． 创建组件

首先创建组件，分为主体layout与页码两部分。

1.Layout部分依次为遮罩MASK》LayOut脚本》子物体（依次包含），另外在mask上挂一个scroll Rect控制现layout拖动。（关闭Vertical）

PS：scroll Rect的拖动范围：脚本挂在上级物体A上，然后指定要拖动的物体B，B应比A大，B不能超出A。

如图，若B没有包含完全，则只能拖动在框体中的一部分，超出部分滑动不到。

完成效果：可用鼠标拖动选项卡。

 

2.页码上挂Toggle组件，并加入到一个toggle Group。

完成后，同时只能选择一个Toggle。

脚本部分

二．控制滑动时固定到一定页码

思路：用horizontalNormalizedPosition获取滑动头位置，同时也可用它来设定滑动头位置。设置一个数组来存储每页滑动头的位置，每当拖动结束，就算出最近的页码位置，并移动到那里。这里应使用缓动公式，以获得更美观的效果。拖动时设置状态量关闭缓动，以防止抖动。最后，传递方法使滑动头与页码保持同步。

代码如下：

usingSystem.Collections;

usingSystem.Collections.Generic;

usingUnityEngine;

usingUnityEngine.UI;

usingUnityEngine.EventSystems;

 

publicclassPageController : MonoBehaviour,IEndDragHandler

{

   ScrollRect scrollRect;

   publicToggle[] toggleArray;

   publicfloat dragSpeed = 0.2f;

   float target;

   bool isDarg= false;//缓动标志量

   float[]PageArray = newfloat[] { 0, 0.5f, 1f};//存储页码位置，根据需要改变

 

    voidStart () {

       scrollRect = this.GetComponent<ScrollRect>();

    }

   

    voidUpdate () {

       if(isDarg)

       {

           scrollRect.horizontalNormalizedPosition += (target -scrollRect.horizontalNormalizedPosition) * dragSpeed;

       }//缓动脚本

       if(Mathf.Abs(target - scrollRect.horizontalNormalizedPosition) <= 0.001f)

       {isDarg = false;}//缓动完成关闭缓动

   }

 

   publicvoidOnEndDrag(PointerEventData eventData)

   {

       for (int i = 0; i <toggleArray.Length ; i++)

       {

            float n = PageArray[i] + 0.25f;//增加的部分（+0.25f）要根据需要改变

            if (scrollRect.horizontalNormalizedPosition <= n)

            {

                target = PageArray[i];//计算缓动到那一页

                isDarg = true;

                toggleArray[i].isOn = true;//同步页码标签

                break;

            }

       }

   }

 

   publicvoid OnChangePage(int n)

   {

       target = PageArray[n];//页码标签设置缓动目标//在页码的Toggle上注册该方法，参数为页码-1

       isDarg = true;

   }

}

PS：代码中使用了数组，关闭后可以隐藏一些项，可以简化unity中的属性面板。

另外，可以使用附加类的方法简化公共变量，如：

[System.Serializable]

publicclassBoundary

{

   publicfloat XMin = -9f, XMax =9f, ZMin = -2f, ZMax = 25f;

}

在主类中实例化一个类，用public，之后可以用类名.变量名访问

这样可以让boundary收起简化公共变量面板。