앱인벤터 추석맞이 감사인사앱-캔버스, 버튼, 수평배치 컴포넌트

 

 

앱인벤터 추석맞이 감사인사 앱-캔버스, 버튼, 수평배치 컴포넌트

 

 

앱인벤터로 스마트폰에 추석맞이 감사 인사 앱을 만들어 부모님과 할아버지께 선물해 보는 것은 어떨까요?

추석맞이 감사인사 앱은 버튼, 수평배치 컴포넌트를 활용하여 간단하게 인사글과 사진 등을 선택하는 앱입니다. 마음을 전하는 앱을 만들어 보는 것은 어떨가요?

 

 

. 무엇을 만들 것인가?

. 화면에 감사 인사 그림을 넣고, 그림을 터치하면 추석 인사 말을 한다. (매우 간단한 앱이다.)

 

 

. 화면설계

. 그림 업로드

. www.unsplash.com 에서 thanksgiving 혹은 thanks, thankful 등의 검색어로 이미지를 검색하고 마음에 드는 이미지를 다운로드한다. 가능하면 3장(자기 마음대로) 정도 다운로드하고, 파일 이름을 1.jpg, 2.jpg, 3.jpg로 변경한다. 파일 이름을 변경하는 이유는 블록 코딩상에서 쉽게 변경하기 위함이다. 이름이 복잡하면 틀릴 수도 있고 해서 편의상 이름을 변경하는 것이다.

. 미디어에서 "파일 올리기"를 클릭한다. "파일 선택"을 클릭하면 폴더와 파일을 찾을 수 있는 대화상자가 나온다. 윈도우나 맥이나 대부분 인터넷에서 다운로드하면 "다운로드" 혹은 "download" 폴더에 그림이 다운로드되어 저장되어 있다.

 

 

앱인벤터-파일올리기

 

추석맞이앱-파일올리기 완성

 

. "그리기 & 애니매이션"에 캔버스 컴포넌트를 삽입한다.

. 캔번스 속성 : 높이(300픽셀), 너비(부모요소에 맞추기), 이미지("1.jpg") 설정한다.

 

추석맞이앱-캔버스컴포넌트

 

. 버튼을 하나 추가하여 추석감사글을 입력한다.

. 버튼 이름을 "추석감사글"

. 버튼 속성 : 높이는 "30" 픽셀, 너비는 "부모 요소에 맞추기"를 설정한다.

. 버튼 속성 : 배경색(노랑색), 글자크기(30), 텍스트 정렬(가운데 정렬)

. 버튼 속성 : 텍스트("풍성한 한가위 보내세요!!!")

 

대표사진 삭제 추석맞이앱-버튼컴포넌트

 

. 컴포넌트를 활용하여 화면 디자인은 모두 끝났다. 이제 블록 코딩을 해보자

 

 

코딩하기

[step1]. 우리가 해야 할 일

. 화면의 그림을 변경하기 위해서 "풍성한 한가위 되세요" 글자를 터치하면 다음 그림으로 변경한다.

. 현재 배경이미지 번호를 위한 변수를 만든다.

. 그림 파일 이름을 1.jpg, 2,jpg, 3.jpg로 설정하여 다음 그림 이미지를 할 때, 변수에 1을 더하여 다음 그림을 설정한다.

. 그림 파일 이름 순서가 1.jpg -> 2.jpg -> 3.jpg -> 1.jpg -> 2.jpg -> 3.jpg 순서로 계속 순환되로록 만든다.

 

추석맞이앱-코딩

 

 

[심화 학습]

캔버스 그림 화면에 글자를 입력하는 기능을 추가해보자.

 

. 화면 디자인

. 텍스트박스와 버튼 컴포넌트를 추가한다. 텍스트박스에서 글자를 입력한 후, 버튼을 클릭하면캔버스 화면에 글자가 표시되도록 한다.

. 텍스트박스와 버튼 컴포넌트를 수평배치하기 위해 "레이아웃"에서 수평배치를 화면에 갖다놓는다.

. 수평배치 박스 안에 텍스트박스와 버튼 컴포넌트를 집어넣는다.

 

. 수평배치의 속성 : 너비(부모요소에 맞추기)

. 버튼의 텍스트 : 캔버스에 글자넣기

 

추석맞이앱-텍스트박스, 수평배치 컴포넌트

 

. 여기서 한가지 팁, 화면아래로 텍스트박스와 버튼 컴포넌트가 아래로 내려가서 보이지 않는다. 이럴 경우에는 컴포넌트에 "Screen1"을 클릭하고, Screen1 속성에 "스크롤가능여부" 체크박스를 선택해주면 화면에 스크롤되며 보이지 않던 컴포넌트를 선택할 수 있게 된다.

 

screen1-스크롤가능여부

 

코딩하기

. 텍스트박스에 글자를 넣고, 캔버스에 글자넣기 버튼을 클릭하면 캔버스에 텍스트를 넣어서 표시한다.

 

 

[step2]

. 캔버스에 글자넣기 버튼을 클릭했을 때,

. 캔버시의 글자크기를 50으로 지정

. 캔버스 지우기

. 캔버스.기울어진텍스트그리기 블록으로 글자, x,y위치 및 각도를 설정하여 글자를 캔버스에 그린다.

. 텍스트박스의 텍스트를 빈공간으로 초기화한다.

 

추석맞이앱-캔버스에글자넣기

 

사용한 컴포넌트

. 버튼 컴포넌트

. 텍스트박스 컴포넌트

. 수평배치 컴포넌트

. 캔버스 컴포넌트

 

앱인벤터로 버튼과 레이블 컴포넌트를 활용하여 추석에 간단히 부모님이나 할아버지, 할머니에게 축하 메시지를 앱으로 선물하는 것은 어떨까요? 캔버스 위에 글자를 써서 넣기 기능과 캔버스의 이미지를 변경하면서 글자를 넣어보는 것도 재미가 있다.

좀더 유연한 프로그램이 되려면 캔버스의 배경이미지를 그림 파일에서 선택하여 배경이미지로 설정하는 것을 개선점으로 그리고 추가적으로 추후에 수정해서 공유해보록 하죠.

 

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.