Unity插件SuperScrollView详解(基础篇)
一.SuperScrollView插件概述
UGUI SUPER SCROLLVIEW基于UGUI ScrollRect提供了易于定制的滚动浏览量。这是一组C＃脚本，可帮助您创建所需的ScrollView。它非常强大且针对性能高度优化。
此插件是收费的，在AssetStore可以下载
SuperScrollView应该掌握到什么程度？
- 1.使用时知道Editor中怎么设置，脚本中逻辑怎么写
- 2.LoopListView2, LoopGridView and LoopStaggeredGridView 这3个核心组件分别在什么情况使用
- 3.会使用脚本中的公有方法
二.SuperScrollView安装
将unitypackage包拖入Asset目录完成导入，生成SuperScrollView目录，包含了Demo，Editor和Scripts三个目录，还有一个很有帮助的文档DocumentV2_4，如下图所示：
三.官方文档总结提炼(快速入门)
3.1 概述
3.2 LoopListView2组件
3.2.1 LoopListView2 Inspector Settings
Size：每个Item可以有不同的Prefab，Size指Item使用的Prefab总数
ElementX：每个Item有4个参数，当展开Element0后，可以看到有2个Element0，下面的Element0下面还有4个属性，以改变Padding为例，改变MPading和改变ItemPadding是一样的，这里推荐直接改ItemPadding，下面之所以多了4个属性可能是因为XPosOffset是自适应的属性
当Item有多个prefab时，需要添加多个Element
eg:一个排行榜有多个页签，切换页签时item不一样，这种情况需要添加多个Element
ItemPrefab：该Item使用gameObject的引用
ItemPadding：和下个Item的间距
XPosOffset：ScrollView最左侧到Item最左侧的间距
InitCreateCount：该Item对象池初始数量(可以填0，不知道为什么要手动设置，官方没有说)
SupportScrollbar：使用ScrollBar时勾上
ItemSnapEnable: 启用后，当滚动结束时，Item将被吸附(Snap)到预设的位置
ItemSnapPivot：给Item定义一个吸附轴心点，控制Item被吸附的位置
ViewPortSnapPivot：给ViewPort定义一个吸附轴心点，控制ViewPort吸附Item的位置
在上图中，ViewPortSnapPivot的Y设为1，代表ViewPort顶部将吸附item
ItemSnapPivot的Y设为0.5表示item中部将被吸附，滚动效果符合预期
ArrangeType:滚动方向，有4种选择
3.2.2 LoopListView2 Example
下文给出一个简化的LoopListView2 Example，可以取来作为快速开发的基础代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
namespace SuperScrollView
{
public class ItemData1
{
public string itemName;
public string itemDes;
public ItemData1(string name, string des)
{
itemName = name;
itemDes = des;
}
}
public class TopToBottomDemoScript : MonoBehaviour
{
private LoopListView2 mLoopListView;
private int itemNum = 15;
List<ItemData1> ssvData = new List<ItemData1>();
void Start()
{
mLoopListView = GetComponent<LoopListView2>();
for (int i = 0; i < itemNum; i++)
{
ItemData1 data = new ItemData1("name"+i, "des"+i);
ssvData.Add(data);
}
mLoopListView.InitListView(itemNum, OnGetItemByIndex);
}
LoopListViewItem2 OnGetItemByIndex(LoopListView2 listView, int index)
{
if (index < 0 || index >= itemNum)
{
return null;
}
ItemData1 itemData = ssvData[index];
if(itemData == null)
{
return null;
}
LoopListViewItem2 item = listView.NewListViewItem("ItemPrefab1");
ListItemX itemScript = item.GetComponent<ListItemX>();
if (item.IsInitHandlerCalled == false)
{
item.IsInitHandlerCalled = true;
itemScript.Init();
}
itemScript.UpdateItemUI(itemData,index);
return item;
}
}
}
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
namespace SuperScrollView
{
public class ListItemX : MonoBehaviour
{
private Text mNameText;
private Text mDescText;
int mItemDataIndex = -1;
public void Init()
{
mNameText = transform.Find("TextName").GetComponent<Text>();
mDescText = transform.Find("TextDesc2").GetComponent<Text>();
}
public void UpdateItemUI(ItemData1 itemData, int itemIndex)
{
mItemDataIndex = itemIndex;
mNameText.text = itemData.itemName;
mDescText.text = itemData.itemDes;
}
}
}
3.2.3 LoopListView2常用API
1.InitListView
LoopListView2组件的初始化方法
public void InitListView(int itemTotalCount,
System.Func<LoopListView2, int, LoopListViewItem2> onGetItemByIndex,
LoopListViewInitParam initParam = null)2.NewListViewItem
用来获取一个从参数itemPrefabName克隆的新item，通常在onGetItemByIndex内部调用
public LoopListViewItem2 NewListViewItem(string itemPrefabName)3.SetListItemCount
在运行时设置item数量
public void SetListItemCount(int itemCount, bool resetPos = true)4.RefreshAllShownItem
刷新当前可视的item，经常在SetListItemCount之后调用，然而不是每次都需要调用RefreshAllShownItem。
必须调用的情形：当前显示的N-M个节点，在数据变化后N-M个节点的数据也变化了，则应调用RefreshAllShownItem
public void RefreshAllShownItem()5.MovePanelToItemIndex
以从上至下的排列方式为例，该方法将移动Content直到itemIndex所在的item的上方和视口的上方对齐
public void MovePanelToItemIndex(int itemIndex, float offset)6.OnItemSizeChanged
For a vertical scrollrect, when a visible item’s height changed at runtime, then this method should be called to let the LoopListView2 component reposition all visible items’ position
public void OnItemSizeChanged(int itemIndex)3.3 LoopGridView组件
3.3.1 LoopGridView Inspector Settings
ItemPrefabList：同LoopListView2
GridFixedType:有两个选项ColumnCountFixed or RowCountFixed，即列固定或者行固定RowCount/ColumnCount: if GridFixedType is ColumnCountFixed, then here you wouldset the column countof the GridView; if GridFixedType is RowCountFixed, then here you wouldset the row countof the GridView
Padding:the space between the items and the viewport
3.3.2 LoopGridView Example
下文给出一个简化的LoopGridView Example，可以取来作为快速开发的基础代码，item上脚本ListItemX同LoopListView2
using System.Collections;
using System.Collections.Generic;
using System.Reflection;
using UnityEditorInternal.VersionControl;
using UnityEngine;
using UnityEngine.UI;
namespace SuperScrollView
{
public class ItemData1
{
public string itemName;
public string itemDes;
public ItemData1(string name, string des)
{
itemName = name;
itemDes = des;
}
}
public class GridViewDemoScript2 : MonoBehaviour
{
public LoopGridView mLoopGridView;
private int itemNum = 15;
List<ItemData1> ssvData = new List<ItemData1>();
// Use this for initialization
void Start()
{
for (int i = 0; i < itemNum; i++)
{
ItemData1 data = new ItemData1("name" + i, "des" + i);
ssvData.Add(data);
}
mLoopGridView.InitGridView(ssvData.Count, OnGetItemByRowColumn);
}
LoopGridViewItem OnGetItemByRowColumn(LoopGridView gridView, int itemIndex,int row,int column)
{
if (itemIndex < 0 || itemIndex >= ssvData.Count)
{
return null;
}
ItemData1 itemData = ssvData[itemIndex];
if (itemData == null)
{
return null;
}
LoopGridViewItem item = gridView.NewListViewItem("ItemPrefab0");
ListItemX itemScript = item.GetComponent<ListItemX>();
if (item.IsInitHandlerCalled == false)
{
item.IsInitHandlerCalled = true;
itemScript.Init();
}
itemScript.UpdateItemUI(itemData, itemIndex, row, column);
return item;
}
}
}
3.3.3 LoopGridView常用API
1. InitGridView
InitGridView组件的初始化方法；类似LoopListView2
public void InitGridView(int itemTotalCount,
System.Func<LoopGridView,int,int,int, LoopGridViewItem> onGetItemByRowColumn,
LoopGridViewSettingParam settingParam = null,
LoopGridViewInitParam initParam = null)2.NewListViewItem
同LoopListView2
3.SetListItemCount
同LoopListView2
4.RefreshAllShownItem
同LoopListView2
5.MovePanelToItemByRowColumn
类似LoopListView2
public void MovePanelToItemByRowColumn(int row,int column, float offsetX = 0,float offsetY = 0)