앱인벤터-슬라이더컴포넌트-예제
앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다.
이번 시간에는 슬라이더 컴포넌트를 활용하여 슬라이더 컴포넌트에서 제공하는 다양한 기능 등을 표시해 볼 것이다.
슬라이더 컴포넌트의 속성값과 블록들에대해 자세히 알고 싶으면 아래 글을 참고바란다.
앱인벤터 슬라이더 컴포넌트
앱인벤터 슬라이더 컴포넌트 앱인벤터의 컴포넌트들 중에 슬라이더 컴포넌트는 특정 숫자 값을 숫자를 입력하는 것 대신에 슬라이더를 좌우로 움직이면서 숫자값을 입력할 수 있는 컴포넌트
flycoding.tistory.com
. 디자인-알림앱
지금 만들고자 하는 슬라이더 예제 앱은 슬라이더의 다양한 속성값과 기능 등을 설정하고 화면에 표시하는 등 슬라이더의 기능을 확인하기 위한 예제이다. 스마트폰 화면 디자인의 모습은 아래 그림과 같다.
화면 맨 위에 슬라이더 컴포넌트가 있으며 아래에 슬라이더 값을 표시하는 레이블이 있다.
그리고 아래에 레이블로 '슬라이더 변경하기'를 표시하고 아래에 슬라이더 컴포넌트와 관련한 속성값을 설정하는 기능을 디자인하였다.
. 슬라이더이의 최대값과, 최소값, 너비, 썸네일위치를 설정하는 버튼과 숫자를 입력받는 텍스트박스 컴포넌트를 배치하였다.
. 표형식 배치를 통해 색상, 최대값, 최소값 등의 수치를 표시한다.
. 썸네일 활성화 스위치, 슬라이더 보이기 스위치를 통해 슬라이더 컴포넌트를 확인해보자.
. 슬라이더의 왼쪽, 오른쪽 색상을 변경하는 컴포넌트가 맨 아래에 위치한다.
컴포넌트 및 속성값 설정
슬라이더 바를 움직이면 슬라이더 값 표시하기
상기 디자인에 기반하여 필요한 컴포넌트는 아래와 같다.
. 슬라이더 컴포넌트 : 바를 좌울 움직이면 값이 변경되는 컴포넌트이다.
- 속성값 설정 없음.
. 레이블1 : '슬라이더값 : ' 표시와 실
. 슬라이드값 레이블 : 0 표시 (슬라이더 바의 위치값 표시)
. 수평배치 : 레이블 2개를 수평배치하기 위해 사용한다.
. 레이블2 : 선틀 표시하기 위해 사용한다.
. 레이블3 : '슬라이더 변경하기' 텍스트 표시한다.
. 배경색 : 주황
. 글꼴크기 :: 20
. 너비 : 부모 요소에 맞추기
. 텍스트 : 슬라이더 변경하기
. 텍스트정렬 : 가운데
슬라이더 컴포넌트 속성값 입력하여 변경하기(최대값, 최소값, 너비, 썸네일 위치)
버튼 컴포넌트 4개 및 수평배치
. 최대값버튼 : 텍스트(최대값)
. 최소값버튼 : 텍스트(초소값)
. 너비 버튼 : 슬라이더의 너비값을 변경한다.
. 썸네일위치 버튼 : 썸네일바의 위치를 변경하는 버튼이다.
. 텍스트박스 컴포넌트
- 너비 (70픽셀)
- 힌트 : 숫자를 입력하세요
- 숫자만(체크)
. 수평배치 컴포턴트
- 최대값, 최소값 너비, 썸네일위치 버튼을 수평으로 배치한다.
- 수평정렬 : 가운데
- 수직정렬 : 가운데
- 너비 : 부모요소에 맞추기
표형식배치
레이블 8개를 표형식배치에 넣는다. 아래 글을 표형식배치 컴포넌트에 대해 더 알고자 하면 확인바란다.
위체 입력한 값들을 표형식 배치로 값을 표시한다.
표시하는 값은 최대값, 최소값, 너비, 썸네일위치값을 표에 표시한다.
앱인벤터 레이아웃-표형식배치 컴포넌트
레이아웃-표형식배치 컴포넌트 앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다. 이번 시간에는 레이아웃에서 표형식배치 컴포넌트에
flycoding.tistory.com
. 표형식배치
. 열 : 4
. 너비 : 부모 요소에 맞추기
. 행 : 2
2행에 4개의 열의 표 형식을 만든다.
첫번째 행에 4개의 레이블을 위치시킨다.
. 레이블 : 텍스트(너비)
. 레이블 : ??
. 레이블 : 텍스트(썸네일위치)
. 레이블 : ??
두번째 행에 4개의 레이블을 위치시킨다.
. 레이블 : 텍스트(최대값)
. 레이블 : ??
. 레이블 : 텍스트(최소값)
. 레이블 : ??
썸네일 활성화 및 보이기 설정
. 스위치 컴포넌트를 활용하여 썸네일 활성화 on/off, 슬라이더 컴포넌트 보이기 on/off를 설정한다.
슬라이더 컴포넌트 왼쪽/오른쪽 색상 설정하기
버튼 컴포넌트 4개 및 수평배치
. 왼쪽 버튼 : 텍스트(왼쪽색상)
. 오른쪽 버튼 : 텍스트(오른쪽색상)
. 수평배치 컴포턴트
- 수평정렬(가운데))
- 너비 : 부모 요소에 맞추기
색상만들기
. 슬라이더 컴포넌트 3개와 수직배치 그리고 레이블 1개와 수평배치의 컴포넌트를 사용한다.
. 슬라이더 컴포넌트 3개를 수직배치에 넣는다.
- 슬라이더 컴포넌트 : 왼쪽색상(빨강), 최댓값(255), 최소값(0)
- 슬라이더 컴포넌트 : 왼쪽색상(초록), 최댓값(255), 최소값(0)
- 슬라이더 컴포넌트 : 왼쪽색상(파랑), 최댓값(255), 최소값(0)
색상 RGB의 색상을 만들기 위해 0~255값을 범위로 해서 값을 설정하여 색상을 만든다.
. 수직배치
. 슬라이더 컴포넌트 3개를 수직을 배열하는데 사용한다.
. 레이블 컴포넌트 : 슬라이더 컴포넌트 3개를 조합하여 색상을 레이블의 '배경색'에 설정한다.
. 수평배치
. 수직배치와 레이블 컴포넌트를 수평배치하기 위해 설정한다.
. 수평정렬 : 가운데
. 수직정렬 : 가운데
. 너비 : 부모 요소에 맞추기
설계 아이디어
슬라이더 컴포넌트의 속성값을 설정하고 값을 표시하는 앱이다. 특정한 기능을 하는 것은 아니고, 슬라이더의 속성값을 이해하는데 도움이 되고 슬라이더의 기능을 잘 활용하는데 목적이 있는 앱이다.
1. 기능으로는 슬라이더를 움직이면 슬라이더의 값을 표시해보는 것이다.
2. 슬라이더를 변경하기 기능에는 숫자값을 입력하여 변경하는 기능으로 최대값, 최소값, 너비, 썸네일위치값을 변경할 수 있다.
- 텍스트박스에 숫자값을 입력하고 최대값, 최소값, 너비, 썸네일위치 버튼을 클릭하면 슬라이더 컴포넌트 속성값이 변경된다.
3. 스위치 컴포넌트를 활용하여 썸네일 활성화 및 슬라이더 보이기 기능
- 스위치 컴포넌트 2개를 활용하여 썸네일 활성화 on/off 및 슬라이더 보이기 on/off를 설정한다.
4. 슬라이더 컴포넌트의 왼쪽/오른쪽 색상 변경하기
- 아래 슬라이더 컴포넌트 3개를 활용하여 색상을 만들어서 왼쪽/오른쪽 버튼을 클릭하면 슬라이더의 왼쪽/오른쪽 색상을 을 변경한다.
코딩블럭
. 슬라이더 썸네일위치를 변경했을 때
슬라이더 썸네일 위치가 변경이 되면 레이블의 썸네일 위치값을 레이블 컴포넌트를 통해 표시한다.
. 최대값 버튼을 클릭했을 때
슬라이더 컴포넌트의 최대값을 변경한다.
| . 조건확인(텍스트박스에 숫자가 입력되어 있는지 확인한다.) - 입력이 되어 있다면 - 슬라이더의 최대값을 텍스트박스에 입력한 값을 설정한다. - 최대값 레이블에 텍스트박스에 이력한 값을 설정한다. - 텍스트박스가 비어 있다면 - 알림 경고창에 '숫자를 입력하세요'를 표시한다. . 텍스트박스의 텍스트에 0을 입력한다. |
. 최소값 버튼을 클릭했을 때
슬라이더 컴포넌트의 최소값을 변경한다.
| . 조건확인(텍스트박스에 숫자가 입력되어 있는지 확인한다.) - 입력이 되어 있다면 - 슬라이더의 최소값을 텍스트박스에 입력한 값을 설정한다. - 최소값 레이블에 텍스트박스에 이력한 값을 설정한다. - 텍스트박스가 비어 있다면 - 알림 경고창에 '숫자를 입력하세요'를 표시한다. . 텍스트박스의 텍스트에 0을 입력한다. |
. 너비 버튼을 클릭했을 때
먼저 텍스트박스에 너비 값을 입력하고, 너비 버튼을 클릭하면, 슬라이더의 너비 값을 변경한다.
| . 조건확인(텍스트박스에 숫자가 입력되어 있는지 확인한다.) - 입력이 되어 있다면 - 슬라이더의 너비 값을 텍스트박스에 입력한 값을 설정한다. - 너비 레이블에 텍스트박스에 이력한 값을 설정한다. - 텍스트박스가 비어 있다면 - 알림 경고창에 '숫자를 입력하세요'를 표시한다. . 텍스트박스의 텍스트에 0을 입력한다. |
. 썸네일위치 버튼을 클릭했을 때
먼저 텍스트박스에 썸네일위치 값을 입력하고, 썸네일위치 버튼을 클릭하면, 슬라이더의 썸네일위치 값을 변경한다.
. 썸네일활성화 스위치가 변경되었을때
썸네일활성화 스위치가 변경될 때마다 해당 값을 슬라이더 컴포넌트의 썸네일활성화여부를 설정한다.
스위치값이 변경될때마다 슬라이더의 섬네일화성화값을 on/off값을 설정한다.
. 보이기 스위치가 변경되었을때
보이기 스위치가 변경될 때마다 해당 값을 슬라이더 컴포넌트의 보이기여부값을 설정한다.
스위치값이 변경될때마다 슬라이더의 보이기 값을 on/off값을 설정한다.
. 왼쪽색상 버튼을 클릭했을때
왼쪽색상 버튼을 클릭했을 때, 슬라이더의 왼쪽색상값을 변경한다.
아래 빨강, 초록, 파랑 슬라이더의 섬네일위치값을 조합하여 색상만들기 블록을 통해 색상값을 만든다.
레이블의 배경색에도 동일한 값을 설정한다.
. 오른쪽색상 버튼을 클릭했을때
오른쪽색상 버튼을 클릭했을 때, 슬라이더의 왼쪽색상값을 변경한다.
아래 빨강, 초록, 파랑 슬라이더의 섬네일위치값을 조합하여 색상만들기 블록을 통해 색상값을 만든다.
레이블의 배경색에도 동일한 값을 설정한다.
. 빨강/초록/파랑 슬라이더 위치가 변경되었을 때
빨강/초록/파랑 슬라이더 위치가 변경되었을 때, 오른쪽 레이블의 배경색을 바로 변경 및 설정하여 사용자에게 보여준다.
실행결과 화면
앱인벤터의 슬라이더 컴포넌트에 다양한 실행 테스트 화면은 아래 그림과 같다.
제일 먼저, 초기 실행화면이다.
썸네일의 바를 이동해보자, 그러면 아래 슬라이더의 값이 39.6으로 변경됨을 확인할 수 있다.
텍스트박스에 255값을 입력하고 최대값버튼을 클릭하면 슬라이더의 최대값이 255로 변경됨을 알 수 있다.
또한 아래 레이블의 최대값이 255로 표시된다.
텍스트박스에 10값을 입력하고 최소값버튼을 클릭하면 슬라이더의 최소값이 10으로 변경됨을 알 수 있다.
또한 아래 레이블의 최소값이 10으로 표시된다.
텍스트박스에 150값을 입력하고 너비 버튼을 클릭하면 슬라이더의 너비 값이 150로 변경됨을 알 수 있다.
또한 아래 레이블의 너비 값이 150로 표시된다.
텍스트박스에 100값을 입력하고 썸네일위치 버튼을 클릭하면 슬라이더의 썸네일위치 값이 100로 변경됨을 알 수 있다.
또한 아래 레이블의 섬네일위치 값이 100로 표시된다.
썸네일 활성화 스위치를 오프로 변경하면 아래 실행화면처럼 맨 위의 슬라이더에 썸네일이 사라진다.
슬라이더 보이기 스위치를 오프로 변경하면 아래 실행화면처럼 맨 위의 슬라이더가 사라진다.
아래 빨강/초록/파랑 슬라이더 위치를 변경한 후, 왼쪽색상 버튼을 클릭하면, 상단의 슬라이더의 왼쪽 색상이 변경됨을 알 수 있다.
또한 빨강/초록/파랑 슬라이더의 위치가 변경될 때마다 오른쪽 레이블의 색상을 통해 현재의 색을 확인 할 수 있다.
아래 빨강/초록/파랑 슬라이더 위치를 변경한 후, 오른쪽색상 버튼을 클릭하면, 상단의 슬라이더의 오른쪽 색상이 변경됨을 알 수 있다.
또한 빨강/초록/파랑 슬라이더의 위치가 변경될 때마다 오른쪽의 레이블의 색상을 통해 현재의 색을 확인 할 수 있다.
아래는 동영상 실행화면이다.
지금까지 앱인벤터 슬라이더 컴포넌트를 활용하여 슬라이더 속성값을 변경하는 앱을 작성해 보았다. 단순한 앱이지만, 다양한 컴포넌트를 활용하여 앱을 작성하여 보았으며, 다양한 컴포넌트의 이해와 활용 능력이 향상되기를 바란다.
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 코딩따라하기' 카테고리의 다른 글
| 앱인벤터 볼던지기 앱 (0) | 2022.10.06 |
|---|---|
| 앱인벤터 도화지 앱 (0) | 2022.10.05 |
| 앱인벤터 나에게말해줘 세계를 앱 (0) | 2022.10.02 |
| 앱인벤터 나에게말해줘 앱 (0) | 2022.10.01 |
| 앱인벤터 헬로우 코디(Hello Codi) (0) | 2022.09.30 |
댓글