0427 NGUI Scroll View+(데이터 연동)

스크롤뷰 컴포넌트를 만들면,

위처럼 자주색 경계선이 생긴다. 스크롤 뷰를 만들어낼 영역을 지정해준다.

 

스크롤뷰 안에 Grid 컴포넌트 삽입해주고,

그리드 안에 컨텐츠 프리팹으로 넣을 요소를 만들어준다.

해당 프리팹에 박스 콜라이더 컴포넌트 붙혀서 영역 제대로 지정, Drag Scroll View 컴포넌트 붙혀서 Scroll View 끌어다 Assgn

 

안에 들어갈 프리팹 많이 복사해서 각자 배열 위치 정렬

 

빈 오브젝트 하나 만들어서 스트립트 부착, assign

using UnityEngine;

public class NGUITestScrollView : MonoBehaviour
{
    public GameObject prefab;
    public UIGrid grid;

    // Start is called before the first frame update
    void Start()
    {
        for (int i = 0; i < 10; i++) 
        {
            var go = Instantiate<GameObject>(this.prefab, this.grid.transform);
        }
        grid.Reposition();
    }

 

데이터 연동

프리팹 버튼 부분에 버튼+박스 콜라이더 만들어 영역 지정

프리팹에 스크립트 부착 후 필요 부분 assign

using UnityEngine;

public class UIListItem : MonoBehaviour

{
    public UIButton btnPurchase;
    public GameObject popular;
    public GameObject best;
    public UILabel labelPrice;
    public UILabel labelName;
    private ShopData data;
    public UISprite icon;

    public virtual void Init(ShopData data) 
    {
        this.data = data;

        this.labelName.text = this.data.name;
        this.labelPrice.text = this.data.price.ToString();
        this.icon.spriteName = this.data.sprite_name;
        this.icon.width = this.data.width;
        this.icon.height = this.data.height;
        Debug.Log(this.data.height);

        if (this.data.is_popular) 
        {
            this.popular.SetActive(true);
            this.best.SetActive(false);
        }
        if (this.data.is_best) 
        {
            this.popular.SetActive(false);
            this.best.SetActive(true);
        }
    }
}

public class ShopData 
{
    public int id;
    public string name;
    public bool is_popular;
    public bool is_best;
    public int price;
    public string sprite_name;
    public int width;
    public int height;
}

using System.Collections.Generic;
using UnityEngine;
using Newtonsoft.Json;
using System.Linq;

public class NGUITestScrollView : MonoBehaviour
{
    public GameObject prefab;
    public UIGrid grid;
    private Dictionary<int, ShopData> dicShopDatas;

    // Start is called before the first frame update
    void Start()
    {
        var ta = Resources.Load<TextAsset>("listitem_data");
        var json = ta.text;
        this.dicShopDatas = JsonConvert.DeserializeObject<ShopData[]>(json).ToDictionary(x => x.id);
        
        foreach (var data in this.dicShopDatas.Values) 
        {
            var go = Instantiate<GameObject>(this.prefab, this.grid.transform);
            var listItem = go.GetComponent<UIListItem>();
            listItem.Init(data);
            listItem.btnPurchase.onClick.Add(new EventDelegate(() =>
            {
                Debug.LogFormat("{0} {1}", data.id, data.price);
            }));
            this.grid.Reposition();
        }

    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

[
  {
    "id": "100",
    "name": "Wooden Chest",
    "is_popular": "TRUE",
    "is_best": "FALSE",
    "price": "100",
    "sprite_name": "shop_img_chest_0",
    "width": "222",
    "height": "205"
  },
  {
    "id": "101",
    "name": "Silver Chest",
    "is_popular": "FALSE",
    "is_best": "TRUE",
    "price": "600",
    "sprite_name": "shop_img_chest_1",
    "width": "236",
    "height": "218"
  },
  {
    "id": "102",
    "name": "Golden Chest",
    "is_popular": "FALSE",
    "is_best": "FALSE",
    "price": "1000",
    "sprite_name": "shop_img_chest_2",
    "width": "250",
    "height": "231"
  },
  {
    "id": "103",
    "name": "Epic Chest",
    "is_popular": "FALSE",
    "is_best": "FALSE",
    "price": "1500",
    "sprite_name": "shop_img_chest_3",
    "width": "238",
    "height": "246"
  },
  {
    "id": "104",
    "name": "Legendary Chest",
    "is_popular": "FALSE",
    "is_best": "FALSE",
    "price": "6500",
    "sprite_name": "shop_img_chest_4",
    "width": "296",
    "height": "276"
  }
]

버튼 클릭 시 연동된 데이터의 id와 가격이 출력되도록 했다.