[앱인벤터 기초] 사용자 인터페이스 - 이미지 블록 이해하기

사용자 인터페이스는 화면 구성에 가장 많이 사용되는 컴포넌트들을 모아 놓은 그룹입니다.

그룹안에는 버튼, 체크박스, 날짜선택버튼, 이미지, 레이블, 목록선택버튼, 목록뷰, 알림, 암호텍스트박스, 슬라이더, 스피너, 스위치, 텍스트박스, 시간선택버튼, 웹뷰어가 포함되어 있습니다. 

 

---

이미지 블록

 

스크린에 이미지를 표시하고 싶을 때 사용하는 컴포넌트입니다. 이미지 컴포넌트만 삽입하고 표시할 사진을 선택하지 않으면 스마트폰 화면에 아무것도 보이지 않습니다. 사진을 등록할 때 파일명이 한글이면 오류가 발생합니다. 파일명은 영문자와 숫자 또는 _ 기호로만 구성되어야 합니다. 이미지를 [미디어]에 등록하면 앱인벤터 서버에 등록됩니다.

 

블록	설명
	이미지를 클릭하면 '실행' 내부의 명령을 실행합니다.
	이미지가 화면에 움직이도록 애니메이션을 지정할 수 있습니다. 동작되는 명령어는 ScrollRightSlow, ScrollRight, ScrollRightFast, ScrollLeftSlow, ScrollLeft, ScrollLeftFast, Stop입니다.
	이미지를 클릭할 수 있는지 여부를 가져오거나 지정할 수 있습니다. 참,거짓 속성을 사용합니다.
	이미지의 세로길이 값을 가져오거나 변경할 수 있는 블록입니다. 숫자 속성(픽셀 단위)을 사용합니다. 높이비율은 스크린의 높이를 기준으로 몇 퍼센트를 가질지 변경할 수 있습니다.
	이미지의 사진 경로를 지정합니다. 텍스트 속성을 사용합니다.  * 한글 파일명은 지원하지 않습니다.
	이미지를 회전시킵니다. 숫자 값을 사용합니다. 디자이너 화면에서는 회전시켜도 보이지 않습니다. 스마트폰에 앱을 실행시켜야 확인할 수 있습니다.
	이미지 컴포넌트의 크기와 일치하도록 이미지 크기를 조정해야하는지 여부를 지정합니다. 참,거짓 속성을 사용합니다.
	이미지의 높이 또는 너비에 따라 사진의 크기를 조정하는 방법을 지정합니다. 가로/세로의 비율을 유지하게 하려면 '0'값을 입력하고 비율을 유지하지 않고 크기를 변경하려면 '1'값을 입력합니다.
	이미지 컴포넌트의 보이기여부 값을 가져오거나 변경할 수 있는 블록입니다. 참, 거짓 속성을 사용합니다. 참이면 컴포넌트가 보이고 거짓이면 컴포넌트가 화면에서 보이지 않습니다.
	이미지의 가로길이 값을 가져오거나 변경할 수 있는 블록입니다. 숫자 속성(픽셀 단위)을 사용합니다. 너비비율은 스크린의 너비를 기준으로 몇 퍼센트를 가질지 변경할 수 있습니다.

 

---

이미지 애니메이션 속성 

 

이미지 컴포넌트 속성 중 애니메이션 블록을 사용하면 이미지가 어떻게 움직이는지 확인해보겠습니다.

 

1) 애미메이션 값이 'ScrollLeft' 일때 : 이미지가 오른쪽에서 왼쪽 방향으로 움직입니다.

 

2) 애미메이션 값이 'ScrollRight' 일때 : 이미지가 왼쪽에서 오른쪽 방향으로 움직입니다.

3) 애미메이션 값이 'Stop' 일때 : 왼쪽 또는 오른쪽으로 애니메이션이 동작하는 것을 멈춥니다.