• 等级选择滚动


    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来进行插值运算即可
            }
        }
    }

     7、为其中的Toggle按钮注册该类中的方法,这样就可以了。

  • 相关阅读:
    ajax
    前端学数据库之子查询
    读书笔记:《HTML5开发手册》Web表单
    阅读《编写可读代码的艺术》笔记
    windows环境下sublime的nodejs插件详细安装图解
    有关css3的一些问题
    前面的话
    gulp思考
    10种排序算法分析
    ajax异步请求
  • 原文地址:https://www.cnblogs.com/zhh19981104/p/8696063.html
Copyright © 2020-2023  润新知