NEW 앱인벤터2 강좌12. 컴포넌트 탐구 – 목록 선택 버튼(ListPicker)

이 글은 읽는데 약 5분이 걸립니다.

전체 강좌 목록:
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. 예제

선택 후 결과 등을 보여주고, 리스트로 블록 상에서 항목을 지정하는 등의 간단한 기능을 포함한 예제입니다.
필터 보이기를 체크 후 검색 바에 라면을 입력하면, 라면을 포함한 요소만 보이는 것을 볼 수 있습니다.


댓글

제목과 URL을 복사했습니다