目录
UI滑动排行榜.unitypackage-Unity3D文档类资源-CSDN下载
上面连接点击下载，直接导入即可使用。
UGUI滑动列表实现：
步骤：
第一步
创建一个Image，为了方便区分我们改名为“ScrollView”，添加ScrollRect组件，设置组件：把horziontal（水平方向移动）取消勾选。再添加Mask组件，将Show Mask Graphic取消勾选。
第二步
在ScrollView下添加Image，作为列表的背景，改名为”Viewport“。
第三步
在Viewport下添加Image，作为列表项的父物体，改名为“Content”，content的大小要和viewport背景一致。
设置锚点为与Pivot如下图
添加VerticalLayoutGroup组件，设置如下图
添加ContentSizeFitter组件，设置如下图
第四步
添加ScollBar滑动条，并放到合适的位置，Dircetion属性可以设置滑动条的滑动方向，根据自己需求选择使用。 
第五步
回到ScrollView的ScrollRect组件。进行如下设置。
第六步
在Content下新建Image作为列表项，改名为“Item”，宽度设置和Content一致，更美观，item中根据自己需求设置文本框和image来显示自己的内容，然后拖成预制体。
第七步
创建两个下拉框，分别是排序数据类型与排序类型
在Template中可设置下拉选项的背景文字等信息：
上面就完成了滑动条基本的ui搭建。
参考链接：Unity实现滑动列表(ScrollView)-UGUI
下面是代码实现自动生成列表项并进行赋值排序：
1.先创建ItemData列表数据类，无需挂载。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
namespace ReportCard
{
public class ItemData
{
/// <summary>
/// 用户名称
/// </summary>
public string UserName { get; }
/// <summary>
/// 用户id
/// </summary>
public string Id { get; }
/// <summary>
/// 当前分数
/// </summary>
public float CurrentScore { get; }
/// <summary>
/// 上一轮分数
/// </summary>
public float LastScore { get; }
/// <summary>
/// 最高分数
/// </summary>
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上，然后按照名称将对应的物体拖到脚本公开变量中即可。
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
namespace ReportCard
{
public class ScrollView : MonoBehaviour
{
/// <summary>
/// 滑动条
/// </summary>
[SerializeField] Scrollbar scrollbar;
/// <summary>
/// 列表框
/// </summary>
[SerializeField] Transform Content;
/// <summary>
/// 列表项预制体
/// </summary>
[SerializeField] GameObject cellPrefab = default;
/// <summary>
/// 排序类型下拉框
/// </summary>
[SerializeField] Dropdown sortingType = default;
/// <summary>
/// 排序方式下拉框
/// </summary>
[SerializeField] Dropdown Sortord = default;
/// <summary>
/// 缓存项
/// </summary>
List<ItemData> cacheDatas = new List<ItemData>();
void Start()
{
//下拉框选项变动引发事件
sortingType.onValueChanged.AddListener(_ => SetSortord());
sortingType.value = 0;
Sortord.onValueChanged.AddListener(_ => SetSortord());
Sortord.value = 0;
}
/// <summary>
/// 排序方式下拉框事件 和 排序类型下拉框事件
/// </summary>
private void SetSortord()
{
if (cacheDatas.Count == 0) //如果列表项为0则返回
{
return;
}
SetReportCardData(cacheDatas);
}
/// <summary>
/// 设计排行榜数据
/// </summary>
/// <param name="itemDatas"></param>
public void SetReportCardData(List<ItemData> 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>();
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>();
cell.SetItemInfo(new ItemData(cacheDatas[i].UserName, cacheDatas[i].Id, cacheDatas[i].CurrentScore, cacheDatas[i].LastScore, cacheDatas[i].TopScore), i + 1);
}
}
scrollbar.value = 1;//每次改变列表数据时，将列表滑到最上方 。
});
}
/// <summary>
/// 数据排序处理
/// </summary>
/// <param name="itemDatas"></param>
/// <param name="action"></param>
void DataProcessing(List<ItemData> 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();
}
/// <summary>
/// 清除数据
/// </summary>
public void ClearData()
{
if (Content.childCount != 0)
{
cacheDatas.Clear();//缓存数据清除
for (int i = 0; i < Content.childCount; i++)//列表项清除
{
Destroy(Content.GetChild(i).gameObject);
}
}
}
}
}
3.创建Cell类挂载在列表项预制体上
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;
/// <summary>
/// 成绩单管理
/// </summary>
public class ReportCardManager : MonoBehaviour
{
ScrollView scrollView;
GameObject ReportCardWindow;
/// <summary>
/// 缓存项
/// </summary>
List<ItemData> cacheDatas = new List<ItemData>();
void Start()
{
ReportCardWindow = transform.Find("ReportCardWindow").gameObject;
scrollView = ReportCardWindow.GetComponentInChildren<ScrollView>();
ReportCardWindow.transform.Find("CloseButton").GetComponent<Button>().onClick.AddListener(HideReportCardWindow);
Test();
}
public void Test()
{
//测试 创建假数据
List<ItemData> datas = new List<ItemData>();
datas.Add(new ItemData("刘燃", "120109198312216535", 100, 80, 90));
datas.Add(new ItemData("徐爽", "210105198305032224", 89, 789, 77));
datas.Add(new ItemData("周鑫", "430681198811050058", 150, 720, 99));
datas.Add(new ItemData("王学昀", "310106198705064015", 350, 460, 11));
datas.Add(new ItemData("魏超", "610104198511107337", 88, 880, 900));
datas.Add(new ItemData("郭胜伟", "41282919861205005X", 520, 442, 252));
datas.Add(new ItemData("杨建军", "510703198206262217", 752, 840, 752));
datas.Add(new ItemData("刘阳", "320402198509133432", 752, 880, 41));
datas.Add(new ItemData("王建尧", "640203198201171015", 752, 578, 11));
datas.Add(new ItemData("魏超", "50024119890802531X", 842, 54, 900));
ShowReportCardWindow(datas);
}
/// <summary>
/// 显示界面
/// </summary>
/// <param name="datas">用户数据</param>
public void ShowReportCardWindow(List<ItemData> datas)
{
if (cacheDatas.Count != 0)
{
cacheDatas.Clear(); //清除缓存
}
for (int i = 0; i < datas.Count; i++)//外部传来的数据不一定是ItemData类型的，所以对数据进行转换
{
//将对应的数据添加到自己的列表中 用户名称 用户id 本轮分数 上局分数 历史最高分
cacheDatas.Add(new ItemData(datas[i].UserName, datas[i].Id, datas[i].CurrentScore, datas[i].LastScore, datas[i].TopScore));
}
//设置UI列表 传递数据
scrollView.SetReportCardData(cacheDatas);
//界面显示
ReportCardWindow.SetActive(true);
}
/// <summary>
/// 隐藏界面
/// </summary>
public void HideReportCardWindow()
{
//界面隐藏
ReportCardWindow.SetActive(false);
//数据清除
scrollView.ClearData();
}
}
5.将ReportCardWindow禁用掉，开始运行
看不懂可私信哦！
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
