Unity3D - NGUI: Drag and Drop, Grid, Scroll View

1. Drag and Drop

Sprite에 Drag and Drop Item을 추가하면 해당 아이템이 아무 곳에나 위치하는 것을 볼 수 있다. 이를 해결하기 위해 Grid를 사용해 보자. Scroll View 아래 GameObject를 추가하고 이름을 Grid로 바꾸고 UI Grid Component를 추가한다. (NGUI Component는 앞에 UI 구별자가 있다.) 그리고, 이전에 만들어 놓은 Sprite를 Child로 만들고 Execute를 눌러 배치하자.

이렇게 되면 첫번째 아이템을 이동 시키면 무조건 마지막에 붙게된다. 마지막에 붙은 것을 다른 곳으로 이동 시키려고 해도 이동할 수 없다.

- 여기서 주의 할 점은 Scroll View를 작게 만들어 놓으면 Panel이 같이 있어 이 영역 밖으로 나갈 수 없다. 이를 해결하기 위해서는 더 큰 Panel을 추가하고 Drag and Drop Root Component를 추가하면 Drag and Drop Item 이 추가한 Panel 영역까지 움직일 수 있다. 

- 이때 주의 할 점은 Grid를 추가하지 않으면 Root 가 붙어 있는 Panel로 아이템이 이동해 버린다.

2. Grid

- Grid에는 여러가지 옵션이 있다. 이를 잘 활용하면 좀더 멋진 UI를 만들 수 있다. 

위의 예제에서는 아이템을 Drag 하면 마지막으로 이동했다. 이때 아이템이 사라지고 마지막에 붙었는데 움직임을 부드럽게 할 수있다.

- Smooth Tween을 Check 하면 부드럽게 움직여서 마지막 그리드로 이동하는 아이템을 볼 수 있다.

- 아이템을 원하는 곳에 위치 시키고 싶으면 어떻게 해야 할까? 이때는 Sorting을 변경하면 된다. 지금은 Horizontal로 설정하면 각각의 아이템 사이에 선택한 아이템을 위치 시킬 수 있다.

3. Scroll View의 Scroll Bar

위 처럼 각 아이템이 Drag and Drop 기능을 가지면 아이템을 Scroll 할 수가 없다. 이를 위해서 아래에 Scroll Bar를 만들어 아이템을 이동할 수 있도록 할 수 있다. UI Progress Bar를 이용하여 Scroll bar를 만들거나 NGUI에서 제공하는 Prepeb Toolbar를 이용하여 Simple Progress Bar를 사용할 수도 있다. 원하는 위치에 Scroll Bar를 위치시키고 아래 Script에 끌어다 놓으면 Scroll을 이용하여 Grid를 움직일 수 있다.

실행해보면 자동으로 Scroll Bar가 설정되고 움직이는 것을 볼 수 있다.

- Scroll Bar를 추가하지 않고 위의 문제를 해결할 또 하나의 방법은 Drag and Drop Item의 Restriction을 설정하면 된다. Scroll 이 좌우로 움직이므로 Drag and Drop은 Vertical로 설정하면 좌, 우 방향은 아이템의 Scroll 기능을 하고 위, 아래의 움직임은 Drag and Drop으로 활용할 수 있다. (Item에는 Drag Drop 아이템과 Drag Scroll View를 가지고 있어야 한다.)

4. Item을 Scroll View 밖으로 이동하기 

Item을 끌어다 놓을 곳에는 Drag Drop Container를 추가 해놓으면 된다. Drag Drop Item 들은 Container에 놓을 수 있게 된다. 만일 끌어다 놓은 아이템들을 Grid로 정렬하고 싶다면 Drag Drop Container의 Reparent Target에 해당 그리드를 설정하면 아이템은 Grid로 이동한다.

아래 그림은 가운데 아이템을 1번으로 놓으면 2 번에 위치한 Grid로 옮겨가고, 3번에 Box에 놓으면 자동으로 정렬될 수 있도록 해 놓은 예제이다.

- 위 예제에서 아이템 개수를 설정하고 더이상 아이템을 이동할 수 없도록 하는 것을 해보려고 했으나 잘 되지 않았다. (Grid Column Count 설정) 이러한 방법은 Script를 통해서 해결해야 하는 것으로 보인다.