UGUI Super ScrollView를 사용하여 다양한 요소 목록 작성

10384 단어 ScrollViewUnityAsset

UGUI Super ScrollView



이번에는 이 자산으로 순환 스크롤 보기를 만들겠습니다.

할 수 있다


Scrollview의 prefab를 사용하는 놈이야.
자세한 내용은 Asset이 설명한 곳에 애니메이션이 있는데 한번 보면 알 수 있을 거예요.
데모지
!

즉시 하다


먼저 시작 장면에서 Canvas 일반 및 ScrollView 구성
콘텐츠 작성을 위한 Prefab
뭐, 이런 느낌이야.이미지 및 텍스트 단순화

위의 기준에 따라 높이를 바꾸고 싶어서 Prefab의 pivt는 이렇습니다.

이것은 prefab에 부속된script입니다
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ScrollItem : MonoBehaviour
{
    public Text title;
    public Image img;

    public void SetData(string titleStr, Sprite sprite)
    {
        title.text = titleStr;
        img.sprite = sprite;
    }
}

ScrollView의 Scroll Rect가 부착된 위치에서 Loop List View2의 스크립트를 부착합니다.
그런 다음 Loop List View2의 script와 함께 prefab의 Item Proefablist

그리고 Scroll 스크립트 관리
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using SuperScrollView;

public sealed class ScrollUI : MonoBehaviour
{
    public LoopListView2 listView = null;

    public Sprite[] imgList;
    private List<ItemData> _list;

    public class ItemData
    {
        public string title;
        public int imgNo;

        public ItemData(string title, int imgNo)
        {
            this.title = title;
            this.imgNo = imgNo;
        }
    }

    private void Start()
    {
        _list = new List<ItemData>();
        ItemData itemData = null;
        for (int i = 0; i < 100; i++)
        {
            itemData = new ItemData("Item" + i, i);
            _list.Add(itemData);
        }

        Debug.LogError(_list.Count);
        listView.InitListView(_list.Count, OnUpdate);
    }

    private LoopListViewItem2 OnUpdate(LoopListView2 view, int index)
    {
        if (index < 0 || _list.Count <= index)
            return null;

        var data = _list[index];
        var itemObj = view.NewListViewItem("Item"); // prefabの名前を設定
        var itemUI = itemObj.GetComponent<ScrollItem>();

        itemUI.SetData(data.title, imgList[data.imgNo]);

        return itemObj;
    }
}
그리고 이 대본을 어떤 장면에 올려놓을게요.
스크립트에 이미지 및 LoopListView2 첨부

이 정도면 충분해요.
OnUpdate로 index를 얻을 수 있기 때문에 색깔을 교체하고 높이도 바뀌었어요. 그렇습니다!

이렇게 하면 항목이 많아도 가볍게 스크롤 보기를 만들 수 있습니다!
요소 수가 변할 때, SetListItemCount 방법이라고 부르기만 하면 된다.
여기서 Destroy라고 할 필요 없어요.
두 번째 매개 변수는 스크롤 리셋입니다.
listView.SetListItemCount(_list.Count, true);

좋은 웹페이지 즐겨찾기