[앱인벤터 예제] 스톱워치 앱 만들기

앱인벤터를 이용해 스톱워치 앱을 만들어보도록 하겠습니다.

지금 만들 스톱워치는 '시작'버튼을 눌렀을 떼 분과 초를 재고 '기록' 버튼을 누르면 화면 아래에 목록에 시간이 기록되도록 구성했습니다. 

 

먼저 완성된 앱을 사진으로 확인해봅시다.

 

---

동작사진

 

1. 시작 버튼을 클릭해서 스톱워치를 동작시킵니다. 시작 버튼이 정지 버튼으로 바뀝니다.

2. 정지 버튼을 클릭하면 스톱워치가 멈춥니다. 정지 버튼이 시작 버튼으로 바뀝니다.

3. 다시 시작 버튼을 클릭하면 처음부터 시작하고 기록 버튼을 클릭하면 아래 목록에 시간이 기록됩니다.

 

---

화면구성

 

전체적인 화면구성입니다. 가장 위에는 수평배치 안에 레이블을 3개 넣어서 시간을 구분하며 표시하게 구성하였고, 가운데에는 버튼을 2개 넣어서 시작버튼과 기록버튼으로 구성하였습니다. 버튼 아래에는 목록뷰를 넣어서 기록한 시간을 표시할 수 있도록 합니다. 시계 기능을 추가해서 시간을 측정할 수 있도록 합니다.

 

스크린의 속성입니다.  수평정렬과 수직정렬을 가운데로 변경합니다. 배경색을 분홍으로 바꿉니다. 

초를 표시하는 부분의 수평배치 속성입니다.

첫번째 레이블 속성입니다. 분을 표시합니다. 글꼴굵게를 체크하고 글꼴크기는 50, 텍스트는 00을 입력합니다.

분과 초 사이에 ' : '를 표시할 레이블의 속성입니다. 글꼴굵게를 체크하고 글꼴크기는 50, 텍스트는 : 을 입력합니다.

초를 표시할 레이블의 속성입니다. 글꼴굵게를 체크하고 글꼴크기는 50, 텍스트는 00을 입력합니다.

시간을 표시하는 수평배치와 버튼을 포함한 수평배치 사이에 공백(여백)을 주기위해서 수평배치를 넣어줍니다. 높이를 20퍼센트로 합니다. 

2개 버튼을 정렬할 수평배치의 속성입니다. 수평정렬은 가운데, 너비는 부모 요소에 맞추기로 설정합니다. 

시작버튼의 속성입니다. 배경색은 검정, 글꼴굵게를 체크하고 글꼴크기는 20, 텍스트는 시작, 텍스트 색상은 흰색을 설정합니다. 너비는 40퍼센트입니다. 

기록버튼의 속성입니다. 배경색은 노랑, 글꼴굵게를 체크하고 글꼴크기는 20, 텍스트는 기록을 설정합니다. 너비는 40퍼센트입니다. 

기록한 시간을 보여주는 목록뷰의 속성입니다. 높이는 30퍼센트, 너비는 부모 요소에 맞추기로 설정합니다.

시간을 측정할 시계의 속성입니다. 타이머활성화여부는 체크해제하고 타이머 간격을 10으로 설정합니다.

 

---

코딩하기

디자이너 화면에서 블록 화면으로 들어갑니다. 

 

가장 먼저 시작시간, 분, 초를 저장할 변수를 만듭니다. 

시작버튼을 클릭했을 때 버튼 안의 글자가 시작이면 타이머를 활성화시키고 시작시간을 기록합니다. 분과 초 변수를 0으로 초기화합니다.  레이블1과 레이블3을 00으로 초기화하고 배경색과 글자색을 바꾸어서 정지버튼 색으로 바꾸어줍니다. 버튼안의 글자가 시작이 아니면(즉, 정지) 글자를 시작으로 바꾸고 배경색과 글자색을 바꿉니다.

 

시계의 타이머가 작동할 때(설정한시간) 현재시간에서 시작시간을 뺀 후 밀리초를 초 단위로 바꾸기 위해서 1000으로 나누어줍니다. 그리고 소수점 둘째자리까지만 표시합니다. 초가 10보다 작으면 두자리를 표시해야 하므로 앞에 0을 하나 강제로 붙여주고 60보다 작을 때는 그대로 표시하게 합니다. 초가 60보다 클때는 분이 늘어나야 하므로 분 변수의 값을 하나 늘려주고 역시 두자리가 아닐때는 강제로 앞에 0을 붙여서 표시합니다.

 

목록뷰에 시간을 기록하고 표시하기 위해서 빈리스트를 하나 만들어주고 기록버튼을 클릭할때마다 리스트에 레이블 3개의 글자를 하나로 합쳐서 저장합니다. 그리고 목록뷰의 요소를 리스트로 설정해주어 화면에 표시하도록 합니다.

 

---

확인하기

 

앱인벤터로 만든 앱을 스마트폰에 설치하기 위해 [빌드] - [앱(APK용 QR코드 제공)] 을 클릭해서 QR 코드를 만듭니다. 

 

설치할 스마트폰에서 네이버 앱을 열어 QR코드를 찍도록 합니다.

 

앱을 설치한 후 완성된 모습을 확인합니다. (완성~ :D )