[앱인벤터 기초] 사용자 인터페이스 - 스피너 이해하기

사용자 인터페이스는 화면 구성에 가장 많이 사용되는 컴포넌트들을 모아 놓은 그룹입니다.

그룹 안에는 버튼, 체크박스, 날짜선택버튼, 이미지, 레이블, 목록선택버튼, 목록뷰, 알림, 암호텍스트박스, 슬라이더, 스피너, 스위치, 텍스트박스, 시간선택버튼, 웹뷰어가 포함되어 있습니다. 

 

---

스피너 블록

 

스피너는 목록뷰, 목록 선택 버튼처럼 여러 항목들을 표시할 때 사용하는 컴포넌트입니다.  스피너는 목록선택버튼과 다르게 팝업창에서 항목을 선택합니다. 스피너를 클릭해야 목록이 보입니다. 컴포넌트에 들어갈 내용은 요소로 지정하면 되는데 이때 ' , ' 기호를 사용해서 구분해서 입력하면 됩니다. 많은 양의 데이터를 표시할 때 주로 사용합니다. 

 

블록	설명
	스피너 팝업창에서 항목을 선택한 후에 '실행' 안의 블록들을 실행합니다.
	스피너 팝업창(목록)을 보이게 합니다.
	스피너에 적혀있는 항목들을 가져오거나 변경할 수 있는 블록입니다. 리스트 속성을 사용합니다.
	스피너에 적혀있는 항목을 변경할 수 있는 블록입니다. 하나의 값을 변경할 수 있으며 텍스트 속성을 사용합니다.
	세로길이 값을 가져오거나 변경할 수 있는 블록입니다. 숫자 속성(픽셀 단위)을 사용합니다. 높이비율은 스크린의 높이를 기준으로 몇 퍼센트를 가질지 변경할 수 있습니다.
	팝업창에 제목을 가져오거나 변경할 수 있는 블록입니다. 글자 속성을 사용합니다.
	목록들 중 선택한 항목을 가져오거나 변경할 수 있는 블록입니다. 텍스트 속성을 사용합니다.
	목록들 중 선택한 항목의 번호를 가져오거나 변경할 수 있는 블록입니다. 숫자 속성을 사용합니다. 시작 번호는 1이며 선택된 항목이 없으면 0을 반환합니다.
	컴포넌트의 보이기여부 값을 가져오거나 변경할 수 있는 블록입니다. 참, 거짓 속성을 사용합니다. 참이면 컴포넌트가 보이고 거짓이면 컴포넌트가 화면에서 보이지 않습니다.
	가로길이 값을 가져오거나 변경할 수 있는 블록입니다. 숫자 속성(픽셀 단위)을 사용합니다. 너비비율은 스크린의 너비를 기준으로 몇 퍼센트를 가질지 변경할 수 있습니다.

 

---

스피너 사용해보기

 

디자이너에서 요소문자열에 '가, 나, 다, 라'를 입력하고 프롬프트에 '프롬프트입니다.'라고 입력했을 때 실제 화면에서는 어떻게 보이는 지 확인해봅시다. 스피너를 클릭한 후 아무것도 선택하지 않고 창을 닫을 때는 첫번째 항목이 자동으로 선택되어 있습니다. 따라서 '언제 스피너 선택후에' 이벤트는 실행되지 않습니다.

속성	스마트폰 화면