[Unity] GUI Infinity Scroll List 무한 리스트 구현 Json

bamsik 2016. 1. 19. 17:26

2016. 1. 19. 17:26

어떻게 보면 간단한 구현 일 수도 있겠지만
난 어려웠다. ㅠㅠ 그래서 다시 정리하는 차원에서 포스팅 해본다.

먼저 간략하게 요약해보자면…
Unity의 기본제공되는 GUI를 사용,
데이터 형태는 Json형태로 만들어서 사용하기 편리하도록 parsing을 거친 뒤 구현하였다. 동작 원리는 스크롤 시 화면에 보여지는 부분의 GameObject(Item)만 생성하여 Draw Call을 줄이는 방식으로, 업 스크롤 시 위로 올라가는 Item을 아래로 이동시켜 아랫쪽 데이터를 붙이고, 다운 스크롤 시 아래로 내려가는 Item을 위로 이동시켜 위쪽 데이터를 붙이는 방식이다. 아이템을 잡고 있는 GameObject의 길이는 최초에 계산되어 전체 Item 갯수만큼의 길이로 생성되어진다.
자전거의 톱니와 체인을 생각하면 쉽게 이해될듯하다.

Hierarchy 구성

스크린샷 2016-01-19 오후 12.27.42

스크립트 구성

스크린샷 2016-01-19 오후 4.25.59

테스트용 데이터 세팅하기
먼저 JsonData를 만들자
Assets > Resources 폴더를 만들고 그 안에 data.txt 파일을 하나 만든 후 아래와 같이 코딩한다. 참고로 data.txt는 그냥 아무 파일 하나 만들어서 확장명만 바꿔주면 된다.
데이터 형태는 나중에 어떻게든 바꿔서 사용할 수 있다.

data.text

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

{
  "music":[
    {
      "songtitle" : "Love Will Show You Everything",
      "singer" : "Various Artists",
      "image" : "image/Love Will Show You Everything",
      "genre" : "rock",
      "playtime" : "0"
    },
    {
      "songtitle" : "Love Will Show You Everything",
      "singer" : "Various Artists",
      "image" : "image/Love Will Show You Everything",
      "genre" : "rock",
      "playtime" : "0"
    },
 
    //...(최소 20개 이상은 되어야 테스트 해보기 좋으니 적당히 반복해서 복사하자.)
 
    {
      "songtitle" : "Love Will Show You Everything",
      "singer" : "Various Artists",
      "image" : "image/Love Will Show You Everything",
      "genre" : "rock",
      "playtime" : "0"
    }
  ]
}

Hierarchy의 Manager에 ManagerHandler, ModelHandler, ListModel 라는 이름으로 C# Script 3개를 생성하고 아래와 같이 코딩한다.

ManagerHandler.cs

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14

using UnityEngine;
 
public class ManagerHandler : MonoBehaviour {
    public InfiniteScroll infiniteScroll;
 void Start () {
        Application.targetFrameRate = 60;
        initList();
 }
    
    void initList()
    {
        infiniteScroll.ListStart();
    }
}

ListModel.cs

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

using UnityEngine;
using System.Collections.Generic;
 
 
public struct DataVO{
    public string SongTitle;
    public string Singer;
    public string Image;
    public string Genre;
    public float PlayTime;
}
 
public class ListModel : MonoBehaviour {
    private static ListModel _instance = null;    
    public DataVO dataVO;    
    public List<DataVO> MusicList = new List<DataVO>();    
    public static ListModel Instance{
        get{
            if(_instance == null){
                _instance = (GameObject.Find("Manager")).AddComponent<ListModel>();
            }            
            return _instance;
        }
    }
 
}

ModelHandler.cs

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

using UnityEngine;
using System.Collections.Generic;
using LitJson;
 
public class ModelHandler : MonoBehaviour {    
    private JsonData jsonData;
    public List<DataVO> List;
    string jsonString(){
        TextAsset t = (TextAsset) Resources.Load("data", typeof(TextAsset));
        return t.text;
    }
 
 void Awake () {        
        jsonData = JsonMapper.ToObject( jsonString() );        
        parsing();        
 }
    
    void parsing(){
        for(int i=0; i<jsonData["music"].Count; i++){
            
            ListModel.Instance.dataVO.SongTitle = (string) jsonData["music"][i]["songtitle"];
            ListModel.Instance.dataVO.Singer = (string) jsonData["music"][i]["singer"];
            ListModel.Instance.dataVO.Image = (string) jsonData["music"][i]["image"];
            ListModel.Instance.dataVO.Genre = (string) jsonData["music"][i]["genre"];
            ListModel.Instance.dataVO.PlayTime = float.Parse( (string) jsonData["music"][i]["playtime"] );
            
            ListModel.Instance.MusicList.Add(ListModel.Instance.dataVO);
        }
    }    
}

LitJson.dll은 여기에서 받을 수 있으며 Assets > Plugins(생성) 폴더에 넣어준다.

구현하기
먼저 Hierarchy의 ScrollRect(GameObject)에 ScrollRect 콤포넌트를 붙인다.
Infinity Content(GameObject)에 InfiniteScroll라는 C# Script을 생성한 후 아래와 같이 코딩한다.

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

using UnityEngine;
using UnityEngine.UI;
using System.Collections.Generic;
using UnityEngine.EventSystems;
 
public class InfiniteScroll : MonoBehaviour
{
 [SerializeField]
 private RectTransform m_ItemBase;
 [SerializeField, Range(0, 30)]
 int m_instantateItemCount = 9;    
    [SerializeField]
    float m_itemWidth = 1080;
    [SerializeField]
    float m_itemHeight = 200;
    [SerializeField]
    float gap = 10;    
 public Direction direction;
 [System.NonSerialized]
 public List<RectTransform> m_itemList = new List<RectTransform> ();
 protected float m_diffPreFramePosition = 0;
 protected int m_currentItemNo = 0; 
 public ScrollRect scrollRect; 
 public List<DataVO> listData;
 public enum Direction
 {
 Vertical,
 Horizontal,
 }
 
 //For Event
 private const float inchToCm = 2.54f; 
 [SerializeField]
 private EventSystem eventSystem = null; 
 [SerializeField]
 private float dragThresholdCM = 0.5f;
 //For drag Threshold
 private void SetDragThreshold()
 {
 if (eventSystem != null)
 {
 eventSystem.pixelDragThreshold = (int)(dragThresholdCM * Screen.dpi / inchToCm);
 }
 }
 
 // cache component
 private RectTransform m_rectTransform;
 protected RectTransform _RectTransform {
 get {
 if (m_rectTransform == null)
 m_rectTransform = GetComponent<RectTransform> ();
 return m_rectTransform;
 }
 }
 
 private float AnchoredPosition
 {
 get{
 return (direction == Direction.Vertical ) ? 
                -_RectTransform.anchoredPosition.y:
                _RectTransform.anchoredPosition.x;
 }
 }
    private float ItemScale{
        get{
            return (direction == Direction.Vertical) ?
            m_itemHeight :
            m_itemWidth;
        }
    }
 
 void Awake()
 {
 SetDragThreshold();
 }
 
 public void ListStart ()
 {
 listData = ListModel.Instance.MusicList;
        
 if(listData.Count<m_instantateItemCount){
 m_instantateItemCount = listData.Count;
 }else{
            m_instantateItemCount = (direction == Direction.Vertical) ?
                (int) System.Math.Truncate( Screen.height / ItemScale ) + 3 :
                (int) System.Math.Truncate( Screen.width / ItemScale ) + 3;
 }
 
 // create items
 scrollRect.horizontal = direction == Direction.Horizontal;
 scrollRect.vertical = direction == Direction.Vertical;
 scrollRect.content = _RectTransform;
        
        if(direction == Direction.Vertical){
            scrollRect.content.GetComponent<RectTransform>().SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, (ItemScale + gap) * (listData.Count-1) + gap );
            scrollRect.content.GetComponent<RectTransform>().SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, m_itemWidth + gap*2);
        }else{
            scrollRect.content.GetComponent<RectTransform>().SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, (ItemScale + gap) * (listData.Count-1) + gap );
            scrollRect.content.GetComponent<RectTransform>().SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, m_itemHeight + gap*2 );
        }
        
        
 scrollRect.onValueChanged.AddListener (valueChange);
        Debug.Log( listData.Count );
 
 m_ItemBase.gameObject.SetActive (false);
 
 for (int i=0; i<m_instantateItemCount; i++) {
 var item = GameObject.Instantiate (m_ItemBase) as RectTransform;
 item.SetParent (transform, false);
 item.name = i.ToString ();
            
            if(direction == Direction.Vertical){
                item.GetComponent<RectTransform>().SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, m_itemWidth - gap*2);
                item.GetComponent<RectTransform>().SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, m_itemHeight);
            }else{                
                item.GetComponent<RectTransform>().SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, m_itemWidth);
                item.GetComponent<RectTransform>().SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, m_itemHeight);
            }
            
 item.anchoredPosition = 
 (direction == Direction.Vertical ) ?
 new Vector2 (gap, - gap - (ItemScale + gap) * i) : 
 new Vector2 ((ItemScale + gap) * i + gap, -gap) ;
 m_itemList.Add (item);
 
 item.gameObject.SetActive (true);
            item.GetComponent<Item>().UpdateItem(i);
 }
 }
 
 private void valueChange(Vector2 _pos)
 {        
        // scroll up, item attach bottom  or  right
        while(AnchoredPosition - m_diffPreFramePosition < -(ItemScale + gap)*2 ){
            m_diffPreFramePosition -= (ItemScale + gap);
            
            var item = m_itemList [0];
            m_itemList.RemoveAt (0);
            m_itemList.Add (item);
            
            var pos = (ItemScale + gap) * m_instantateItemCount + (ItemScale + gap) * m_currentItemNo ;
 item.anchoredPosition = (direction == Direction.Vertical ) ? new Vector2 (gap, -pos - gap) : new Vector2 (pos + gap , -gap);
 
 m_currentItemNo ++;
            
            if(m_currentItemNo + m_instantateItemCount < listData.Count){
                item.GetComponent<Item>().UpdateItem(m_currentItemNo + m_instantateItemCount);
            }else{
                item.GetComponent<Item>().UpdateItem(-100);
            }
        }
        
        // scroll down, item attach top  or  left
        while(AnchoredPosition - m_diffPreFramePosition > 0){
            m_diffPreFramePosition += (ItemScale + gap);
            
            var itemListLastCount = m_instantateItemCount - 1; 
 var item = m_itemList [itemListLastCount];
 m_itemList.RemoveAt (itemListLastCount);
 m_itemList.Insert (0, item);
            
            m_currentItemNo --;
            
            var pos = (ItemScale + gap) * m_currentItemNo + gap; 
 item.anchoredPosition = (direction == Direction.Vertical ) ? new Vector2 (gap, -pos ): new Vector2 (pos, -gap);
            
            if(m_currentItemNo > -1){
                item.GetComponent<Item>().UpdateItem(m_currentItemNo);
            }else{
                item.GetComponent<Item>().UpdateItem(-100);
            }
        }
 }
}

Item(GameObject)에 Item 이라는 이름으로 C# Script를 생성해서 다름과 같이 코딩한다. 아이템 부분은 적당히 수정해서 사용할 수 있을 것이다.

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

using UnityEngine;
using UnityEngine.UI;
 
public class Item : MonoBehaviour 
{    
 public Text m_Text; 
 public Image m_Image;
 
 public void UpdateItem (int count) 
 {
        if(count == -100){
            gameObject.GetComponent<Image>().enabled = false;
            m_Text.gameObject.SetActive(false);
            m_Image.gameObject.SetActive(false);
        }else{
            gameObject.GetComponent<Image>().enabled = true;
            m_Text.gameObject.SetActive(true);
            m_Image.gameObject.SetActive(true);
            m_Text.text = count+1 + " - " + Screen.width + " x " + Screen.height;
            m_Image.sprite = Resources.Load<Sprite>(ListModel.Instance.MusicList[count].Image);
        }
 }
}

Infinity Content의 Inspector가 보이도록 한 후 아래 그림에서 보이는 것 처럼 드래그해서 각 해당 되는곳으로 넣어 준 후 ItemWidth, ItemHeight, Gap 에 원하는 사이즈를 입력한다.

스크린샷 2016-01-19 오후 5.05.25

마찬가지로 Item또한 아래 그림처럼 드래드앤 드롭해준다.

스크린샷 2016-01-19 오후 5.13.05

Manager도 아래와 같이 Infinity Content를 드래그 앤 드롭 해준다.

스크린샷 2016-01-19 오후 5.16.12

저작자표시

'unity C#' 카테고리의 다른 글

[Unity] Singleton을 Generic 으로 만들기 (0)	2017.11.06
[Unity] 뷰포리아 안드로이드 카메라 Auto Focus 활성화하기 (0)	2017.11.06
[Unity] Application.LoadLevel 사용시 fadeIn fadeOut 효과 (0)	2016.01.14
[Unity] Vector3 position 여러 타겟일때 중점 찾기 Camera (0)	2016.01.12
[Unity] android screenshot 갤러리 갱신 업데이트 방법 (0)	2016.01.12

KnightK

[Unity] GUI Infinity Scroll List 무한 리스트 구현 Json

'unity C#' 카테고리의 다른 글

+ Recent posts

티스토리툴바