NEW 앱인벤터2 강좌25. 컴포넌트 탐구 – 이미지 선택 버튼(ImagePicker)

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

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

이번에는 사진을 선택하는데 사용되는 컴포넌트인 이미지 선택 버튼에 대하여 알아보겠습니다.


0. 개요

이미지 선택 버튼 컴포넌트는 특수 목적의 버튼으로, 외형은 버튼 컴포넌트와 똑같이 생겼습니다.
누르면 이미지를 선택할 수 있는 창이 열리며 그 창에서 사용자는 하나의 이미지를 선택할 수 있습니다.

사용자가 선택한 이미지는 임시 폴더에 복사되어 저장되며, 이후 임시 폴더의 이미지의 경로가 제공됩니다.
또한, 임시 폴더에 이미지가 10개이상 늘어나면, 오래된 이미지부터 제거됩니다.
원본 이미지는 그대로 있습니다.

1. 형태

일반 버튼과 외형은 동일합니다.

1. 속성

이미지 선택 버튼(ImagePicker) 속성

속성명

설명

배경색(BackgroundColor)

배경색을 지정합니다.

활성화(Enabled)

활성화 여부를 지정합니다.

글꼴굵게(FontBold)

텍스트에 볼드체(굵은체)를 적용합니다.

글꼴이텔릭(FontItalic)

텍스트에 이텔릭(기울임) 적용합니다.

글꼴크기(fontSize)

텍스트 크기를 지정합니다.

글꼴서체(FontTypeface)

텍스트의 글꼴을 지정합니다.

높이(Feight)

높이(세로)를 지정합니다.

너비(Width)

너비(가로)를 지정합니다.

이미지(Image)

버튼의 배경 이미지를 지정합니다.

배경 색상이 지정되있어도 이미지가 먼저 보입니다.

모양(Shape)

버튼의 모양을 변경합니다.

피드백보이기(ShowFeedback)

버튼이 눌릴 때 효과 여부를 지정합니다.

텍스트(Text)

텍스트를 지정합니다.

텍스트정렬(TextAlignment)

텍스트의 내부 정렬 방식을 지정합니다.

텍스트색상(TextColor)

텍스트 색상을 지정합니다.

보이기여부(Visible)

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

2. 블록

이미지 선택 버튼(ImagePicker) 이벤트 블록

블록

설명

사용자가 이미지를 선택 한 후 실행됩니다.

사용자가 이미지를 선택하기 전, 그러니까 버튼을 누를 때 실행됩니다.

버튼이 포커스를 받으면 실행됩니다.

버튼이 포커스를 잃으면 실행됩니다.

버튼을 누르는 순간 실행됩니다.

버튼을 눌렀다 때는 순간 실행됩니다.

이미지 선택 버튼(ImagePicker) 함수 블록

블록

설명

이미지 선택창을 엽니다.

이미지 선택 버튼(ImagePicker) 속성 지정 블록

블록

입력형식

설명

색상

버튼의 배경색을 지정합니다. 만약 이미지가 있다면, 색상은 가려서 보이지 않습니다.

논리

버튼의 활성화 여부를 지정합니다.

논리

글꼴을 굵게 할지 지정합니다.

논리

글꼴을 기울어지게 할지 지정합니다.

숫자

버튼의 텍스트의 크기를 지정합니다.

단위는 sp입니다.

숫자

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

숫자

버튼의 높이를 현재 스크린 높이에 대한 비율로 지정합니다.

예시로 높이 비율이 50이면 스크린 높이의 반만큼 길어집니다.

텍스트

배경 이미지를 지정합니다.

논리

클릭시 피드백을 보일지 지정합니다.

텍스트

텍스트를 지정합니다.

색상

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

논리

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

만약 거짓이면, 버튼이 아예 사라진 것처럼 됩니다.

(View.GONE)

숫자

버튼의 너비를 px 단위로 지정합니다.

숫자

버튼의 너비를 현재 스크린 너비에 대한 비율로 지정합니다.

예시로 너비 비율이 50이면 스크린 너비의 반만큼 길어집니다.

이미지 선택 버튼(ImagePicker) 속성 블록

블록

반환형식

색상

논리

논리

논리

숫자

숫자

텍스트

ㄴ사용자가 사진 선택 후 파일의 경로가 여기에 저장됩니다.

텍스트

논리

텍스트

색상

논리

숫자

컴포넌트

3. 예제

사용자가 선택한 이미지를 이미지 컴포넌트로 보여주는 간단한 예제입니다.

댓글

제목과 URL을 복사했습니다