NEW 앱인벤터2 강좌13. 컴포넌트 탐구 – 목록뷰(ListView)

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

전체 강좌 목록:
http://semicolon1.kr/appinventor.html

목록 선택 버튼은 여러개의 요소들을 보여주는 기능을 합니다.


0. 개요

이전 강좌에서 봤던 목록 선택 버튼 컴포넌트와 큰 틀은 같습니다.
차이점은 목록 선택 버튼은 버튼이 눌리면 요소들을 보여주고, 선택을 받는 것이지만,
목록뷰는 처음부터 요소들을 보여주는 용도입니다. 물론 필터(검색)이나 항목 선택도 가능합니다.

nb187 업데이트로 추가된 새로운 기능에 대한 설명을 다른 글로 썼습니다.
새로운 기능의 자세한 설명은 아래 글을 참고해주세요.
https://blog.naver.com/edisondl/222486906127

1. 형태

디자이너에서 보면 웹 까만 사각형이 보입니다.
만약 우측 속성에서 요소문자열을 채우게 되면 해당 요소들이 보이게 됩니다.

휴대폰에서 실행해서 버튼을 눌러보면 위 처럼 미리 지정해둔 리스트가 보이고, 필터를 선택할 경우 필터가 위에 위치하게 됩니다.

1. 속성

목록뷰(ListView) 속성

속성명

설명

배경색(BackgroundColor)

목록뷰의 배경색을 지정합니다.

요소 문자열(ElementsFromString)

리스트로 표시할 요소들을 쉼표(,)로 구분하여 지정합니다.

FontSizeDetail

디테일 텍스트의 폰트 크기를 지정합니다.

글꼴서체(FontTypeface)

메인 텍스트의 폰트를 지정합니다.

FontTypefaceDetail

디테일 텍스트의 폰트를 지정합니다.

높이(Height)

컴포넌트의 높이를 px단위로 지정합니다.

너비(Widrh)

컴포넌트의 너비를 px단위로 지정합니다.

ImageHeight

이미지의 높이를 px단위로 지정합니다.

ImageWidth

이미지의 너비를 px단위로 지정합니다.

ListData

다른 레이아웃이나 방향을 적용하기 위해서는 요소문자열 대신 이 속성으로 요소를 추가해야합니다.

ListViewLayout

목록뷰의 요소 표시 형식을 지정합니다.

Orientation

목록뷰의 스크롤 방향을 지정합니다.

세로 스크롤인 vertical이 기본입니다.

선택된 항목(Selection)

선택된 항목을 직접 지정합니다.

외관상으로 바뀌는 것은 없습니다.

이 경우 선택 항목 위치값은 리스트에 해당 값이 있으면 그 항목의 위치를 반환, 없으면 0을 반환합니다.

선택된 항목 색상

선택된 항목의 색상을 지정합니다.

필터 보이기(ShowFilterBar)

상단에 검색창을 표시할지 여부를 지정합니다.

텍스트 색상(TextColor)

메인 텍스트의 글자색을 지정합니다.

TextColorDetail

디테일 텍스트의 글자색을 지정합니다.

텍스트 크기(TextSize)

글자 크기를 sp단위로 지정합니다.

보이기 여부(Visible)

버튼의 보이기를 지정합니다.

2. 블록

목록뷰(ListView) 이벤트 블록

블록

설명

언제 [목록 선택 버튼] .선택 후에

사용자가 목록뷰에서 항목을 선택한 후에 실행됩니다.

목록뷰(ListView) 함수 블록

블록

설명

ㄴmainText [텍스트]

ㄴdetailText [텍스트]

ㄴimageName [텍스트]

요소를 생성합니다.

불필요한 값은 입력하지 않아도 됩니다.

요소를 만들어 딕셔너리 형식으로 반환합니다.

ㄴlistElement [딕셔너리]

요소로부터 디테일 텍스트를 가져옵니다.

ㄴlistElement [딕셔너리]

요소로부터 이미지 이름을 가져옵니다.

ㄴlistElement [딕셔너리]

요소로부터 메인 텍스트를 가져옵니다.

목록뷰를 갱신합니다.

목록뷰(ListView) 속성 지정 블록

블록

입력형식

설명

색상

목록뷰의 배경색을 지정합니다.

리스트

리스트로 표시할 항목을 지정합니다.

텍스트

텍스트로 표시할 항목을 지정합니다.

각 항목은 쉼표(,)로 구분합니다.

숫자

디테일 텍스트의 글자색을 지정합니다.

숫자

컴포넌트의 높이를 px단위로 지정합니다.

숫자

컴포넌트의 높이를 스크린의 높이에 대한 비율(퍼센트)로 지정합니다.

숫자

디테일 텍스트의 글자색을 지정합니다.

숫자

디테일 텍스트의 글자색을 지정합니다.

숫자

목록뷰의 스크롤 방향을 지정합니다.

세로 스크롤인 vertical이 기본입니다.

0은 세로, 1은 가로입니다.

텍스트

선택된 항목을 직접 지정합니다.

외관상으로 바뀌는 것은 없습니다.

이 경우 선택 항목 위치값은 리스트에 해당 값이 있으면 그 항목의 위치를 반환, 없으면 0을 반환합니다.

색상

선택된 항목의 배경 색상을 지정합니다.

숫자

선택된 항목의 위치를 직접 지정합니다.

논리

상단에 검색창을 띄울지 여부를 지정합니다.

색상

요소들의 텍스트 색상을 지정합니다.

색상

디테일 텍스트의 글자색을 지정합니다.

숫자

요소들의 텍스트 크기를 sp단위로 지정합니다.

논리

보이기 여부를 지정합니다.

숫자

컴포넌트의 너비를 px단위로 지정합니다.

숫자

컴포넌트의 너비를 스크린의 너비에 대한 비율(퍼센트)로 지정합니다.

목록뷰(ListView) 속성 블록

블록

반환형식

색상

리스트

숫자

숫자

숫자

숫자

숫자

텍스트

색상

텍스트

숫자

논리

색상

색상

숫자

논리

숫자

컴포넌트

3. 예제

요소 문자열로 직접 요소를 지정해볼 수 있고, 선택한 항목의 이름과 번호를 표시해주는 예제입니다.


댓글

제목과 URL을 복사했습니다