UGui实现排行榜,列表数据赋值,排序、升序、降序。

目录

UGUI滑动列表实现:

步骤:

下面是代码实现自动生成列表项并进行赋值排序:


UI滑动排行榜.unitypackage-Unity3D文档类资源-CSDN下载

上面连接点击下载,直接导入即可使用。

UGUI滑动列表实现:

步骤:

第一步
创建一个Image,为了方便区分我们改名为“ScrollView”,添加ScrollRect组件,设置组件:把horziontal(水平方向移动)取消勾选。再添加Mask组件,将Show Mask Graphic取消勾选。

UGui实现排行榜,列表数据赋值,排序、升序、降序。_第1张图片

 第二步
在ScrollView下添加Image,作为列表的背景,改名为”Viewport“。

UGui实现排行榜,列表数据赋值,排序、升序、降序。_第2张图片

第三步
在Viewport下添加Image,作为列表项的父物体,改名为“Content”,content的大小要和viewport背景一致。

设置锚点为与Pivot如下图

添加VerticalLayoutGroup组件,设置如下图

添加ContentSizeFitter组件,设置如下图

UGui实现排行榜,列表数据赋值,排序、升序、降序。_第3张图片

第四步

添加ScollBar滑动条,并放到合适的位置,Dircetion属性可以设置滑动条的滑动方向,根据自己需求选择使用。 UGui实现排行榜,列表数据赋值,排序、升序、降序。_第4张图片

第五步
回到ScrollView的ScrollRect组件。进行如下设置。

 UGui实现排行榜,列表数据赋值,排序、升序、降序。_第5张图片

第六步

在Content下新建Image作为列表项,改名为“Item”,宽度设置和Content一致,更美观,item中根据自己需求设置文本框和image来显示自己的内容,然后拖成预制体。

UGui实现排行榜,列表数据赋值,排序、升序、降序。_第6张图片

 第七步

创建两个下拉框,分别是排序数据类型与排序类型

UGui实现排行榜,列表数据赋值,排序、升序、降序。_第7张图片

 UGui实现排行榜,列表数据赋值,排序、升序、降序。_第8张图片

 在Template中可设置下拉选项的背景文字等信息:

UGui实现排行榜,列表数据赋值,排序、升序、降序。_第9张图片

上面就完成了滑动条基本的ui搭建。

参考链接:Unity实现滑动列表(ScrollView)-UGUI

下面是代码实现自动生成列表项并进行赋值排序:

1.先创建ItemData列表数据类,无需挂载。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

namespace ReportCard
{
    public class ItemData
    {
        /// 
        ///  用户名称
        /// 
        public string UserName { get; }
        /// 
        ///  用户id
        /// 
        public string Id { get; }
        /// 
        /// 当前分数
        /// 
        public float CurrentScore { get; }
        /// 
        /// 上一轮分数
        /// 
        public float LastScore { get; }
        /// 
        /// 最高分数
        /// 
        public float TopScore { get; }


        public ItemData(string userName,string id, float currentScore, float lastScore=0,float topScore=0)
        {
            UserName = userName;
            Id = id;
            CurrentScore = currentScore;
            LastScore = lastScore;
            TopScore = topScore;
        }
    }
}

2.创建ScrollView脚本挂载在面板对应的ScrollView上,然后按照名称将对应的物体拖到脚本公开变量中即可。

UGui实现排行榜,列表数据赋值,排序、升序、降序。_第10张图片

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

namespace ReportCard
{
    public class ScrollView : MonoBehaviour
    {
        /// 
        /// 滑动条
        /// 
        [SerializeField] Scrollbar scrollbar;
        /// 
        /// 列表框
        /// 
        [SerializeField] Transform Content;
        /// 
        /// 列表项预制体
        /// 
        [SerializeField] GameObject cellPrefab = default;
        /// 
        ///  排序类型下拉框
        /// 
        [SerializeField] Dropdown sortingType = default;
        /// 
        /// 排序方式下拉框
        /// 
        [SerializeField] Dropdown Sortord = default;

        /// 
        /// 缓存项
        /// 
        List cacheDatas = new List();
        void Start()
        {
            //下拉框选项变动引发事件
            sortingType.onValueChanged.AddListener(_ => SetSortord());
            sortingType.value = 0;

            Sortord.onValueChanged.AddListener(_ => SetSortord());
            Sortord.value = 0;
        }
        /// 
        /// 排序方式下拉框事件 和 排序类型下拉框事件
        /// 
        private void SetSortord()
        {
            if (cacheDatas.Count == 0) //如果列表项为0则返回
            {
                return;
            }
            SetReportCardData(cacheDatas);
        }

        /// 
        /// 设计排行榜数据
        /// 
        /// 
        public void SetReportCardData(List itemDatas)
        {
            cacheDatas = itemDatas;//缓存外部传来的列表数据
            Cell cell;//列表项
            DataProcessing(cacheDatas, () =>
            {
                if (Content.childCount != 0) //判断列表中是否已存在列表项 ,如果存在就重新赋值,没有就创建
                {
                    for (int i = 0; i < cacheDatas.Count; i++) //循环拿到列表项上的脚本并进行重新赋值
                    {
                        cell = Content.GetChild(i).GetComponent();
                        cell.SetItemInfo(new ItemData(cacheDatas[i].UserName, cacheDatas[i].Id, cacheDatas[i].CurrentScore, cacheDatas[i].LastScore, cacheDatas[i].TopScore), i + 1);
                    }
                }
                else
                {
                    for (int i = 0; i < cacheDatas.Count; i++)  //实例化列表项并赋值
                    {
                        cell = Instantiate(cellPrefab, Content).GetComponent();
                        cell.SetItemInfo(new ItemData(cacheDatas[i].UserName, cacheDatas[i].Id, cacheDatas[i].CurrentScore, cacheDatas[i].LastScore, cacheDatas[i].TopScore), i + 1);
                    }
                }
                scrollbar.value = 1;//每次改变列表数据时,将列表滑到最上方 。
            });
        }
        /// 
        /// 数据排序处理
        /// 
        /// 
        /// 
        void DataProcessing(List itemDatas, Action action)
        {
            float currentScore = 0;
            float nextScore = 0;
            //使用冒泡排序
            for (int i = 0; i < itemDatas.Count - 1; i++) //外层循环需要循环n - 1次
            {
                for (int j = 0; j < itemDatas.Count - 1 - i; j++)
                {
                    switch (sortingType.value) //根据下拉框类型来进行对应数据的排序
                    {
                        case 0:
                            currentScore = itemDatas[j].CurrentScore;
                            nextScore = itemDatas[j + 1].CurrentScore;
                            break;
                        case 1:
                            currentScore = itemDatas[j].LastScore;
                            nextScore = itemDatas[j + 1].LastScore;
                            break;
                        case 2:
                            currentScore = itemDatas[j].TopScore;
                            nextScore = itemDatas[j + 1].TopScore;
                            break;
                        default:
                            break;
                    }
                    if (Sortord.value == 0)//根据下拉框类型来判断是升序还是降序
                    {
                        if (currentScore < nextScore)
                        {
                            ItemData data = itemDatas[j + 1];
                            itemDatas[j + 1] = itemDatas[j];
                            itemDatas[j] = data;
                        }
                    }
                    else
                    {
                        if (currentScore > nextScore)
                        {
                            ItemData data = itemDatas[j + 1];
                            itemDatas[j + 1] = itemDatas[j];
                            itemDatas[j] = data;
                        }
                    }
                }
            }
            action.Invoke();
        }
        /// 
        /// 清除数据
        /// 
        public void ClearData()
        {
            if (Content.childCount != 0)
            {
                cacheDatas.Clear();//缓存数据清除
                for (int i = 0; i < Content.childCount; i++)//列表项清除
                {
                    Destroy(Content.GetChild(i).gameObject);
                }
            }
        }
    }
}

3.创建Cell类挂载在列表项预制体上

UGui实现排行榜,列表数据赋值,排序、升序、降序。_第11张图片

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

namespace ReportCard
{
    public class Cell : MonoBehaviour
    {
        [SerializeField] Image Bg;
        [SerializeField] Text rankingText;
        [SerializeField] Text userNameText;
        [SerializeField] Text userIdText;
        [SerializeField] Text currentScoreText;
        [SerializeField] Text lastScoreText;
        [SerializeField] Text topScoreText;
        [HideInInspector] public ItemData data;
        public void SetItemInfo(ItemData itemData, int ranking)
        {
            data = itemData;
            rankingText.text = ranking.ToString(); ;
            userNameText.text = data.UserName;
            string id = data.Id.Substring(data.Id.Length - 4, 4);
            userIdText.text = "ID:**************" + id;
            currentScoreText.text = data.CurrentScore.ToString();
            lastScoreText.text = data.LastScore.ToString();
            topScoreText.text = data.TopScore.ToString();
        }

    }
}

4.创建ReportCardManager类进行应用测试,在Start里调用Test方法。

using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;
using EasingCore;
using System;
using ReportCard;
/// 
/// 成绩单管理
/// 
public class ReportCardManager : MonoBehaviour
{
    ScrollView scrollView;
    GameObject ReportCardWindow;
    /// 
    /// 缓存项
    /// 
    List cacheDatas = new List();
    void Start()
    {
        ReportCardWindow = transform.Find("ReportCardWindow").gameObject;
        scrollView = ReportCardWindow.GetComponentInChildren();
        ReportCardWindow.transform.Find("CloseButton").GetComponent

UGui实现排行榜,列表数据赋值,排序、升序、降序。_第12张图片

 5.将ReportCardWindow禁用掉,开始运行UGui实现排行榜,列表数据赋值,排序、升序、降序。_第13张图片

 看不懂可私信哦!

你可能感兴趣的:(Unity,unity,ugui)