본문 바로가기
어린이 코딩/앱인벤터 기초

앱인벤터2 - 목록뷰 및 레이블 컴포넌트 완벽 가이드

by [바가지] 2017. 10. 20.
반응형

앱인벤터2

목록뷰 및 레이블 컴포넌트 완벽 가이드



이번 포스팅에서는 목록뷰 컴포넌트와 레이블 컴포넌트에 대하여 알아보도록 하겠습니다.

두가지 컴포넌트 모두 간단하기에 함께 포스팅을 해 봅니다.

만들어 보게 될 화면의 기능은 이러합니다. 

조회버튼을 클릭했을 때 목록이 조회되고, 목록을 클릭하게되면, 레이블에 목록 Text가 표시되도록 하는 것 입니다.



화면구성


 - 목록조회 버튼 추가

 - 레이어 두개 추가 : 하나는 Text Format, 다른 하나는 HTML Format으로 설정하여

                            차이점을 확인 할 수 있도록 할 것입니다.

 - 목록뷰를 추가


화면구성



컴포넌트 속성


- 레이블 속성 :  Text Format과 HTML Format의 차이점은 Text로만 작성 가능한 것과 

                     HTML태그로 작성 가능한 것 입니다.

- 목록뷰: 목록 문자열을 속성 값으로 설정할 수 있습니다. 콤마(,)를 기준으로 목록이 구분됩니다.


기타 설명하지 않은 속성들은 버튼 컴포넌트 완벽 가이트 포스팅을 참조 바랍니다.

버튼 컴포넌트 완벽 가이드 포스팅 바로가기


레이블 속성 목록뷰 속성



블록 코딩


 - 버튼 클릭 했을 경우 목록뷰목록에 목록문자열 값을 설정해 줍니다. (콤마로구분)

버튼크릭시코딩


※ 제어 → [만약 그러면] 블록에 대하여 잠시 설명을 드리겠습니다.

만약 조건 = 조건 이면 그러면 부분 실행

만약 조건, 실행 부분을 하나 더 추가하기 위해서는 블록을 하나 더 추가해 넣을 수 있지만 아래 화면처럼 추가 할 수도 있습니다.

- 옵션버튼 클릭 → [아니고... 만약] 블록 드래그하여 왼쪽에 연결 


만약 조건문 설정


목록뷰에서 목록을 선택 하였을 경우 실행되는 부분입니다.

- 선택된 항목이 텍스트가 blue와 같을 경우 스크린 배경색을 파란색으로 변경

- 선택된 항목의 텍스트 값을 레이블 텍스트에 입력

  단 , 텍스트 합치기를 통해 상, 하에 <b>, </b> 텍스트를 추가

  ※ <b></b> 는 HTML부분으로 <b>와</b> 사이 텍스트를 진하게 설정 해 줍니다. 

목록선택 코딩



결과화면


목록조회 후 yellow목록을 선택 한 화면 모습입니다.

위에 레이블과 아래 레이블의 차이가 Format 설정 때문에 발생하는 것입니다. 


모바일에서 화면


여기까지 오늘은 목록뷰와 레이블 컴포넌트 기능에 대하여 알아 보았습니다.

반응형