앱인벤터 슬라이더 컴포넌트

 

 앱인벤터 슬라이더 컴포넌트

 

앱인벤터의 컴포넌트들 중에 슬라이더 컴포넌트는 특정 숫자 값을 숫자를 입력하는 것 대신에 슬라이더를 좌우로 움직이면서 숫자값을 입력할 수 있는 컴포넌트이다.

 

 

. 앱인벤터 슬라이더 컴포넌트

스마트폰을 사용하다 보면, 텍스트 입력 창에 글자를 표시하지 않고 ●로 표시하는 경우가 있는데, 대부분 암호를 입력할 때 활용된다. 모양은 가로로 기다란 막대기 위에 썸(섬네일)이 붙어있어 좌우로 조절이 가능한 컴포넌트이다. 최대값이 설정되어 있으면 사용자가 움직인 정도를 최대값에 대해서 나타낼 수 있다. 흔히 스마트폰 소리 볼륨 조절 시에 사용된다.

예로 최대값이 100인 상태에서 썸을 중앙으로 이동시키면 현재값은 50이 된다.

 

 

팔레트

앱인벤터의 슬라이더 컴포넌트는 팔레트에 “사용자 인터페이스”에 있다. 슬라이더 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 화면에 추가된다.

 

 

뷰어

 

아래 그림은 팔레트에서 암호텍스트박스를 추가하여 뷰어에 나타난 화면이다.

하기 예제는 슬라이더 컴포넌트와 아래에 수평배치로 레이블 컴포넌트 2개를 삽입하여 수평배치하였다. 슬라이더를 움직이면 아래에 슬라이더 값을 출력하는 것이다.

 

앱인벤터 슬라이더컴포넌트 삽입 화면

 

앱인벤터의 슬라이더 컴포넌트의 속성값

 

앱인벤터의 슬라이더 컴포넌트의 속성값은 아래와 같다.

슬라이더 컴포넌트에 특화된 속성갑은 최댓값, 최소값, 섬네일활성화, 섬네일위치 속성값이 있다.

슬라이더의 최댓값과 최소값은 슬라이더의 최소값과 최대값을 설정할 수 있다.

슬라이더의 섬네일활성화 속성값은 기본값은 참이다. 거짓이면 섬네일이 없어지고, 사용자가 임의로 좌우로 움직여서 값을 변경할 수 없다.

슬라이더의 섬네일 위치는 섬네일의 기본 위치 값을 설정한다.

 

앱인벤터 슬라이더 컴포넌트 속성값

 

 

. 앱인벤터 슬라이더 컴포넌트의 블럭들

 

. 앱인벤터 슬라이더 블럭중 이벤트 블럭들

슬라이더 컴포넌트의 이벤트 블럭은 ‘위치가변경되었을때’ 이 있다. 사용자가 섬네일을 좌우로 움직여서 위치가 변경이 되면 해당 이벤트가 발생한다. 그리고 이벤트가 발생하면 ‘실행’ 영역의 명령이 실행이 된다.

 

앱인벤터 슬라이더 컴포넌트 위치가변경되었을때 블럭

 

 

예제로 섬네일 위치가 변경되었을 때, 아래 ‘값’ 레이블에 위치 값을 설정한다.

 

앱인벤터 슬라이더 컴포넌트 위치가변경되었을때 예제

 

. 앱인벤터 슬라이더 컴포넌트 블럭중 지정하기/가져오기 블럭들

 

. 섬네일활성화 블럭

섬네일활성화 속성값은 기본값으로 ‘참’이다. 거짓이면 섬네일이 없어지고, 사용자가 임의로 좌우로 움직여서 값을 변경할 수 없다.

 

앱인벤터 슬라이더 컴포넌트 섬네일활성화 블럭

 

. 섬네일위치 블럭

섬네일위치 속성값은 섬의 기본 위치를 지정하거나 위치 값을 가져오는 블럭이다.

 

앱인벤터 슬라이더 컴포넌트 섬네일위치 블럭

 

 

 

나머지 블럭은 기본 블럭들이고 중복되어서 생략합니다. 이에 알고 싶으면 레이블이나 버튼 블럭을 참고해주시면 감사하겠습니다.

 

 

 

 

이상으로 알림 컴포넌트와 관련된 코딩블록을 리뷰해보았습니다. 여기서 다루지 않은 블록들은 기본적인 블록들로 레이블이나 버튼 컴포넌트의 블록에서 다루었기 때문에 해당 글을 참고하시면 감사하겠습니다.

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.