目录
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
{
///
/// 用户名称
///
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上,然后按照名称将对应的物体拖到脚本公开变量中即可。
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类挂载在列表项预制体上
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
看不懂可私信哦!