[ゲーム開発の実践]Unityはリストをリサイクルし、不規則なサイズをサポートします（オブジェクトプール| UGUI | ScrollRect |デモソースコード）

I.はじめに

みなさん、こんにちは。私は新しいです。
小さな友人が質問領域にUnity不規則な循環再利用リストを実装する方法を尋ねました。誰かが今日すでにバージョンを実装していて、効果が良いことがわかりました。

アドレス：https ://github.com/aillieo/UnityDynamicScrollViewしかし、これはこの記事の第3部で説明されているように、バージョンには1つあります。修正しました。GitHub
GitHub
BUG

誰もが良いホイールを使っています。今日はこのバージョンの使い方を紹介します。
この記事の最終的な効果は次のとおりです。

2.使用方法

1.スクロールビューを作成します

UI次のように、ノード上に1つ作成します。次のScroll Viewように、ノードのコンポーネントを削除します。コード内のコンポーネントまたはコンポーネントをハングアップします。例としてコンポーネントを取り上げます。



Scroll ViewScroll Rect

ScrollViewScrollViewExScrollViewEx

注：すべての機能をScrollViewEx継承ScrollViewし、ターゲットを絞った最適化を実行しitemます。ページネーションを実行します。適切なページサイズを設定すると、パフォーマンスが向上します。

コンポーネントを吊るした後の効果は次のとおりです。

2.スクロールビューパラメータを設定します

2.1。幅と高さを調整します

Scroll Viewまず、幅と高さを調整しましょう。

2.2、スクロールバースライダーを削除します

スライダーScroll Viewが2つあることがわかります。必要ありません。子ノードの下の合計を直接削除できます。削除後、前にスペースが残っていたことがわかりますが、スペースがなくなったため、調整する必要があります。全体を埋めるために、次のように両方を選択して変更しますScrollbar

Scrollbar HorizontalScrollbar Vertical

ViewportScrollbarScrollbarViewportScroll View

ViewportRightBottom0

2.3。アイテムテンプレートの設定：アイテムテンプレート

リストに1つずつ表示するには、item最初にitemテンプレートをScroll View作成する必要があります。子ノードの下にテンプレートを作成し、次のようImageに名前を変更しitem、次のように幅と高さを調整してから

、ノードを選択し、今すぐに設定します。次のように、の幅と高さを入力しますitem



Scroll ViewItem TemplateitemDefault Item Sizeitem

2.4.オブジェクトプールサイズを設定します：プールサイズ

リストの繰り返しの作成と破棄を防ぐためにitem、ここではオブジェクトプールが使用され、オブジェクトプールのサイズを設定する必要がありますPool Size。オブジェクトをオブジェクトプールに詰め込み続ける場合（オブジェクトを取り出さないでください）、オブジェクトプールがいっぱいになると、オブジェクトをオブジェクトプールに詰め込むことはできなくなります。オブジェクトプールの適切なサイズを設定する必要があります。リストの表示領域に表示できる最大のものにすることをお勧めしますitem。数量、ここでは、リストの表示領域が最大で表示されると2倍推定し、オブジェクトプールサイズを設定します。に、10item20

2.5、リストの配置方向を設定します

このリストは、4ある種の配置の方向性を示しています。オプションを見ると、それが何を意味するのかがわかります。ここではVertical、例として取り上げます。

2.6。ページサイズを設定します：ページサイズ

ScrollViewコンポーネントを使用している場合、Page Sizeそのような設定はなく、ScrollViewExコンポーネントのみがこの設定を持ちます。
なぜページネーションを設定するのですか？座標とサイズを保存するために使用されるScrollViewリストにコピーが保持されます。リストに大量のデータがあるとします。中央に新しいデータを挿入する必要があります。このとき、大量のデータを再計算する必要があります。座標とサイズの調整は非常に高価です。パフォーマンスの解決策は、ページングを設定し、一度に1ページのみを維持することです。これにより、パフォーマンスが大幅に向上します。リストの表示領域に表示できる最大数よりも多く設定することをお勧めします。ここでは、に設定されています。List<ScrollItemWithRect>item

itemitemitemitem
item2倍30

2.7。その他の一般的な設定

設定ContentしてViewport、次のように

確認Horizontalまたはスライド方向に応じてVertical、ここでは垂直方向にスライドするだけなので、確認するだけですVertical。

3.アイテムにいくつかの要素を追加します

ベアの上itemにいくつかの要素を追加してから、次のようにインターフェイス全体を微調整します。

ノード構造は次のとおりです。

4.テストコードを書く

MyTest.cs次のようにスクリプトを作成します。

注：TestScript.csおよびTestLargeAmount.csは、元の作成者によって提供されたテストスクリプトです。

最初にデータ構造を定義します

// MyTest.cs

public struct RankItemData
{
    
    
	// 名次
    public int rank;
    // 名字
    public string name;
}

Listリストデータを格納するオブジェクトを宣言し、

// MyTest.cs

List<RankItemData> testData = new List<RankItemData>();

それでは、いくつかのテストデータを作成するメソッドを書いてみましょう。

// MyTest.cs

private void Start()
{
    
    
	// 构造测试数据
    InitData();
}

private void InitData()
{
    
    
	// 构建50000个排名数据
    for (int i = 1; i <= 50000; ++i)
    {
    
    
        RankItemData data = new RankItemData();
        data.rank = i;
        data.name = "Name_" + i;
        testData.Add(data);
    }
}

ScrollView次のように、メンバーオブジェクトを宣言しScrollView、コールバック関数を設定します

// MyTest.cs

using System.Collections.Generic;
using UnityEngine;
using AillieoUtils;

public class MyTest : MonoBehaviour
{
    
    
	...
    public ScrollView scrollView;

	private void Start()
    {
    
    
    	...
    	
        scrollView.SetUpdateFunc((index, rect) =>
        {
    
    
            // TODO 更新item的UI元素
        });
        scrollView.SetItemSizeFunc((index) =>
        {
    
    
            // TODO 返回item的尺寸
            return Vector2.one;
        });
        scrollView.SetItemCountFunc(() =>
        {
    
    
            // TODO 返回数据列表item的总数
            return 0;
        });
    }
}

次に、コールバックの特定のコンテンツを1つずつ実装します。
更新された要素item、UI

// MyTest.cs

scrollView.SetUpdateFunc((index, rectTransform) =>
{
    
    
    // 更新item的UI元素
    RankItemData data = testData[index];
    rectTransform.gameObject.SetActive(true);
    rectTransform.Find("rankText").GetComponent<Text>().text = data.rank.ToString();
    rectTransform.Find("nameText").GetComponent<Text>().text = data.name;
    Button btn = rectTransform.Find("Button").GetComponent<Button>();
    btn.onClick.RemoveAllListeners();
    btn.onClick.AddListener(()=>{
    
    
        Debug.Log(data.name);
    });
});

リターンのサイズ、トップ3の高さを高くしitemたい、リターン、他のリターン、itemVector2(812, 180)Vector2(812, 100)

// MyTest.cs

scrollView.SetItemSizeFunc((index) =>
{
    
    
    // 返回item的尺寸
    RankItemData data = testData[index];
    if(data.rank <= 3)
    {
    
    
        return new Vector2(812, 180);
    }
    else
    {
    
    
        return new Vector2(812, 100);
    }
});

itemデータリストの総数を返します。

// MyTest.cs

scrollView.SetItemCountFunc(() =>
{
    
    
    // 返回数据列表item的总数
    return testData.Count;
});

5.テストを実行します

MyTest.csスクリプトをぶら下げて次のようにメンバーを割り当てCanvas、非表示にして実行すると、効果は次のようになります。との間のスペースが少なくなり、変換してみましょう。Scroll View

item



itemitem

6、アイテムは直接間隔を増やします

1つitemを作成Imageし、名前を、bgset 、set 、bitに変更します。これにより、上部ユニットと下部ユニットの間にギャップが生じ、独自のコンポーネントを削除して再実行します。効果は次のようになり、効果が得られます。ご覧のとおり、リストデータは1つですが、サイクルで再利用されているのはごくわずかです。これは、多くのデータ項目を含むリストの表示に特に適しています。Anchorsstretch-strechTopBottom22

itemImage

50000UIitem

3.バグの修理

テスト中に1つ見つかりましBUGた。これを使用ScrollViewEx.csすると、ページをめくるときに境界で必死にトリガーされ、OnValueChangedページのめくりが速くなります。ページのめくりがおかしくなるのを防ぐため

にDemo、修正とダンピングを追加しています。

4.デモソースコード

この記事DemoのソースコードをアップロードしましたGitCode。興味のある学生は自分でダウンロードして勉強することができます。
アドレス：https ：//codechina.csdn.net/linxinfa/UnityDynamicScrollView

5.終了しました

さて、ここに書いてみましょう。
私は新しいです、https：//blog.csdn.net/linxinfa
、小さな会社で静かにUnity働く開発者、私Unityは学びたいより多くの人々を助け、お互いを励ますことができることを願っています〜