반응형
728x170
이번 시간에는 이미지 선택 버튼의 사용법에 대해서 알아보고 작성한 앱을 직접 실행해 어떻게 적용되는지 알아보자.
먼저 다음과 같이 디자이너 에디터를 구성한다.
미디어 섹션에서 이미지 선택 버튼(imagePicker)을 드래그해 화면 상단에 배치하자. 레이블 하나는 이미지 선택버튼이 제대로 작동하는지를 알아보기 위해 텍스트를 보여 줄 것이다.
다음으로 '그리기 & 애니메이션'에서 '캔버스'를 하나 꺼내서 화면 하단부에 배치하고 높이와 너비를 '부모 요소에 맞추기'로 설정한다.
반응형
이미지 선택버튼의 이벤트 블록안에 이미지1 컴포넌트의 '지정하기 이미지1. 사진 값' 블록을 끼워넣자.
이미지 선택 버튼의 세부 블록을 보면 'imagePicker1. 선택된 항목' 블록이 있다. 이 블록을 이미지1 컴포넌트의 '지정하기 이미지1. 사진 값' 블록에 끼워 넣자. 이미지를 선택하면 그 선택한 이미지를 화면에 보여지도록 하는 것이다.
이 앱을 실제로 실행한 화면이다. '이미지 선택 버튼'을 클릭한다.
겔러리가 나타난다. 이 중에서 하나를 선택해 보자.
레이블에도 '이미지 픽커 테스트중입니다.'란 글자가 나타나고 그 하부에 선택한 이미지가 나타났다.
반응형
그리드형
'SW 배움터 > 앱인벤터2' 카테고리의 다른 글
| 앱인벤터2 왕초보 강좌 19 : 플레이어(Player)와 소리(Sound) 컴포넌트의 차이 (0) | 2021.11.06 |
|---|---|
| 앱인벤터2 인공지능 앱 만들기 1(사물 인식 인공지능 앱) (0) | 2021.11.03 |
| 앱인벤터2 왕초보 강좌 17 : 카메라(Camera)로 사진 촬영하기 (0) | 2021.10.24 |
| 앱인벤터2 왕초보 강좌 16 : 캠코더(Camcoder)로 동영상 촬영하기 (0) | 2021.10.21 |
| 앱인벤터2 강좌 37 : 숫자 정렬(sorting)을 배워보자. (0) | 2021.10.08 |