Lab-08: 안드로이드 계산기 만들기

앱 인벤터를 활용한 계산기 어플리케이션 제작

ㅇ 학습목표

- 앱 인벤터의 활용 연습 및 블록모드 수학블록을 활용하여 간단한 사칙연산 계산기 앱을 제작

ㅇ 앱 인벤터를 활용한 간단한 계산기 제작과정

앱 인벤터 주소 http://appinventor.mit.edu/explore/#

앱 인벤터에 접속하여, 우측 상단의 Create Apps!를 클릭하여 진행.

(구글 아이디 필요)

1. 앱 인벤터 사이트를 열고 새 프로젝트를 생성

2. 우측 속성창에서 앱 이름, 스크린 방향(세로) 설정

3. 좌측 팔레트의 레이아웃 항목에서 수평배치 드래그하여 스크린에 가져다 놓음.

4. 스크린에서 레이아웃을 선택하고, 우측 속성탭의 수평정렬을 ‘중앙:3’으로 배경색 자유롭게, 너비를 ‘부모에 맞추기’로 설정

5. 팔레트의 ‘사용자 인터페이스’ 항목에서 텍스트 상자, 레이블, 텍스 상자를 차례대로 선택하여 중앙 스크린에 드래그하여 추가하고 아래와 같이 배치.

6. 우측 속성탭에서 텍스트 상자 두개의 너비를 ‘부모에 맞추기’로 체크하고, 힌트에 ‘숫자’로 입력. (컴포넌트에서 텍스상자를 클릭하면 개별로 속성 창이 바뀜)

7. 레이블 1의 너비를 ’10 pixels’로 설정하고, 텍스트 값은 공란으로 비워둠.

8. 좌측 팔레트 탭의 레이아웃에서 ‘수직배치’를 드래그하여 스크린에 추가.

9. 수직배치1의 수평 정렬 ‘중앙:3’, 수직 정렬 ‘가운데:2’, 너비를 ‘부모에 맞추기’로 설정함.

10. 이전에 설정한 텍스트 상자 두개와 레이블 하나를 아래의 그림과 같이 배열한 뒤, 좌측 사용자인터페이스에서 버튼 4개를 추가로 수직배치1 레이아웃에 아래와 같이 추가.

11. 추가한 4개의 버튼을 모두 너비 ‘50px’로 설정하고, 텍스트는 차례대로 더하기, 빼기, 곱하기, 나누기로 설정.

12. 스크린 하단에 레이블을 추가하고, 텍스트를 ‘=’로 설정, 너비는 ‘부모에 맞추기’, 텍스트 정렬은 ‘가운데:1’로 변경합니다.

13. 우측 상단의 블록모드로 전환

14. 좌측 블록 탭에서 버튼 1을 선택 후, ‘언제 버튼1.클릭 실행’을 드래그하여 뷰어에 추가. (버튼 2, 3, 4도 동일, 뷰어에 블록이 총 4개 추가되어야 함)

15. 좌측 블록 탭에서 공통 블록 트리에 수학을 클릭하고, +, -, *, / 블록을 추가.

(아래와 같이 뷰어에는 총 8개의 블록이 존재해야함)

16. 좌측 블록탭에서 수직배치 1 트리의 레이블 2를 선택하고, 블록 목록에서 ‘지정하기 레이블2.텍스트’를 추가. (꼭 텍스트라는 블록을 추가할 필요는 없으며, 다른 블록을 추가하여 ‘레이블2.텍스트’로 변경하여도 무방) 아래 그림과 같이 블록별로 결합함.

17) 텍스트 상자 1, 텍스트 상자 2에서 ‘텍스트_상자1.텍스트’와 ‘텍스트_상자2.텍스트’를 각각 4개씩 꺼내 아래와 같이 조립.

18) 공통 블록의 ‘제어’에서 ‘만약 그러면’ 블록을 추가 후 블록에 있는 파란색 톱니 바퀴를 클릭하여, 아래와 같이 변경.

19) 공통블록의 ‘논리’에서 ‘그리고’ 블록을 추가. 추가한 블록의 ‘그리고’를 ‘또는’으로 변경후, 공통블록의 ‘논리’에서 ‘=’ 블록을 2개, ‘텍스트’에서 “ ”을 2개 추가하여 아래와 같이 조립.

20) 레이블 2의 ‘지정하기 레이블2.텍스트 값’, 텍스트 탭의 “ ” 블록을 가져와서 아래와 같이 조립 후 텍스트 블록에 “숫자 입력”으로 변경.

21) 이후 아래와 같이 블록 수정

22) 텍스트 상자1 클릭하여 ‘호출 텍스트상자1.키보드 숨기기’, ‘호출 텍스상자2.키보드 숨기기’를 만들고 아래와 같이 조립. (버튼 전체를 누르고 Ctrl+C, Ctrl+V로 복사 가능)

23) 이후 상단의 빌드를 클릭하여 앱(.apk를 내 컴퓨터에 저장하기)를 클릭하여 .apk를 다운.

24) 안드로이드 플레이어 (Memu)를 설치하여 .apk를 로드하여 정상적으로 동작되는지 확인함.

미뮤 안드로이드 플레이어 다운 URL http://www.memukorea.com/

미뮤플레이어에서 우측에 APK 로드 버튼이 있음.