전체 강좌 목록:
http://semicolon1.kr/appinventor.html
목록 선택 버튼은 목록에서 항목을 선택할 수 있는 컴포넌트 입니다.
외관은 버튼과 같이 생겼습니다.
0. 개요
버튼 컴포넌트와 똑같이 생긴 이 컴포넌트는 목록에서 요소를 선택할 수 있는 특수한 기능을 가진 버튼 입니다.
버튼을 누르면 미리 지정해둔 요소들의 리스트가 표시되며, 사용자는 그 중 하나를 선택할 수 있습니다.
이 컴포넌트의 장점이라면 만약 리스트가 매우 길 경우, 자체적으로 가지고 있는 필터 기능을 이용해 요소를 사용자가 직접 검색할 수 있습니다.
1. 형태
디자이너에서 보면 일반 버튼 컴포넌트와 같습니다.
휴대폰에서 실행해서 버튼을 눌러보면 위 처럼 미리 지정해둔 리스트가 보이고, 필터를 선택할 경우 필터가 위에 위치하게 됩니다.
1. 속성
목록 선택 버튼(ListPicker) 속성 | |||
속성명 | 설명 | 예시 | |
배경색(BackgroundColor) | 버튼의 배경색을 지정합니다. |  | |
요소 문자열(ElementsFromString) | 리스트로 표시할 요소들을 쉼표(,)로 구분하여 지정합니다. | – | |
활성화(Enabled) | 버튼의 활성화를 지정합니다. 활성화가 거짓이면 버튼이 눌리지 않습니다. |  | |
글꼴 굵게(FontBold) | 글꼴을 굵게 표시합니다. |  | |
글꼴 이텔릭(fontItalic) | 글꼴을 기울여서 표시합니다. |  | |
글꼴 크기(FontSize) | 글꼴의 크기를 sp단위로 지정합니다. |  | |
글꼴 서체(FontTypeface) | 글꼴의 폰트를 지정합니다. |  | |
높이(Height) | 컴포넌트의 높이를 px단위로 지정합니다. | – | |
너비(Widrh) | 컴포넌트의 너비를 px단위로 지정합니다. | – | |
이미지(Image) | 배경 이미지를 지정합니다. 만약 배경색이 있어도 이미지만 보입니다. |  | |
항목 배경색(ItemBackgroundColor) | 선택창 전체의 배경색을 지정합니다. | – | |
항목 텍스트 색상(ItemTextColor) | 각 항목 요소의 텍스트 색상을 변경합니다. | – | |
선택된 항목(Selection) | 선택된 항목을 직접 지정합니다. 외관상으로 바뀌는 것은 없습니다. 이 경우 선택 항목 위치값은 리스트에 해당 값이 있으면 그 항목의 위치를 반환, 없으면 0을 반환합니다. | – | |
모양(Shape) | 버튼의 모양을 지정합니다. |  | |
피드백 보이기(ShowFeedback) | 버튼의 터치 효과 활성화 여부를 지정합니다. |  | |
필터 보이기(ShowFilterBar) | 상단에 검색창을 표시할지 여부를 지정합니다. | – | |
텍스트(Text) | 버튼의 텍스트를 지정합니다. |  | |
텍스트 정렬(TextAlignment) | 텍스틀 정렬을 지정합니다. 너비가 자동이면 작동하지 않습니다. |  | |
텍스트 색상(TextColor) | 텍스트의 색상을 지정합니다. |  | |
제목(Title) | 목록 선택창의 스크린의 제목을 지정합니다. 테마에 따라 안보일 수 있습니다. | – | |
보이기 여부(Visible) | 버튼의 보이기를 지정합니다. |  | |
2. 블록
목록 선택 버튼(ListPicker) 이벤트 블록 | |
블록 | 설명 |
 언제 [목록 선택 버튼] .선택 전에 | 버튼을 클릭하고 선택창이 열리기 전에 실행됩니다. |
 언제 [목록 선택 버튼] .선택 후에 | 사용자가 선택창에서 항목을 선택한 후에 실행됩니다. |
 언제 [목록 선택 버튼] .포커스를 받았을 때 | 버튼이 포커스를 받았을 때 실행됩니다. |
 언제 [목록 선택 버튼] .포커스를 잃었을 때 | 버튼이 포커스를 잃었을 때 실행됩니다. |
 언제 [목록 선택 버튼] .터치 다운 했을 때 | 버튼을 누르는 순간 실행됩니다. |
 언제 [목록 선택 버튼] .터치 업 했을 때 | 버튼이 눌렸다 떨어지는 순간 실행됩니다. |
목록 선택 버튼(ListPicker) 함수 블록 | |
블록 | 설명 |
 | 항목 선택창을 엽니다. |
목록 선택 버튼(ListPicker) 속성 지정 블록 | ||
블록 | 입력형식 | 설명 |
 | 색상 | 버튼의 배경색을 지정합니다. 만약 이미지가 있다면, 색상은 가려서 보이지 않습니다. |
 | 리스트 | 리스트로 표시할 항목을 지정합니다. |
 | 텍스트 | 텍스트로 표시할 항목을 지정합니다. 각 항목은 쉼표(,)로 구분합니다. |
 | 논리 | 버튼의 활성화를 지정합니다. |
 | 논리 | 글꼴을 굵게 지정할지 정합니다. |
 | 논리 | 글꼴을 기울이게 지정할지 정합니다. |
 | 숫자 | 글꼴의 크기를 sp단위로 지정합니다. |
숫자 | 컴포넌트의 높이를 px단위로 지정합니다. | |
 | 숫자 | 컴포넌트의 높이를 스크린의 높이에 대한 비율(퍼센트)로 지정합니다. |
 | 텍스트 | 버튼의 배경 이미지를 지정합니다. |
 | 색상 | 선택창 전체의 배경색을 지정합니다. |
 | 색상 | 각 항목 요소의 텍스트 색상을 변경합니다. |
 | 텍스트 | 선택된 항목을 직접 지정합니다. 외관상으로 바뀌는 것은 없습니다. 이 경우 선택 항목 위치값은 리스트에 해당 값이 있으면 그 항목의 위치를 반환, 없으면 0을 반환합니다. |
 | 숫자 | 선택된 항목의 위치를 직접 지정합니다. |
 | 논리 | 버튼 클릭시 효과를 보일지 지정합니다. |
 | 논리 | 상단에 검색창을 띄울지 여부를 지정합니다. |
 | 텍스트 | 버튼의 텍스트를 지정합니다. |
 | 색상 | 버튼의 텍스트 색상을 지정합니다. |
 | 텍스트 | 목록 선택창의 스크린의 제목을 지정합니다. 테마에 따라 안보일 수 있습니다. |
 | 논리 | 버튼의 보이기 여부를 지정합니다. |
 | 숫자 | 컴포넌트의 너비를 px단위로 지정합니다. |
 | 숫자 | 컴포넌트의 너비를 스크린의 너비에 대한 비율(퍼센트)로 지정합니다. |
목록 선택 버튼(ListPicker) 속성 블록 | |
블록 | 반환형식 |
 | 색상 |
 | 리스트 |
 | 논리 |
 | 논리 |
 | 논리 |
 | 숫자 |
 | 숫자 |
 | 텍스트 |
 | 색상 |
 | 색상 |
 | 텍스트 |
 | 숫자 |
 | 논리 |
 | 논리 |
 | 텍스트 |
 | 색상 |
 | 텍스트 |
 | 논리 |
 | 숫자 |
 | 컴포넌트 |
3. 예제
선택 후 결과 등을 보여주고, 리스트로 블록 상에서 항목을 지정하는 등의 간단한 기능을 포함한 예제입니다.
필터 보이기를 체크 후 검색 바에 라면을 입력하면, 라면을 포함한 요소만 보이는 것을 볼 수 있습니다.
댓글