앱인벤터 멀티스크린 도화지 앱(multi screen)-설계편
앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.
이번 튜터리얼은 멀티 스크린을 활용하여 앱을 만들어 볼 예정이다. 예제는 도화지 앱을 응용해서 색상선택하는 기능을 별도의 화면으로 구성하여 스크린1과 색상선택 스크린 간의 화면 이동과 데이터값을 공유하는 기능을 확인하는 예제를 작성할 것이다.
도화지 앱과 같이 기능은 캔버스 컴포넌트 위에 손으로 스마트폰 화면을 터치하거나 드래그하면 선을 긋는 간단한 프로그램이다. 여기에 좀더 추가해서 색을 추가해서 다양한 색을 활용하여 낙서를 해보자.
도화지앱을 작성하지 않았다면 아래 글을 한번 참조하고, 꼭 앱인벤터로 도화지 앱을 작성한 후에 멀티스크린 도화지 앱을 작성할 것을 권한다.
앱인벤터 도화지 앱
앱인벤터 도화지 앱 앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성
flycoding.tistory.com
자, 이제 시작해보자...
. 멀티스크린 도화지 앱 기본 설계
캔버스 컴포넌트를 활용한다.
캔버스 컴포넌트에서 제공하는 드래그 이벤트, 터치 이벤트를 활용하여 캔버스 위에 선을 그려보자.
색상을 설정하기 위해 버튼을 클릭하면 'ColorPicker' 스크린으로 이동한다.
. 색을 설정하기 위해 슬라이더 3개를 활용하여 색을 만들것이다. 빨강, 초록, 파랑 슬라이더를 통해 색을 만들고 캔번스에 색을 설정할 것이다.
. 설정이 완료되면 'GotoPainting' 버튼을 클릭하여 'Screen1'으로 돌아와서 선택한 색상을 활용하여 캔버스 위에 선을 그러보자.
. 멀티스크린 도화지 앱 디자인
앱인벤터의 멀티스크린의 도화지앱의 화면 디자인은 아래 그림과 같다.
캔버스 컴포넌트와 버튼 컴포넌트 2개 그리고 수평배치 컴포넌트를 활용하여 디자인하였다.
ColorPicker 스크린 디자인은 다음 컴포넌트를 활용하여 디자인하였다.
컴포넌트로는 슬라이더 컴포넌트 3개와 레이블 컴포넌트 그리고 버튼 컴포넌트를 사용하였다.
스피터 컴포넌트 3개는 빨강, 초록, 파랑색 0~255값을 설정하기 위해 사용하였다.
레이블 컴포넌트는 슬라이더의 썸네일을 움직일 때마다 색깔을 즉시 사용자에게 알려줄 수 있도록 배경색을 수정한다.
버튼 컴포넌트는 'Screen1' 스크린으로 돌아가는 기능을 한다.
컴포넌트
앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다.
Scree1 스크린에서는 캔버스, 버튼 2개 및 수평배치 컴포넌트를 배치하였다.ColorPicker 스크린에서는 슬라이더 3개, 레이블, 버튼 컴포넌트 및 수직배치와 수평배치 컴포넌트를 사용하였다.
Screen1 스크린의 캔버스 컴포넌트 설정값 설정하기
캔버스 컴포넌트에 알고 싶으면 아래 글을 참고하세요
앱인벤터 캔버스 컴포넌트
앱인벤터 캔버스 컴포넌트 앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다. 이번 시간에는 앱인벤터의 캔버스 컴포넌트를 활용하여
flycoding.tistory.com
캔버스의 높이 : 부모 요소에 맞추기
캔버스의 너비 : 부모 요소에 맞추기
캔버스 컴포넌트에서 드래그하면 선을 그리는 작업을 할 것이다.
캔버스 블록에서 드래그 이벤트 블록과, 선그리기 블록을 활용하여 선을 그릴 것이다.
Screen1 스크린의 버튼 컴포넌트 2개 설정값 설정하기
버튼 텍스트 : Reset : 캔버스의 모든 내용을 지운다.
버튼 텍스트 : ColorPicker : ColorPicker 스크린으로 이동한다.
Screen1 스크린의 수평배치 컴포넌트 설정값 설정하기
수평정렬 : 가운데
수직정렬 : 가운데
너비 : 부모 너비에 맞추기
ColorPicker 스크린의 슬라이더 컴포넌트 설정값 설정하기
ColorPicker 스크린의 슬라이더 컴포넌트에는 색상을 선택하는 화면으로 구성하였다.
새로운 것은 아니고 도화지 앱에서 활용한 기능을 ColorPicker 스크린에 그대로 옮겨놓았다.
슬라이더 컴포넌트를 활용하여 색을 만들 것이다.
슬라이더 관련해서 더 자세한 사항을 알고 싶은 아래 글을 참고바란다.
슬라이더를 3개의 슬라이더를 사용한다. 빨강/초록/파랑 슬라이더이며 최소/최대값은 0~255값을 설정한다.
그리고 3개의 슬라이더를 조합하여 색상을 만들어 캔버스의 페인트색상을 설정한다.
앱인벤터 슬라이더 컴포넌트
앱인벤터 슬라이더 컴포넌트 앱인벤터의 컴포넌트들 중에 슬라이더 컴포넌트는 특정 숫자 값을 숫자를 입력하는 것 대신에 슬라이더를 좌우로 움직이면서 숫자값을 입력할 수 있는 컴포넌트
flycoding.tistory.com
ColorPicker 스크린의 색상 컴포넌트 설정값 설정하기
색상 컴포넌트는 기본으로 제공하는 블록이다.
색상 컴포넌트에서는 색상만들기 블록을 사용하여 색상을 만들 것이다.
아래 그림처럼 빨강, 초록, 파랑 슬라이더의 섬네일위치값을 활용하여 색상만들기를 통해 색을 만들어서 레이블의 배경색과 캔버스의 페인트색상으로 설정한다.
ColorPicker 스크린의 레이블 컴포넌트 설정값 설정하기
레이블 컴포넌트는 보통 글자를 표시하기 위한 목적으로 사용하는데, 이번 앱에서는 레이블의 배경색을 활용하여 색을 표현하는데 사용한다.
레이블의 배경색을 설정하여 사용자에게 현재 설정한 색이 어느 색인지를 실시간으로 알려준다.
ColorPicker 스크린의 버튼 컴포넌트 설정값 설정하기
레이블 컴포넌트는 보통 글자를 표시하기 위한 목적으로 사용하는데, 이번 앱에서는 레이블의 배경색을 활용하여 색을 표현하는데 사용한다.
설계 아이디어
기본 생각
도화지앱의 기본 생각은 캔버스 위에 도화지처럼 손을 터치하여 드래그하면 선을 그리는 앱이다.
이에 필요한 컴포넌트로 캔버스 컴포넌트이다.
컴포넌트의 블록을 살펴보면 캔버스 위에 드래그할 때 이벤트 처리하는 블록이 존재하며
드래그하면 캔버스 위에 선을 그리는 '선그리기' 블록을 활용하면 가능할 것 같다.
아래는 캔버스의 블록들 중 '드래그' 블록과 '선그리기' 블록을 표시하였다.
멀티 스크린에 대한 생각
Screen1과 ColorPicker 스크린 간의 전환과 스크린 간의 데이터 교환 2가지를 알아야 한다.
먼저 스크린간의 전환에 필요한 블록은 다음과 같다.
먼저 Screen1에서 '시작 값을 전달하며 다른 스크린 열기' 블록을 활용하여 ColorPicker 스크린을 연다.
여기서 인자값으로 'ColorPicker'와 시작값으로 'currentColor' 변수를 전달한다.
ColorPicker 스크린에서는 ColorPicker 스크린이 '초기화되었을때' 전달한 인자값을 전역변수 RGB에 지정하여 값을 전달한다.
이제 ColorPicker 스크린에서 Screen1(페인팅하는 화면)으로 되돌아가는 과정을 살펴보자.
'값을 반환하며 스크린닫기' 블록을 활용하여 화면을 전환한다. 결과값으로 'RGB' 리스트 변수값들을 반환한다.
ColorPicker 스크린에서 Screen1으로 전환할 때의 과정은 아래와 같은 절차이다.
Screen1에서 '다른스크린을닫았을때'의 이벤트를 받아서 결과값을 받아 처리하면 된다.
'다른스크린을닫았을때' 이벤트에서 인자값으로 '다른스크린이름' 그리고 '결과' 값을 전달한다.
Screen1은 2개의 스크린만 사용하기 때문에 '다른스크린이름' 값을 활용하지 않지만, 3개 이상의 스크린인 경우 스크린 간 이동을 검사할 때 '다른스크린이름'을 활용하여 이벤트를 처리할 수 있다.
'결과'값은 리스트변수 값으로 currentColor 변수에 '결과' 값을 지정한다.
지금까지 '멀티스크린 도화지앱 - 1' 앱 첫번째 설계 파트를 작성하였다. 도화지앱을 기반으로 2개의 스크린을 만들고 스크린 간의 전환과 스크린 사이의 데이터를 주고 받는 예제를 활용하여 멀티스크린 활용하는데 도움이 되면 좋겠다.
설계 파트에 이어 블록코딩을 꼭 이어서 보기를 추천한다. 그리고 꼭 실행시켜가면서 분석해 보기를 추천한다.
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 코딩따라하기' 카테고리의 다른 글
| 앱인벤터 페인트팟 앱(PaintPot) (0) | 2022.10.18 |
|---|---|
| 앱인벤터 멀티스크린 도화지 앱(multi screen)-코딩편 (0) | 2022.10.16 |
| 앱인벤터 매직 8 볼 앱 (0) | 2022.10.14 |
| 앱인벤터 두더지잡기2 앱 (1) | 2022.10.13 |
| 앱인벤터 두더지잡기 앱 (0) | 2022.10.12 |
댓글