1、效果图如下:可以通过鼠标在关卡上进行滑动,也可以通过下面的小按钮进行滚动页面
2、相关的背景和按钮就不做多的描述了,直接讲解核心的东西吧:
3、创建一个空的UI游戏物体【A】,然后为其挂载GridLayoutGroup组件,为其中的按钮进行排序,
设置空物体的大小,要满足包括的内容。提供一个小的技巧,可以将创建出来的关卡选择按钮放在一个空的游戏物体下面,
这样改按钮就不会被Grid进行缩放了。将按钮添加到挂载GridLayoutGroup组件的游戏物体下面,成为其子物体。
4、创建一个Image,为其添加Scroll Rect 和Mask组件,其中Scroll Rect是让其具有滑动的功能的,而mask是将超出边界的东西进行隐藏,
其中的Show Mask Graphic决定是否显示该背景色,一般是不显示的,则取消勾选。其中Image的大小就是可以显示内容的大小,也就是可以进行滑动的大小。
5、添加下面的按钮,Toggle组件的使用,就不细说了。
6、在A物体下面创建脚本,如下:
using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; //事件接口的命名空间 using UnityEngine.UI; public class MyScrollRect : MonoBehaviour,IBeginDragHandler,IEndDragHandler { public float smoothing = 4.0f; //拖拽的速度 public Toggle[] ToggleArray; //设置toggle数组,和RectArray数组下标对应 private ScrollRect scrollRect; private float[] RectArray =new float[] { 0f, 0.333333f, 0.666666f, 1f }; //一共是4页,其中每一页的位置信息 private float horizontalPositionTarget = 0; //目标的拖拽位置 private bool isDrag = false; //通过设定标志位来确定是否是在拖拽,如果在拖拽就不进行移动 private void Start() { scrollRect = this.GetComponent<ScrollRect>(); //需要通过ScrollRect组件对其进行获取位置信息 } private void Update() { if (isDrag==false) { scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition, horizontalPositionTarget, Time.deltaTime * smoothing); //进行插值运算 } } /// <summary> /// 拖拽开始的事件 /// </summary> /// <param name="eventData"></param> public void OnBeginDrag(PointerEventData eventData) { isDrag = true; //拖拽开始,进行中 } /// <summary> /// 拖拽结束的事件 /// </summary> /// <param name="eventData"></param> public void OnEndDrag(PointerEventData eventData) { isDrag = false; //拖拽结束 float Pos_x = scrollRect.horizontalNormalizedPosition; int index = 0; //默认是从第一页开始的 float offset = Mathf.Abs(Pos_x - RectArray[index]); //通过查找最小偏移量来确定是在那一页 for (int i = 1; i < RectArray.Length; i++) { //通过遍历找出离页数最近的哪一个 float offset_temp = Mathf.Abs(Pos_x - RectArray[i]); if(offset_temp < offset) { //当有比第一页还近的就要进行更换了 index = i; offset = offset_temp; } } horizontalPositionTarget = RectArray[index]; //通过设定目标值然后通过lerp来进行插值运算即可 ToggleArray[index].isOn = true; //当通过滚动页面的时候也要对下面的按钮进行同步 //scrollRect.horizontalNormalizedPosition = RectArray[index]; //不太好,没有平滑的效果 } //以下四个是通过注册按钮的点击事件;来达到换页的效果的 public void MoveToPad_01(bool isOn) { //第一页的按钮 if (isOn==true) { //当选中了就会进行移动: horizontalPositionTarget = RectArray[0]; //通过设定目标值然后通过lerp来进行插值运算即可 } } public void MoveToPad_02(bool isOn) { //第二页的按钮 if (isOn == true) { //当选中了就会进行移动: horizontalPositionTarget = RectArray[1]; //通过设定目标值然后通过lerp来进行插值运算即可 } } public void MoveToPad_03(bool isOn) { //第三页的按钮 if (isOn == true) { //当选中了就会进行移动: horizontalPositionTarget = RectArray[2]; //通过设定目标值然后通过lerp来进行插值运算即可 } } public void MoveToPad_04(bool isOn) { //第四页的按钮 if (isOn == true) { //当选中了就会进行移动: horizontalPositionTarget = RectArray[3]; //通过设定目标值然后通过lerp来进行插值运算即可 } } }