앱인벤터2에서 목록 선택 버튼과 목록뷰는 비슷한 기능을 하는 컴포넌트들이다. 둘의 차이점을 들자면 목록 선택 버튼은 이것도 하나의 버튼이기 때문에 이 버튼을 눌러야 이벤트가 발생하는 이벤트성 컴포넌트란 것이고 목록뷰는 화면에 처음부터 목록이 표시되고 이 목록중 하나를 선택하면 다음 이벤트가 일어나는 구조이다. 즉 초기 화면이 복잡해서 리스트를 띄우면 화면이 지저분해 지거나 복잡해 질때는 목록 선택 버튼을 사용하면 좋고 처음부터 화면에 리스트가 나타나는 것이 좋을 때는 목록뷰를 사용하면 좋다는 것이다.
다음과 같이 화면에 목록뷰를 배치하고 레이블을 위아래로 두어서 목록뷰의 위치를 조정한다.
목록뷰는 화면에 바로 리스트가 표시된다. 리스트의 성분은 우측 리스트뷰의 속성에 이름을 적어 넣으면 된다. 각 이름들은 콤마로 구분한다. 위 리스트의 이름중 하나를 선택하면 리스트뷰 하단에 선택한 것의 이름을 나타내 주는 앱을 만들어 보자.
리스트뷰의 세부 블록들 중 '선택 후에' 이벤트 블록과 '선택된 항목 번호' 블록 그리고 '선택된 항목' 블록을 끄집어 낸다. '선택된 항목 번호(인덱스 번호)' 블록은 리스트 안에서 그 이름이 위치한 번호를 나타내는 것이다. 이 인덱스 번호로 리스트 안에서 각 이름들의 위치를 알 수 있으므로 아주 중요한 성분이다.
앱의 초기 화면이다. 리스트가 바로 화면에 표시된다.
리스트 중에서 피에로를 선택하면 리스트 뷰 하단에 피에로의 위치 번호와 이름이 표시된다.
이 앱을 좀 확장시키면 이름을 클릭해서 그 이름으로 설정되어 있는 전화번호로 전화도 걸 수 있고, 이름에 해당하는 그림을 보여준다든지 등등 얼마든지 많은 종류의 앱으로 확장 시킬 수 있을 것이다.
'SW 배움터 > 앱인벤터2' 카테고리의 다른 글
| 인벤터2 왕초보 강좌 11 : 슬라이더(Slider)로 남은 시간을 표시하자. (0) | 2021.09.23 |
|---|---|
| 앱인벤터2 왕초보 강좌 9 : 알림(Notifier) 컴포넌트로 경고 메시지 나타내기 (2) | 2021.09.21 |
| 앱인벤터2 왕초보 강좌 7 : 목록 선택 버튼(ListPicker) 사용법 (0) | 2021.09.14 |
| 앱인벤터2 왕초보 강좌 6 : 레이블은 두가지 기능만 한다. (0) | 2021.09.13 |
| 앱인벤터2 왕초보 강좌 5 : 이미지 전환 배우기 (0) | 2021.09.06 |