앱인벤터2
목록뷰 및 레이블 컴포넌트 완벽 가이드
이번 포스팅에서는 목록뷰 컴포넌트와 레이블 컴포넌트에 대하여 알아보도록 하겠습니다.
두가지 컴포넌트 모두 간단하기에 함께 포스팅을 해 봅니다.
만들어 보게 될 화면의 기능은 이러합니다.
조회버튼을 클릭했을 때 목록이 조회되고, 목록을 클릭하게되면, 레이블에 목록 Text가 표시되도록 하는 것 입니다.
■ 화면구성
- 목록조회 버튼 추가
- 레이어 두개 추가 : 하나는 Text Format, 다른 하나는 HTML Format으로 설정하여
차이점을 확인 할 수 있도록 할 것입니다.
- 목록뷰를 추가
■ 컴포넌트 속성
- 레이블 속성 : Text Format과 HTML Format의 차이점은 Text로만 작성 가능한 것과
HTML태그로 작성 가능한 것 입니다.
- 목록뷰: 목록 문자열을 속성 값으로 설정할 수 있습니다. 콤마(,)를 기준으로 목록이 구분됩니다.
기타 설명하지 않은 속성들은 버튼 컴포넌트 완벽 가이트 포스팅을 참조 바랍니다.
■ 블록 코딩
- 버튼 클릭 했을 경우 목록뷰목록에 목록문자열 값을 설정해 줍니다. (콤마로구분)
※ 제어 → [만약 그러면] 블록에 대하여 잠시 설명을 드리겠습니다.
만약 조건 = 조건 이면 그러면 부분 실행
만약 조건, 실행 부분을 하나 더 추가하기 위해서는 블록을 하나 더 추가해 넣을 수 있지만 아래 화면처럼 추가 할 수도 있습니다.
- 옵션버튼 클릭 → [아니고... 만약] 블록 드래그하여 왼쪽에 연결
목록뷰에서 목록을 선택 하였을 경우 실행되는 부분입니다.
- 선택된 항목이 텍스트가 blue와 같을 경우 스크린 배경색을 파란색으로 변경
- 선택된 항목의 텍스트 값을 레이블 텍스트에 입력
단 , 텍스트 합치기를 통해 상, 하에 <b>, </b> 텍스트를 추가
※ <b></b> 는 HTML부분으로 <b>와</b> 사이 텍스트를 진하게 설정 해 줍니다.
■ 결과화면
목록조회 후 yellow목록을 선택 한 화면 모습입니다.
위에 레이블과 아래 레이블의 차이가 Format 설정 때문에 발생하는 것입니다.
여기까지 오늘은 목록뷰와 레이블 컴포넌트 기능에 대하여 알아 보았습니다.
'어린이 코딩 > 앱인벤터 기초' 카테고리의 다른 글
앱인벤터 제어 각각 반복(for문) 완벽 가이드 (0) | 2017.11.12 |
---|---|
앱인벤터 공통블록 제어 완벽 가이드 - 만약 그러면(IF문) (0) | 2017.11.11 |
앱인벤터2 - 에뮬레이터(Emulator)를 이용한 앱 테스트하기 (0) | 2017.11.01 |
앱인벤터2 - 버튼기능 완벽 가이드 (0) | 2017.10.17 |
[인벤터] 퓨전테이블(Fusiontables)을 이용한 모바일 앱 데이터 저장하기 (0) | 2017.09.26 |