유니티 UI 속성(Slider, Dropdown, Toggle, Toggle Group)

 

Slider  : 막대 형태로 값을 표시하는 UI 요소이다.

Dropdown : 선택형 UI 요소로 리스트 형태로 각 항목들을 보여준다. 

Toggle : 체크박스 형태의 UI 요소이다. 다른 UI 시스템에서는 체크박스(Checkbox)이다.  

 

1. Slider 

이미지의 Slide 옵션을 사용하여 만들어진 UI 요소이다. 막대 형태로 값을 나타내는 데 사용한다. 

 

Slider

1.1 공통속성

Interactable : 사용자로부터의 입력을 받을 것인지 설정한다. 선택이 해제되면, 사용자의 입력을 받지 않는다. 

 

Transition : None, Color Tint, Sprite Swap, Animation의 네 가지의 옵션이 있다. 색상, 스프라이트, 애니메이션 중 선택한 옵션을 사용해, 선택과 같은 이벤트의 발생을 시각적으로 표시해준다. 

 

Color Multiplier : 이벤트 색상의 값에 Color Multiplier 값을 곱한다. 1.0~5.0 사이의 값을 갖는다. 

Fade Duration : 이벤트의 전환이 발생하였을 때, 이벤트 전환 시간 설정이다.  

 

1.2 속성

Fill Rect: Value의 값을 기반으로 그려지는 영역이다. value / Max Value 영역만큼 표시한다. 

Handle Rect : 입력을 받아 값을 수정하도록 한다. 드래그하면 Value 값이 변경된다. 

 

Direction : 값을 표시하는 방향을 설정한다. Left To Right, Right To Left, Top to Bottom, Bottom to Top 네 가지의 속성을 사용한다. 

Left To Right 속성을 선택할 경우, Left는 0의 값일 때이며, Value에 따라 오른쪽으로 이동한 값을 표시한다.

 

Whole Number : 선택(✓)하면, 정수(int) 형의 값을 사용한다. 해제 시에는 실수(float) 형의 값을 사용한다. 

 

Min Value : 최소 값을 설정한다.

Max Value : 최대 값을 설정한다.

Value : 현재 값이다. 

 

On Value changed(Single)  : 값이 변경될 때 호출할 리스너를 등록한다.  

 

2. DropDown

 

DropDown은 여러 개의 항목을 리스트 형식으로 보여주어, 선택할 수 있도록 하는 UI의 요소이다. 사용할 수 있는 값은 텍스트와 이미지이다.

2.1 속성

Template : 선택 항목을 보여주기 위한 기본 형태이다. 템플릿을 기반으로 선택 항목을 보여준다. 

 

Caption Text : 선택된 항목의 텍스트를 보여주는 Text UI 요소이다. 아래 설명할 Value 옵션과 연관이 있다.  

Caption Image : 선택된 항목의 이미지를 보여주는 Image UI 요소이다. 초기 설정은 없음(None)이다. Image UI 요소를 지정해주어야 한다. 

 

Item Text : 각 해당 항목의 텍스트를 보여준다. 

Item Image : 각 해당 항목의 이미지를 보여준다. 초기 설정은 None이다. 

 

Value : 현재 선택된 항목의 인덱스(Index) 값이다. 0이면 첫 번째 항목을 나타낸다. 

Alpha Fade Speed : 항목 리스트를 표시 및 해제에 걸리는 시간이다.

 

Options

각 항목에 해당한다.

첫번째 값은 텍스트, 두 번째 값은 이미지(스프라이트)이다. 

오른쪽 아래 플러스 마이너스 키( + -)를 사용하여 추가 및 삭제가 가능하다. 삭제할 때에는 해당 항목을 클릭하고 마이너스 키를 누른다.

 

위에부터 순서대로 위에 언급한 Value 값이다. Value 값에 따라 Caption Text, Caption Image에 표시한다.

각 항목은 DropDown에 클릭 이벤트가 발생하면, Item Text, Item Image에 값을 출력한다.  

   

2.3 Sprite 이미지 사용

옵션 항목에는 Sprite 항목이 존재한다. Sprite 이미지를 선택 항목에 추가하기 위해서는 약간의 수정이 요구된다.

 

• Dropdown의 하위 요소로 Image를 생성하고, Caption Image 옵션에 등록한다.
• Template의 Item의 하위 요소로 Image를 생성하고, Item Image 옵션에 등록한다.

 

Dropdown

 

1. Template : 항목 리스트를 보여줄 틀이다.
2. List : Template을 기반으로 작성된 항목 리스트를 보여준다. 
3. Item : List에 보일 항목들에 대한 아이템이다. 위에서 언급한 속성( Item Text, Item Image)이다. Options의 텍스트와 이미지들을 보여준다. 

 

2.4 Scrollbar와 Blocker

Dropdown을 생성하면, Template의 하위 요소로 Scrollbar가 존재한다. 선택 항목이 8개부터 Scrollbar가 활성화된다. 

Blocker : 선택항목 이외의 영역을 선택하면, 항목 리스트가 닫히도록 설정하기 위한 패널이다.

 

3. Toggle and Toggle Group

3.1 Toggle

 

Toggle은 선택 박스이다.  해당 항목을 선택하면,  체크(✓)를 표시해준다. 선택형 UI를 만들 때 사용한다.    

 

Toggle

 

공통 속성은 DropDown에서 다룬다.

 

Is On : 해당 Toggle이 선택(✓)  되었는지를 나타낸다. 

Toggle Transition :  상태가 변경되었을 때, Fade 애니메이션을 사용할 것인지를 선택한다. 

Graphic : 선택(✓)을 표시할 Image 컴포넌트이다. 

Group : 그룹을 설정한다. 그룹을 설정해, 여러 항목 중에서 선택하도록 하는 UI를 구성할 수 있다. Toggle Group 컴포넌트를 사용한다.

 

On Value Changed(Boolean)  : 상태가 변경되었을 때 호출되는 리스너를 등록한다. 

3.2 Toggle Group 

 

Toggle UI 요소를 그룹화하는 데 사용한다. 여러 개의 항목 중에서 하나를 선택할 수 있도록 Toogle을 그룹화한다. 그룹화하려는 Toggle UI 요소들의 Group 항목에 등록한다. 

  

 

 

Allow Switch Off :  선택(✓)된 Toggle 항목을 선택 해제하도록 허용하도록 설정한다. 이 옵션을 설정하면,  하나도 선택하지 않은 Toggle 항목이 존재할 수 있으며, 설정을 해제하면 적어도 하나의 Toggle 항목이 선택되도록 설정한다.