NEW 앱인벤터2 강좌16. 컴포넌트 탐구 – 슬라이더(Slider)

이번에는 슬라이더 컴포넌트에 대해서 알아보도록 하겠습니다.

0. 개요

슬라이더 컴포넌트는 가로로 기다란 막대기 위에 썸(섬네일)이 붙어있어 좌우로 조절이 가능한 컴포넌트 입니다.
최댓값이 설정되어있으면 사용자가 움직인 정도를 최댓값에 대해서 나타낼 수 있습니다.
흔히 휴대폰 볼륨 조절시에 쓰이죠.

만약 최댓값이 100인 상태에서 썸을 중앙까지 이동시키면 현재값(섬네일 위치)은 50이 되고,
정중앙이더라도 최댓값이 200이면 섬네일 위치는 100이 됩니다.

1. 형태

디자이너에 두었을 때 모습은 위와 같습니다.
보이기 속성 같은게 아닌 이상 속성을 건드려도 미리보기 상태에서는 변화가 없습니다.

1. 속성

이름(Name) 속성
속성명	설명
왼쪽 색상(ColorLeft)	썸의 왼쪽에 위치한 부분의 색상을 지정합니다.
오른쪽 색상(ColorRight)	썸의 오른쪽에 위치한 부분의 색상을 지정합니다.
너비(Width)	슬라이더의 너비를 지정합니다.
최댓값(MaxValue)	슬라이더의 최댓값을 지정합니다.
최솟값(MinValue)	슬라이더의 최솟값을 지정합니다.
섬네일 활성화(ThumEnabled)	기본값은 참입니다. 거짓이면 썸네일이 없어지고, 사용자가 임의로 움직여서 값을 변경할 수 없습니다.
섬네일 위치(ThumPosition)	썸네일의 기본 위치를 지정합니다. 위치가 최댓값, 최솟값 범위를 벗어나면 벗어난 값에 따라 둘 중 하나로 지정됩니다. ex) 최댓값이 10인데 섬네일 위치가20이면 실제로는 10이됨 최솟값이 0인데 섬네일 위치가 -10이면 실제로는 0이됨
보이기(Visible)	보이기를 지정합니다.

2. 블록

슬라이더(Slider) 속성 지정 블록
블록	입력형식	설명
	색상	썸의 왼쪽에 위치한 부분의 색상을 지정합니다.
	색상	썸의 오른쪽에 위치한 부분의 색상을 지정합니다.
	숫자	컴포넌트의 높이를 현재 스크린의 높이에 대한 비율(%)로 지정합니다.
	숫자	최댓값을 지정합니다.
	숫자	최솟값을 지정합니다.
	논리	기본값은 참입니다. 거짓이면 썸네일이 없어지고, 사용자가 임의로 움직여서 값을 변경할 수 없습니다.
	숫자	썸의 기본 위치를 지정합니다.
	숫자	너비를 픽셀(px) 단위로 지정합니다.
	숫자	컴포넌트의 너비를 현재 스크린의 너비에 대한 비율(%)로 지정합니다.
	논리	컴포넌트의 보이기 여부를 지정합니다.

3. 예제

슬라이더의 기능과 속성을 테스트 해볼 수 있는 간단한 예제입니다.

슬라이더(Slider) 이벤트 블록
블록	설명
	슬라이더의 썸 위치가 변경될 때 마다 실행됩니다. 사용자가 드래그로 이동해도 값이 변경되는 순간마다 반복해서 실행됩니다. 매개변수 [섬네일위치]로 그 순간의 섬네일 값을 가져올 수 있습니다.