앱인벤터 이미지 컴포넌트
앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다.
이번 시간에는 이미지 컴포넌트에 대해 이해하고 실습을 하고자 한다.
이미지 컴포넌트는 스마트폰 화면에 이미지를 표시할 때 사용하는 컴포넌트이다.
. 이미지 컴포넌트
스마트폰에 이미지를 표시할 때 사용하는 컴포넌트이다. 이미지 컴포넌트의 속성값과 이미지 컴포넌트의 블럭은 어떤 것이 있는 살펴보자.
팔레트
이미지 컴포넌트는 팔레트에 “사용자 인터페이스”에 있다. 이미지 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 레이블이 추가된다.
뷰어
아래 그림은 팔레트에서 버튼을 추가하여 뷰어에 나타난 화면이다.
이미지 컴포넌트의 속성값
이미지 컴포넌트의 속성값은 아래와 같다.
. Alternate Text
. 대체 텍스트로 시각장애인 등을 위해 이미지를 설명해주는 텍스트이다. 이미지를 볼 수 없는 상황이나 볼 수 없는 사람들을 위해 이미지를 설명해주는 텍스트이다.
. Animation
애니메이션의 제한된 모양을 설정한다. 앱인벤터에서 허용된 애니메이션 모션은 ScrollRightSlow, ScrollRight, ScrollRightFast, ScrollLeftSlow, ScrollLeft, ScrollLeftFast, Stop 이 있다.
예를 들어 ScrollRightSlow를 모션으로 설정하면, 이미지가 왼쪽에서 오른쪽으로 천천히 이동하는 모션을 보여준다.
예제에서 이미지를 클릭하면 우측으로 움직이도록 하는 예제이다. 먼저 이미지를 클릭할 수 있도록 설정해야 한다. 속성창에서 Clickable을 체크해도 되고 아래 그림처럼 Screen1 초기화되었을 때 이미지.Clickable을 참 값을 설정한다. 그리고 이미지의 애니메이션 값을 'ScrollRightSlow'로 설정하면 끝난다.
간단한 예제라 한번 따라해보면 속성값들을 이해하는데 도움이 될 것이다.
. 사진
이미지 컴포넌트에 사진을 선택할 수 있는 속성값이다. 파일을 업로드한 사진들 중에서 선택할 수 있다.
. 회전각도 지정하기/값 블럭
이미지의 회전각도 값을 반환하거나 회전각도를 설정하는 블럭이다. 값은 0~360도에서 설정할 수 있다.
예제로 슬라이드 컴포넌트를 활용하여 슬라이드를 좌우로 하면 0~360도 회전값을 설정할 수 있고, 슬라이드 함에 따라 이미지가 회전하는 예제의 블럭은 아래와 같다.
먼저 사용자 인터페이스에서 "슬라이더" 컴포넌트를 Drag&Drop한다. 슬라이드 컴포넌트의 속성값에서 최소값(0), 최대값(360) 값을 설정한다.
이제 블럭 코딩을 해보자. 우리가 하고자하는 것을 슬라이드를 좌우로 위치가 바뀔때마다 이미지의 회전각도를 변경시키는 것이다.
이미지 컴포넌트의 나머지 속성값은 이전에 레이블 및 버튼 속성값에서 학습한 내용입니다. 혹시 잘 이해가 되지 않는다면, 레이블 컴포넌트나 버튼 컴포넌트를 설명한 글을 참조하시면 됩니다.
아래 링크를 참조하세요
앱인벤터 레이블 컴포넌트 예제-애국가 가사 꾸미기
레이블로 애국가 가사 꾸미기 앱인벤터에서 레이블 컴포넌트로 애국가 가사를 꾸며보는 예제 앱입니다. 레이블 컴포넌의 다양한 속성값을 설정하고 레이블 컴포넌트의 블럭들을 활용하여 애국
flycoding.tistory.com
이미지 컴포넌트 코딩 블럭
이미지 컴포넌트 언제 이미지.클릭했을때 블럭
이미지 컴포넌트의 이벤트 관련 블럭은 하나가 있다. 이미지를 클릭했을 때 이벤트를 처리하는 블럭이다.
우리는 속성값에서 이미 언제 이미지.클릭했을 때 블럭의 활용 예제를 학습하였다. 이미지를 클릭하면 오른쪽으로 움직이는 예제에서 활용하였다. 위의 에제를 참조하기 바랍니다.
이미지 컴포넌트의 Altenate Text 블럭
Alternate Text에 대한 내용은 위의 속성값의 Alternate text를 참조바랍니다. 여기서는 Alternate Text 값을 설정하는 블럭에 대해 기술하고자 한다. 값 블럭에는 텍스트 상자가 입력될 수 있으며, 값은 임의의 텍스트 값을 지정한다.
이미지 컴포넌트의 애니메이션 블럭
이미지의 애니메이션을 설정하는 블럭이다. 애니메이션 값에는 텍스트로 ScrollRightSlow, ScrollRight, ScrollRightFast, ScrollLeftSlow, ScrollLeft, ScrollLeftFast, Stop 값을 넣을 수 있다. 값에 따라 이미지의 애니메이션 효과가 다르게 지정할 수 있다. 예로 ScrollRightSlow는 이미지를 왼쪽에서 오른쪽으로 천천히 이동시키는 효과를 설정할 수 있다.
중복은 되지만, 실습을 하지 않았다면 간단히 해보고, 이미 속성값에서 애니메이션을 했다면 넘어가도 좋다.
. 이미지 컴포넌트 Clickable 값반환하기/지정하기 블럭
이미지.Clickable을 반환하는 값은 True(참) 혹은 False(거짓) 값을 반환한다. 지정하기 값에는 True 혹은 False값을 설정하면 된다. 그러면 이미지를 클릭하면 이벤트를 발생시킬 수 있다.
. 이미지 컴포넌트의 회전각도 값반환하기/지정하기 블럭
이미지를 회전하는 각도값을 알고싶을 경우에 반환하기 블럭을 활용하고, 이미지의 회전각도를 설정하려면 지정하기 블럭을 사용하면 된다. 값의 범위는 0~360도이다.
활용예제는 위에 예제를 참고하세요
. 이미지 컴포넌트 지정하기 이미지.사진크기맞추기 블럭
이미지 컴포넌트의 사진크기맞추기 블럭은 이미지를 화면의 크기에 맞출 것인지 아닌지를 설정할 수 있다. 값으로는 True 혹은 False값을 지정할 수 있다.
아래 그림은 사진크기맞추기값을 True값으로 설정하면 화면에 이미지가 사진크기에 자동으로 맞추어진다.
사진크기맞추기값을 False값으로 설정하면 사진크기로 이미지가 표시된다.
. 이미지 컴포넌트 이미지.크기변경 값반환하기/지정하기 블럭
이미지 크기변경에는 0과 1값을 반환하거나 지정할 수 있다.
크기변경 값이 1이면, FIT_XY가 적용되어 이미지 비율을 무시하고 컴포넌트의 너비와 높이에 맞추어서 크기가 조정이 된다. 크기 변경 값이 0이면, 이미지의 비율에 맞추는데 긴쪽을 컴포넌트에 맞추고 남는 공간은 빈칸으로 표시한다.
앱인벤터 이미지 컴포넌트-이미지크기변경값이 0인경우의 그림이다.
앱인벤터 이미지 컴포넌트-이미지크기변경값이 1인경우의 그림이다. 1인 경우에는 빈틈없이 사진의 크기가 화면 크기에 맞추어진다.
나머지 블럭은 공통적으로 활용이 되는 너비/높이 등을 지정하는 블럭들이다. 이에 대한 이해가 필요하면 레이블 컴포넌트나 버튼 컴포넌트 글을 참고하세요
이미지 컴포넌트를 활용한 예제는 무궁하다. 그러나 간단하게 이미지의 속성값을 적용할 수 있는 예제를 만들어서 이미지의 블럭과 속성값들을 활용할 수 있는 능력을 향상시키는데 중점을 두고 있다. 꼭 아래 링크의 예제를 실습하기를 권장한다.
앱인벤터-이미지 컴포넌트를 활용하는 예제
앱인벤터-이미지 컴포넌트를 활용하는 예제 앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다. 이번 시간에는 이미지 컴포넌트의 속
flycoding.tistory.com
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 컴포넌트' 카테고리의 다른 글
| 앱인벤터 목록뷰 컴포넌트 (0) | 2021.11.10 |
|---|---|
| 앱인벤터 목록선택버튼 컴포넌트 (0) | 2021.10.20 |
| 앱인벤터-날짜선택버튼 컴포넌트 (0) | 2021.10.10 |
| 앱인벤터-버튼 컴포넌트 (0) | 2021.10.01 |
| 앱인벤터-레이블 컴포넌트 속성과 블록 (0) | 2021.09.28 |
댓글