NEW 앱인벤터2 강좌10. 컴포넌트 탐구 – 이미지(Image)

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

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

이미지 컴포넌트는 사진을 보여주는 컴포넌트 입니다.
그리고 사진을 표시하는데 간단한 애니메이션도 적용할 수 있습니다.


0. 개요

이미지를 표시할 수 있습니다.
이미지는 앱인벤터의 미디어에 올려서 앱 자체에 포함시킨 후 불러오는 방법이 있고(단 용량 제한 약 5MB),
따로 둔 웹 서버에 이미지를 올려서 불러오는 방식이 있습니다(데이터 비용 발생 가능성).
그나마 일반적인 앱 개발시에는 이미지를 DB에 저장한다거나 하는 식으로도 관리할 수 있으나 앱인벤터는 그런게 없는것이 흠이군요. 흠…

그 외 글 작성일 기준 최근 릴리즈에 이미지 클릭 이벤트(nb182b~nb183)도 추가되어 이미지 컴포넌트를 버튼 대용으로 쓸 수 도 있게 되었습니다.

또한 애니메이션 속성도 추가되었는데 게임을 만들 때 유용할 듯 합니다.

참고로 이미지는 디자이너와 실제 기기에서의 해상도 차이, 디바이스들의 해상도 차이 등으로 다루기가 꽤 까다롭습니다. 보통 디자이너가 실제기기의 해상도보다 작기에(저만 그런진 모르겠는데 일단 디자이너 기기의 뷰어 사이즈가 320×505 입니다! 세상에 보급형 폰도 저것보단 커요…1280×720) 반드시 실제 기기에서 테스트 해보기를 추천합니다.
아니면 사이즈 조정 해가지고 태블릿이나 모니터 등 최대한 크게 보세요.

1. 형태

먼저 사진이 지정되지 않은 경우 입니다.
디자이너에서는 저렇게 미리보기 이미지가 보이나 실제 빌드했을 때는 이미지가 없으면 아무것도 보이지 않습니다.

먼저 해상도 320×505 전화 크기의 디자이너에서 600×400픽셀의 이미지를 지정한 모습입니다.
보시다시피 사진이 벗어납니다.

그리고 1024×768 모니터 크기일때의 모습입니다.
실제 기기에서는 저정도 비율과 비슷하게 보입니다.

1. 속성

※예시 사진의 빨간 테두리는 컴포넌트의 경계선을 가상으로 표시한 것 입니다.

버튼(Button) 속성

속성명

설명

예시

클릭 가능 여부(Clickable)

이미지를 클릭하는 것에 반응을 할 지 지정합니다.

외적으로 달라지는 모습은 없습니다.

높이(Height)

컴포넌트의 높이를 지정합니다.

너비(Width)

컴포넌트의 너비를 지정합니다.

사진(Picture)

미디어에 업로드 한 이미지 중 표시할 이미지를 지정합니다.

회전 각도(RotationAngle)

이미지를 회전합니다.

디자이너에서는 회전되지 않고 실제 기기에서만 회전되어 보입니다.

우측 사진처럼 사진은 회전하나 실제 컴포넌트의 경계선 자체는 회전하지 않습니다.

사진 크기 맞추기(Scaling)

1이면 FIT_CENTER가 적용됩니다.

비율에 맞춰서 긴쪽을 맞춥니다.

0이면 FIT_XY가 적용됩니다.

비율에 관계없이 컴포넌트 크기에 가득 차도록 보이게 합니다.

보이기 여부(Visible)

컴포넌트의 보이기 여부를 지정합니다.

2. 블록

버튼(Button) 이벤트 블록

블록

설명

언제 [이미지] .클릭했을 때

이미지를 사용자가 클릭했을 때(눌렀다 때면) 내부 블록이 실행됩니다.

버튼(Button) 속성 지정 블록

블록

입력형식

설명

논리

이미지를 클릭하는 것에 반응을 할 지 지정합니다.

텍스트

이미지 표시 애니메이션을 지정합니다.

자세한건 아래 참조.

숫자

컴포넌트의 높이를 픽셀 단위로 지정합니다.

숫자

컴포넌트의 높이를 스크린의 높이에 대한 비율(퍼센트)로 지정합니다.

텍스트

지정할 사진을 지정합니다.

미디어에 올려둔 사진은 확장자를 포함한 파일명을 입력합니다.

그 외 이미지 URL도 가능합니다.

숫자

이미지를 회전합니다.

디자이너에서는 회전되지 않고 실제 기기에서만 회전되어 보입니다.

논리

참이면 FIT_XY가 적용되어 이미지 비율을 무시하고 컴포넌트의 너비와 높이에 꽉차도록 조정합니다.

거짓이면 FIT_CENTER가 적용되어 비율에 맞춰 긴쪽을 컴포넌트에 맞추고 남는 공간은 빈칸이 됩니다.

숫자

1이면 FIT_XY가 적용되어 이미지 비율을 무시하고 컴포넌트의 너비와 높이에 꽉차도록 조정합니다.

0이면 FIT_CENTER가 적용되어 비율에 맞춰 긴쪽을 컴포넌트에 맞추고 남는 공간은 빈칸이 됩니다.

논리

컴포넌트의 보이기 여부를 지정합니다.

보이기가 거짓이면 컴포넌트는 공간을 차지하지 않습니다.

숫자

컴포넌트의 너비를 픽셀 단위로 지정합니다.

숫자

컴포넌트의 너비를 스크린의 너비에 대한 비율(퍼센트)로 지정합니다.

버튼(Button) 속성 블록

블록

반환형식

논리

숫자

텍스트

숫자

숫자

논리

숫자

컴포넌트


3. Clickable 사용법


위 처럼 블록을 이용해 동적으로 속성값을 참으로 지정하거나

위 처럼 디자이너의 속성 자체에서 설정할 수 도 있습니다.

참으로 설정 된 경우 이미지 컴포넌트를 눌렀다 때면(터치하면) 

이 이벤트 블록이 실행됩니다.
마치 이미지 버튼처럼 쓸 수 있는 것이지요.

다만 클릭시 효과 등은 발생하지 않아 터치가 된건지 아닌지 사용자가 알 수 없다는 것이 단점입니다.

4. 애니메이션 지정하는 법

애니메이션은 이미지 컴포넌트에 애니메이션 효과를 줍니다.
이 효과를 실행하려면

이 블록에 원하는 애니메이션 이름을 넣어 실행시켜야 합니다.
단순히 사진을 지정한다고 실행 되지는 않습니다.

지원하는 애니메이션 목록:
아래 예제 영상들의 실행 블록은 다음과 같습니다:

ScrollRightSlow

느린 속도로 오른쪽으로 이동합니다.
ScrollRight

보통 속도로 오른쪽으로 이동합니다.
ScrollRightFast

빠른 속도로 오른쪽으로 이동합니다.
ScrollLeftSlow

느린 속도로 왼쪽으로 이동합니다.
ScrollLeft

보통 속도로 왼쪽으로 이동합니다.
ScrollLeftFast

빠른 속도로 왼쪽으로 이동합니다.
Stop

Stop이 실행되는 순간 애니메이션을 정지하고 컴포넌트를 원위치 시킵니다.

5. 사진 지정하는 법


각각의 경우에 위 속성값에 어떤 형식의 값을 넣어야 하는지 알아봅시다.

1. 미디어에서 불러오기
미디어는 앱인벤터 자체에 올리는, 즉 앱 자체에 포함시킬 이미지를 뜻합니다.

디자이너 혹은 블록 에디터에서 볼 수 있으며, 파일 올리기 … 버튼으로 파일을 올립니다.
이곳에는 사운드/영상/이미지 등 모든 미디어 파일을 올릴 수 있습니다.

위처럼 파일명과 확장자를 모두 입력합니다.


2. URL로 지정하기
웹 서버에 올라가 있는 이미지의 URL로 인터넷을 통해 이미지를 표시할 수 도 잇습니다.
이경우 앱 내부에 사진을 넣기에는 너무 용량이 크고 많거나, 웹 상에서 이미지를 원격으로 관리해야 할 때 유용합니다.

예시로 사용할 URL이 https://i.imgur.com/7oS0r7a.jpg

이렇게 URL을 입력해주기만 하면 됩니다!
다만 인터넷에서 받아오는 것 이라서 시간과 사용자의 폰에서 데이터 통신 요금이 발생할 수 있습니다.
이미지가 존재하지 않으면 아무것도 표시되지 않습니다.

3. 휴대폰 사진 가져오기
사용자 휴대폰의 저장소에 저장된 사진의 경우도 가져올 수 있는데, 이때는 

이렇게 해당 사진 파일의 절대 경로를 적어주시면 됩니다.
위 경로는 내장메모리/test.png 사진파일을 뜻합니다.

6. 크기변경 / 사진크기맞추기 사용법

디자이너에는 위와같이 사진 크기 맞추기 속성이 있고,

블록 에디터에는 위와같이 크기 변경 속성이 있습니다.

저 둘은 뭐가 다를까요?
결론부터 말하자면 서로 반대라는것을 빼고는 같습니다.

두 속성의 코드를 봅시다:

보시다 시피 둘다 값에 따라 이미지뷰의 스케일 타입을 FIT_CENTER 혹은 FIT_XY를 사용하는것을 볼 수 있습니다.
햇갈리게시리 왜이렇게 나눠놨는지 모르겠네요.

하여튼 사용법을 알아봅시다…!

ㆍ크기변경=0또는 사진크기맞추기=거짓– FIT_CENTER
위 경우 스케일 타입으로 FIT_CENTER가 적용됩니다.
이경우 컴포넌트의 크기보다 사진이 큰 경우 이미지의 가로세로 비율을 유지하며 사진의 작은 쪽을 컴포넌트에 맞춰 비율을 유지하며 축소합니다.

이렇게 이미지 컴포넌트의 크기를 조정했습니다(빨간 테두리가 실제 컴포넌트의 크기입니다).
보시다시피 사진보다 컴포넌트가 작아지니 사진은 비율을 유지하면서 자동으로 맞춰져서 축소되는것을 볼 수 있습니다.

ㆍ크기변경=1또는 사진크기맞추기=참– FIT_XY
이러면 FIT_XY가 적용됩니다.
이 타입은 컴포넌트의 크기에 맞춰 사진의 비율을 무시하고 늘여서 컴포넌트 크기에 맞춥니다.

보시다시피 컴포넌트의 크기에 맞춰서 비율을 무시하고 늘려버립니다.

이상입니다.

댓글

제목과 URL을 복사했습니다