Unity Scrollview插件扩展UGUI Super ScrollView

本文是翻译其使用文档,帮助自己使用的一篇文章,如果需要插件,请加群 : 891555732


在SuperScrollView包中,有三个主要组件:

  • LoopListView2 : 主要用于ListView
  • LoopGridView : 主要用于所有项目大小相同的GridView
  • LoopStaggeredGridView : 主要用于StaggeredGridView。StaggeredGridView是GridView,其中项目对于垂直GridView具有不同的高度(对于水平GridView具有不同的宽度),如www.pinterest.com

是附加到UGUI ScrollRect的相同游戏对象的组件。它们帮助UGUI ScrollRect以高性能和节省内存的方式支持任何计数项。

<a name="HKWya"></a>

一.LoopListView2

对于有10,000个项目的ScrollRect, LoopListView2并没有真正创建10,000个项目,而是根据viewport的大小创建一些项目。<br />ScrollRect上升时,例如,顶部LoopListView2组件将检查项的位置,而一旦窗口的最上面的项目,那么LoopListView2组件回收最上面的项目,同时检查最下面的物品的位置,一旦靠近窗口的底部,最下面的项LoopListView2组件将调用onGetItemByIndex处理程序来创建一个新项目,然后将新创建的项目放在最下面的项目下,因此新创建的项目将成为新的最下面的项目。<br />每个项目可以使用不同的预制,可以有不同的高度/宽度和填充。<br />在path: Assets -> SuperScrollView ->Demo-> Scenes -> ListView文件夹中有几个例子可以帮助你学习LoopListView2组件。<br />
17787668-ba6eaf88a9f458eb.png
image.png

<br />下图是TopToButtom布局的scrollrect的样子:<br />
17787668-7e85eafd9821c2fd.png
image.png
<br />在上面的图片中,scrollrect有10000个条目,但实际上只创建了7个条目。
<a name="1DmWj"></a>

1.LoopListView2 Inspector Settings

在Inspector中,为了确保LoopListView2组件(跟ScrollRect挂在一起)工作正常,需要设置几个参数:<br />
17787668-d3898ef15ffb7946.png
image.png

<a name="hQTro"></a>

ItemPrefabList : 这是要克隆的现有项目。

每个项目可以使用不同的预置,每个预置可以有不同的默认填充(scrollrect中每个项目之间的间距)。此外,每个预制块可以有不同的默认x本地pos(用于垂直scrollrect)或默认y本地pos(用于水平scrollrect),这里称为(x / y)PosOffset。每个预制块都有一个获取和回收动作的池,InitCreateCount是开始时在池中创建的计数。<br />实际上,在运行时,每个项目可以有不同的内边距和(X/Y)PosOffset,您可以在onGetItemByIndex回调中更改一个项目的内边距和(X/Y)PosOffset。你可以通过LoopListViewItem2获取/设置它们。填充和LoopListViewItem2。StartPosOffset。<br />重要提示:所有itemPrefab的localScale需要为(1,1,1)。

<a name="vrKiM"></a>

SupportScrollbar : 如果选中,LoopListView2组件将支持scrollbar。

<a name="zjexv"></a>

ItemSnapEnable : 如果勾选此项,LoopListView2组件将尝试将项目吸附到viewport中的配置位置。

17787668-60be95f1a256bdff.png
image.png

<br />ItemSnapPivot是项目的snap枢轴点的位置,定义为矩形本身大小的一部分。0,0对应左下角,1,1对应右上角。<br />ViewPortSnapPivot是ScrollRect ViewPort的snap枢轴点的位置,定义为矩形本身大小的一部分。0,0对应左下角,1,1对应右上角。
<a name="h2xnb"></a>

ArrangeType : 滚动方向,有四种类型

<a name="OmcsO"></a>

①.TopToBottom

此类型用于垂直滚动rect,而item0、item1、…itemN在scrollrect视图中从上到下依次定位,如下图所示:<br />
17787668-f43fe2e7507c292c.png
image.png

<a name="fudCz"></a>

②.BottomToTop

此类型用于垂直滚动rect,而item0、item1、…itemN在scrollrect视图中从下到上依次定位,如下图所示:<br />
17787668-27a97d66278327c3.png
image.png

<a name="HLOy4"></a>

③.LeftToRight

此类型用于水平scrollrect,而item0、item1、…itemN在scrollrect视图中从左到右逐个定位。<br />
17787668-68398f889135128e.png
image.png

<a name="2flQj"></a>

④.RightToLeft

此类型用于水平scrollrect,而item0、item1、…itemN在scrollrect视图中从右向左逐个定位。<br />
17787668-6da722fc2f51fdb9.png
image.png

<a name="VZstT"></a>

<a name="ye1Ff"></a>

2.LoopListView2 Important Public Method

<a name="ECmzU"></a>

LoopListViewItem2

每个创建的项目有一个LoopListViewItem2组件自动附加:<br />

17787668-08d0e7cd341153cb.png
image.png
<br />LoopListViewItem2组件非常简单:<br />mItemIndex属性指示列表中该项的索引,如前所述,如果itemTotalCount设置为-1,则mItemIndex可以是从-MaxInt到+MaxInt。如果<br />itemTotalCount设置了一个值>=0,那么mItemIndex只能从0到itemTotalCount -1。<br />mItemId属性表示项目的id。此属性是在创建项目或从池中获取项目时设置的,在项目回收到池中之前不会再更改。<br />

<a name="G1qVd"></a>

LoopListView2方法以及属性

InitListView 用于初始化LoopListView2组件。有3个参数
TotalCount 滚动视图中的项目总数。如果此参数设置为-1,则意味着有无限项,并且不支持滚动条,而ItemIndex可以从-MaxInt到+MaxInt。如果将此参数设置为一个值>=0,则ItemIndex只能从0到itemTotalCount -1。
onGetItemByIndex 当项目进入scrollrect视图端口时,将使用项目' index作为参数调用此操作,以便创建项目并更新其内容。LoopListViewItem2是onGetItemByIndex的返回值
NewListViewItem 用于获取新项,而新项是来自名为itemPrefabName的预制块的克隆。这种方法通常用onGetItemByIndex。
SetListItemCount 可用于在运行时设置scrollview的项总数。如果此参数设置为-1,则意味着有无限项,并且不支持滚动条,而ItemIndex可以从-MaxInt到+MaxInt。如果将此参数设置为一个值>=0,则ItemIndex只能从0到itemTotalCount -1。如果resetPos设置为false,则scrollrect的内容位置在此方法完成后不会更改。
GetShownItemByItemIndex方法(参数是itemIndex) 按项目索引获取可见项目。如果项目不可见,则此方法返回null。
GetShownItemByItemIndex方法(参数是Index) 所有可见的项都存储在一个名为mItemList的列表<LoopListViewItem2>;此方法是通过可见项列表中的索引获取可见项。参数索引从0到mItemList.Count。
ShownItemCount 以获得所有可见项的总数。
RefreshItemByItemIndex 按项目索引更新项目。如果itemIndex-th项不可见,则此方法将不执行任何操作。否则,此方法将首先调用onGetItemByIndex(itemIndex)来获取更新后的项,然后重新定位所有可见项的位置。
RefreshAllShownItem 此方法将更新所有可见项。
MovePanelToItemIndex 这个方法将把scrollrect内容的位置移动到(itemIndex-th项的位置+偏移量),在当前版本中,itemIndex是从0到MaxInt,偏移量是从0到scrollrect视口大小。
OnItemSizeChanged 对于垂直scrollrect,当一个可见项的高度在运行时发生变化时,应该调用此方法来让LoopListView2组件重新定位所有可见项的位置。<br />对于水平scrollrect,当一个可见项的宽度在运行时发生变化时,应该调用这个方法,让LoopListView2组件重新定位所有可见项的位置。
FinishSnapImmediately 快速移动将立即结束。
CurSnapNearestItemIndex 用viewport快照点获取最近的项目索引。
SetSnapTargetItemIndex 设置snap目标项索引。此方法在PageViewDemo中使用。
ClearSnapData 清除当前吸附目标,然后LoopScrollView2将自动吸附到CurSnapNearestItemIndex。

<br />下面的代码是onGetItemByIndex的一个例子:

LoopListViewItem2 OnGetItemByIndex(LoopListView2 listView, int itemIndex) {
    if (itemIndex < 0 || itemIndex >= DataSourceMgr.Get.TotalItemCount) {
        return null;
    }
    //让数据显示出来
    ItemData itemData = DataSourceMgr.Get.GetItemDataByIndex(itemIndex); 
    if(itemData == null)
    {
        return null;
    }
    //获得一个新的item,每个项目可以使用不同的预制,NewListViewItem的参数是Prefab的名称。
    //所有的预制件都应该在LoopListView2检查器设置的ItemPrefabList中列出
    LoopListViewItem2 item = listView.NewListViewItem("ItemPrefab1");
    ListItem2 itemScript = item.gameObject.GetComponent<ListItem2>(); //获取自己的组件
    // IsInitHandlerCalled是假的意思是这个项目是新创建的,但不是从池中获取的。
    if (item.IsInitHandlerCalled == false) {
        item.IsInitHandlerCalled = true;
        itemScript.Init();//这里初始化item,如添加按钮单击事件监听器。
    }
    //更新显示项的内容,如图像、文本。
    itemScript.SetItemData(itemData);
    return item;
}

<a name="tjY2Y"></a>

二.LoopGridView

LoopGridView组件是附加到同一个游戏对象的UGUI ScrollRect,主要是针对GridView的所有项目具有相同的大小,并有固定的计数行或固定计数列。ScrollRect可以同时水平和垂直滚动。对于有10,000个项目的GridView,例如,100行100列,LoopGridView实际上并不创建10,000个项目,而是根据viewport的大小创建一些项目。<br />ScrollRect上升时,例如,LoopGridView组件将检查最上面一行的位置,和一旦窗口的最上面的一行,那么LoopGridView组件回收所有的物品最上面一行,同时检查最下面的一行的位置,一旦靠近窗口的底部,最下面的行LoopGridView组件将调用onGetItemByRowColumn处理程序来在新行中创建新行和viewport中的所有项,然后将新创建的行定位在最下面的行下,因此新创建的行成为新的最下面的行。<br />每个项目可以使用不同的预制。<br />在路径:Assets -> SuperScrollView -> Demo -> Scenes -> GridView的文件夹中有几个例子可以帮助你学习LoopGridView组件。<br />下面的图片是一个TopLeft到右下角(100行 100列)排列的ScrollRect的样子:<br />

17787668-00114709dbceeb5f.png
image.png
<br />在上面的图片中,GridView有10000个条目,但实际上,真正创建的条目很少。
<a name="ZUjY5"></a>

1.LoopGridView Inspector Settings

在Inspector中,为了确保LoopGridView2组件工作正常,需要设置几个参数:<br />
17787668-e31c888dd46ce6d1.png
image.png

<br />

ItemPrefabList 这是要克隆的现有项目。每个项目可以使用不同的预制。每个预制块都有一个获取和回收动作的池,InitCreateCount是开始时在池中创建的计数。<br />重要提示:<br />所有itemPrefab的localScale需要为(1,1,1)。<br />ScrollRect的content gameobject的localScale也需要是(1,1,1)。
GridFixedType 值可以是ColumnCountFixed或RowCountFixed。此属性类似于UGUI GridLayoutGroup.constraint和GridLayoutGroup.startAxis,也就是物品应该先放在哪个轴上。
RowCount/ColumnCount 如果GridFixedType是ColumnCountFixed,那么这里可以设置GridView的列数;如果GridFixedType是RowCountFixed,那么这里将设置GridView的行数,这个属性类似于UGUI GridLayoutGroup。constraintCount。
Padding 项目和视图之间的空间,这个属性类似于UGUI GridLayoutGroup.Padding。
ItemSize 项目的大小。如果将x或y设置为0,那么当LoopGridView组件被inited时,ItemSize将自动设置ItemPrefabList的第一项的大小。
ItemPadding GridView中每个项之间的间距量。
RecycleDistance 当项目将被回收时,项目离开视口的距离。
ItemSnapEnable 如果勾选此项,LoopGridView组件将尝试将项吸附到viewport中的配置位置。
ItemSnapPivot 是项目的单元枢轴点的位置,定义为矩形本身大小的一部分。0,0对应左下角,1,1对应右上角。
ViewPortSnapPivot 是ScrollRect视图端口的单元枢轴点的位置,定义为矩形本身大小的一部分。0,0对应左下角,1,1对应右上角。
ArrangeType 滚动方向,有四种类型:<br />TopLeftToBottomRight, bottom left, totopright, TopRightToBottomLeft, BottomRightToTopLeft。

<a name="GxXYR"></a>

2.LoopGridView Important Public Method

InitGridView 方法是初始化LoopGridView组件。有4个参数
itemTotalCount GridView中的项目总数。这个参数必须设置一个值>=0,而ItemIndex可以是0到itemTotalCount -1。
settingParam 这个参数是一个LoopGridViewSettingParam对象。你可以使用这个参数来覆盖在督察设置的值
onGetItemByRowColumn 当项目进入ScrollRect视图端口时,将使用项目' (itmeIndex、row、column)作为参数调用此操作,以便创建项目并更新其内容。
LoopGridViewItem 是onGetItemByRowColumn的返回值
NewListViewItem 此方法用于获取新项,而新项是来自已命名的预制块的克隆<br />itemPrefabName。此方法通常用于onGetItemByRowColumn。
SetListItemCount 此方法可用于在运行时设置GridView的项总数。如果resetPos设置为false,则ScrollRect的内容位置在此方法完成后不会更改。
GetShownItemByItemIndex 按项目索引获取可见项目。如果项目不可见,则此方法返回null。
GetShownItemByRowColumn 按(行、列)获取可见项。如果项目不可见,则此方法返回null。
RefreshItemByItemIndex(int itemIndex) 按项目索引更新项目。如果itemIndex-th项不可见,则此方法将不执行任何操作。否则,此方法将调用onGetItemByRowColumn以获取更新后的项
RefreshItemByRowColumn(int row,int column) 按(行、列)更新项。如果项不可见,则此方法将不执行任何操作。否则,此方法将调用onGetItemByRowColumn以获取更新后的项
RefreshAllShownItem 此方法将更新所有可见项。
MovePanelToItemByRowColumn 这个方法将把ScrollRect内容的位置移动到(itemIndex-th项的位置+偏移量)。
MovePanelToItemByIndex 此方法将面板的位置移动到((行、列)项的位置+偏移量)。
SetGridFixedGroupCount 在运行时更改GridFixedType和固定的行/列计数。你也可以在运行时通过SetItemSize(Vector2), setitempadd (Vector2), SetPadding(RectOffset)来改变itemSize, itempadd,contentPadding。
FinishSnapImmediately 快速移动将立即结束。
CurSnapNearestItemIndex 用viewport快照点获取最近的项目索引。
SetSnapTargetItemIndex 设置snap目标项索引。此方法在PageViewDemo中使用。
ClearSnapData 清除当前吸附目标,然后LoopScrollView2将自动吸附到CurSnapNearestItemIndex。

settingParam例子 :<br />

17787668-ee5c9f923aebd578.png
image.png

每个创建的项目有一个环网格viewitem组件自动附加:<br />
17787668-445d65c39f2af4da.png
image.png

<br />LoopGridViewItem组件非常简单:<br />mItemIndex属性指示GridView中该项的索引。<br />mItemId属性表示项目的id。此属性是在创建项目或从池中获取项目时设置的,在项目回收到池中之前不会再更改。

下面的代码是onGetItemByRowColumn的一个例子:

LoopGridViewItem OnGetItemByRowColumn(LoopGridView gridView, int itemIndex,int row,int column)
{
    //让数据显示出来
    ItemData itemData = DataSourceMgr.Get.GetItemDataByIndex(itemIndex); if (itemData == null)
    {
        return null;
    }
    //买一个新项目。每个项目都可以使用不同的预制件,NewListViewItem的参数是预制件的名称。
    //在环格视图检查器设置中,所有的预制组件都应该列在ItemPrefabList中
    LoopGridViewItem item = gridView.NewListViewItem("ItemPrefab0");
    ListItem18 itemScript = item.GetComponent<ListItem18>();
    // IsInitHandlerCalled是false的意思是这个项目是新创建的,但不是从池中获取的。
    if (item.IsInitHandlerCalled == false)
    {
        item.IsInitHandlerCalled = true;
        itemScript.Init();//这里初始化项目,如添加按钮单击事件监听器。
    }
    //更新显示项的内容,如图像、文本。
    itemScript.SetItemData(itemData, itemIndex, row, column);
    return item;
}

<a name="OSr0O"></a>

三.LoopStaggeredGridView

LoopStaggeredGridView主要用于StaggeredGridView,即项目对于垂直GridView具有不同的高度(对于水平GridView具有不同的宽度)。因此,如果GridView中的所有项都具有相同的大小,那么最好使用LoopGridView。<br />LoopStaggeredGridView类似于LoopListView2,对于有10,000个条目的ScrollRect, LoopStaggeredGridView实际上并不创建10,000个条目,而是根据viewport的大小创建一些条目。<br />当ScrollRect向上移动时,对于一个垂直的GridView, LoopStaggeredGridView组件将检查每一列的最顶层项的位置,并且一旦列的最顶层项离开了viewport,则LoopStaggeredGridView组件将回收最顶层项。<br />同时检查每一列的最下面的物品的位置,一旦一个列的最下面的条目是窗口的底部附近LoopStaggeredGridView组件所说的onGetItemByIndex处理程序来创建一个新项目,然后正电子新创建的项目在最下面的项目最短的列,列的最下面的条目的底部位置是最重要的在所有列的最下面的阵地。总的来说,所有的项目都是从左到右,从上到下排列的。<br />每个项目可以使用不同的预制。但对于垂直的GridView,项可以有不同的高度,但宽度必须相同。对于水平GridView,项可以有不同的宽度,但高度必须相同。<br />有两个示例可以帮助您学习LoopStaggeredGridView组件,它们位于path文件夹中:Assets—> SuperScrollView—> Demo—> Scenes—> StaggeredGridView。<br />
17787668-865ef3532cbe1304.png
image.png

<br />

<br />下图是TopToButtom将StaggeredGridView设置为3列的样子:<br />
17787668-a184d0a5ec4dd94f.png
image.png
<br />在上面的图中,scrollrect有10,000个条目,但实际上只创建了11个条目。
<a name="ViJPr"></a>

1.LoopStaggeredGridView Inspector Settings

在检查器中,为了确保LoopStaggeredGridView组件工作正常,需要设置几个参数:<br />

17787668-cb785393946a4c10.png
image.png
<br />ItemPrefabList:这是要克隆的现有项目。<br />每个项目可以使用不同的预置,每个预置可以有不同的默认填充(scrollrect中每个项目之间的间距)。每个预制块都有一个获取和回收动作的池,InitCreateCount是开始时在池中创建的计数。<br />实际上,在运行时,每个项目可以有不同的内边距,你可以在onGetItemByIndex回调中改变一个项目的内边距。你可以通过LoopStaggeredGridViewItem获取/设置它们。填充<br />重要提示:所有itemPrefab的localScale需要为(1,1,1)。<br />ArrangeType:滚动方向,这是相同的ListView。有四种类型:TopToBottom, BottomToTop, LeftToRight, RightToLeft。

<a name="poMNo"></a>

2.LoopStaggeredGridView Important Public Method

itemTotalCount scrollview中的项目总数,这个参数应该是>=0。
**GridViewLayoutParam 这个类非常简单,您需要一个新的GridViewLayoutParam实例并设置所需的值。<br />对于垂直GridView<br />- mColumnOrRowCount是列计数<br />- mItemWidthOrHeight是项目的宽度<br />- mPadding1是viewport left margin,<br />- mPadding2是viewport right margin。<br />

对于一个水平的GridView<br />- mColumnOrRowCount是行数<br />- mItemWidthOrHeight是项的高度<br />- mPadding1是viewport top margin,<br />- mPadding2是viewport bottom margin<br />
如果mCustomColumnOrRowOffsetArray为null,也就是说,您没有为这个参数设置值,那么GiriView将安排所有的行或列的平均值。如果mCustomColumnOrRowOffsetArray不为空,则数组的值为每一列/行的XOffset/YOffset,以及mCustomColumnOrRowOffsetArray。长度必须与mColumnOrRowCount相同。<br />onGetItemByItemIndex:当项目进入scrollrect视图端口时,将使用项目' index作为参数调用此操作,以允许您创建项目并更新其内容。 |
| LoopStaggeredGridViewItem | LoopStaggeredGridViewItem是onGetItemByItemIndex的返回值 |

每个创建的项目都有一个LoopStaggeredGridViewItem组件自动附加:<br />

17787668-93c5c0b0b06f96db.png
image.png
<br />mItemIndex属性表示GridView中项目的索引,可以是0到itemTotalCount -1。<br />mItemIndexInGroup属性指示列或行中该项的索引。这里“组”的意思是:对于垂直的GridView,组表示一列,对于水平的GridView,组表示一行。<br />mItemId属性表示项目的id。此属性是在创建项目或从池中获取项目时设置的,在项目回收到池中之前不会再更改。

<br />
<br />

<br /><br /><br /><br /><br /><br />**

17787668-4eca4da34eb71a37.png
发布了276 篇原创文章 · 获赞 98 · 访问量 30万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览