사용 방법은 다음과 같다.
1. 메뉴 > NGUI > Create > 2D UI 생성
2. 메뉴 > NGUI > Create > Scroll View
또는 Add Component > NGUI > Scroll View 컴포넌트를 추가한다.
UI Root 하위에 Scroll View 오브젝트를 생성한다.
ScrollView에 UIScrollView 컴포넌트가 추가된다.
 |
 |
3. Scroll View 오브젝트 UIPanel에서 Size 조정한다.
가로 방향으로 스크롤 하기 위해 Movement는 Horizontal로 정한다.
스크롤뷰의 Cell의 크기가 128이기 때문에 Y 사이즈를 128로 설정했다.
4. 메뉴 > NGUI > Create > Grid 를 생성한다. 셀의 크기는 128 X 128로 설정한다.
Scroll View 하위에 Grid 오브젝트를 생성한다.
5. 메뉴 > NGUI > Create > Widget을 추가한다. Size를 128 X 128로 설한다.
Grid 하위에 Widget 오브젝트를 생성한다.
오브젝트 이름을 Continer에서 Item으로 수정한다.
6. Item에서 Add Component > NGUI > Interaction > Drag Scroll View를 추가한다.
7. Item에서 메뉴 > NGUI > Attach > Collider를 추가한다.
Box Collider의 크기는 자동으로 128 * 128 설정된다.
8. 메뉴 > NGUI > Create > Sprite 를 추가한다.
Size는 Cell Size와 일치 시킨다. 여기서는 128 X 128이다.
디폴트 값으로 blue 스프라이트를 선택한다.
9. 메뉴 > NGUI > Create > Label 을 추가한다.
디폴트 값으로 blue를 입력한다.
10. 프리팹을 만들기 위해 Item을 Project 뷰로 드래그 한다.
Hierarchy 뷰의 Item은 제거한다.
11. 아이템을 추가하는 스크립트를 Grid 노드의 컴포넌트로 추가한다.
- ScrollItem.cs를 만들어 Grid 노드의 컴포넌트로 추가한다.
- 아이템의 프리팹을 prefabItem에 드래그 한다.
- 상위노드 ScrollVIew를 드래그 한다.
Reposition으로 아이템들이 겹치지 않도록 한다.
GetComponent<UIGrid>().Reposition()
scrollView 변수는 스크롤의 위치를 가장 왼쪽이나 위에 위치 시키기 위해 필요하다.
scrollView.GetComponent<UIScrollView>().ResetPosition();
Insert 함수에서 GetChildObj 함수로 "Sprite"와 "Label" 노드를 구한다.
이미지와 텍스트를 수정한다.
//ScrollItem.cs
uusing UnityEngine;
using System.Collections;
public class ScrollItem : MonoBehaviour {
//ScrollView prefab GameObject
public GameObject prefabItem;
public GameObject scrollView;
bool runMakeItem = false;
void Update()
{
if (runMakeItem == false)
{
MakeItem ();
runMakeItem = true;
}
}
void MakeItem()
{
Insert("blue", "blue");
Insert ("gray", "gray");
Insert ("Green", "green");
Insert ("orang", "orange");
Insert ("red", "red");
Insert ("yellow", "yellow");
//item이 겹치지 않도록 위치를 계산한다.
GetComponent<UIGrid>().Reposition();
//item 시작 위치를 top이나 제일 왼쪽으로 정열한다.
//scrollView.GetComponentInChildren< UIScrollView >().ResetPosition();
scrollView.GetComponent<UIScrollView>().ResetPosition();
}
void Insert(string imgName, string textName)
{
GameObject obj = Instantiate(prefabItem, new Vector3(0f, 0f, 0f), Quaternion.identity) as GameObject;
obj.transform.parent = this.transform;
obj.transform.localScale = new Vector3(1f, 1f, 1f);
UISprite sprite = GetChildObj (obj, "Sprite").GetComponent<UISprite>();
UILabel label = GetChildObj (obj, "Label").GetComponent<UILabel>();
sprite.spriteName = imgName;
label.text = textName;
}
//자식 오브젝트 리스트 얻어오기
GameObject GetChildObj( GameObject source, string strName )
{
Transform[] AllData = source.GetComponentsInChildren< Transform >();
GameObject target = null;
foreach( Transform Obj in AllData )
{
if( Obj.name == strName )
{
target = Obj.gameObject;
break;
}
}
return target;
}
}
uusing UnityEngine;
using System.Collections;
public class ScrollItem : MonoBehaviour {
//ScrollView prefab GameObject
public GameObject prefabItem;
public GameObject scrollView;
bool runMakeItem = false;
void Update()
{
if (runMakeItem == false)
{
MakeItem ();
runMakeItem = true;
}
}
void MakeItem()
{
Insert("blue", "blue");
Insert ("gray", "gray");
Insert ("Green", "green");
Insert ("orang", "orange");
Insert ("red", "red");
Insert ("yellow", "yellow");
//item이 겹치지 않도록 위치를 계산한다.
GetComponent<UIGrid>().Reposition();
//item 시작 위치를 top이나 제일 왼쪽으로 정열한다.
//scrollView.GetComponentInChildren< UIScrollView >().ResetPosition();
scrollView.GetComponent<UIScrollView>().ResetPosition();
}
void Insert(string imgName, string textName)
{
GameObject obj = Instantiate(prefabItem, new Vector3(0f, 0f, 0f), Quaternion.identity) as GameObject;
obj.transform.parent = this.transform;
obj.transform.localScale = new Vector3(1f, 1f, 1f);
UISprite sprite = GetChildObj (obj, "Sprite").GetComponent<UISprite>();
UILabel label = GetChildObj (obj, "Label").GetComponent<UILabel>();
sprite.spriteName = imgName;
label.text = textName;
}
//자식 오브젝트 리스트 얻어오기
GameObject GetChildObj( GameObject source, string strName )
{
Transform[] AllData = source.GetComponentsInChildren< Transform >();
GameObject target = null;
foreach( Transform Obj in AllData )
{
if( Obj.name == strName )
{
target = Obj.gameObject;
break;
}
}
return target;
}
}
12. Item 프리팹에 UIButton과 ItemClick.cs 스크립트를 컴포넌트로 추가한다.
UIButtton 컴포넌트 추가 : NGUI > Interaction > Button 추가
ItemClick.cs를 Item 컴포넌트로 추가한다.
Inspector 뷰에서 ItemClick을 UIButto의 OnClick - Notify로 드래그 한다.
컴폰넌트로 추가한 ItemClick을 OnClick의 Notify로 드래그하고 나면 다음과 같이 된다.
//ItemClick.cs
using UnityEngine;
using System.Collections;
public class ItemClick : MonoBehaviour {
int index;
void Start() {
index = 0;
foreach (Transform child in this.transform.parent)
{
if (child == transform) {
break;
}
index++;
}
}
void OnClick()
{
UILabel label = transform.Find ("Label").GetComponent<UILabel>();
Debug.Log (index + "번 째 아이템 클릭됨" + " color: " + label.text);
}
}
using UnityEngine;
using System.Collections;
public class ItemClick : MonoBehaviour {
int index;
void Start() {
index = 0;
foreach (Transform child in this.transform.parent)
{
if (child == transform) {
break;
}
index++;
}
}
void OnClick()
{
UILabel label = transform.Find ("Label").GetComponent<UILabel>();
Debug.Log (index + "번 째 아이템 클릭됨" + " color: " + label.text);
}
}
Sart( )에서 자직의 갯수를 index로 설정한다.
UIButton의 클릭 이벤트를 처리하기 위해 OnClick( ) 함수에서 Item의 Label 문자열을 출력합니다.
14. 실행
소스 : ItemClick.cs ScrollItem.cs
PS)
Item이 Scroll뷰의 패널보다 작은 경우 스크롤(드래그)이 안되어야 한다.
이런 경우, 스크롤을 막을려면 다음과 같이 "Cancel Drag If Fits"를 체크 하면된다.
이런 경우, 스크롤을 막을려면 다음과 같이 "Cancel Drag If Fits"를 체크 하면된다.