앱인벤터 시간 표시 - 시계앱만들기

앱인벤터 시간 표시 - 시계 앱만들기

이번에는 간단하게 시간이 계속 출력되는 간단한 시계앱 예제를 만들어 보겠습니다.

시간 관련 컴퍼넌트는 Clock 이라는 컴포넌트를 사용합니다. Clock 컴퍼넌트는 시간을 알려주거나 타이머가 필요할때 사용하는 컴퍼넌트입니다.

시간 표시 앱 디자인하기

먼저 새 프로젝트를 실행 시킨 다음 Label을 컴퍼넌트를 오른쪽 화면에 옮겨 놓습니다.

이번에는 Sensors에 들어 있는 Clock 컴퍼넌트를 화면에 옮겨 놓으면 아래 하단에 보이지 않는 컴퍼넌트로 이동을 합니다.

Label 위치를 가운데로 변경하려면 스크린을 선택을 한 다음

AlignHorizontal 속성을 Center:3 으로 변경합니다. 그러면 라벨 위치가 가운데로 이동합니다.

시계 앱 코딩하기

시계는 앱이 보여지면서 부터 계속해서 동작을 해야하기 때문에 계속 반복되는 블럭을 사용해야 합니다.  Clock1 컴퍼넌트를 클릭하고 오른쪽에 나오는 2번 블럭을 선택합니다.

시간이 돌아가는 동안 그 시간 표시를 Lablel에 표시를 할 것인데요. label을 선택한 다음 해당 블럭을 선택합니다.

라벨에 표시한 시간은 현재 시간을 표시할 것인데요. Clock1 컴퍼넌트를 클릭하여 아래 그림처럼 1번 블러과 2번 블럭을 가져와 결합시켜줍니다. 

뜻을 해석하자면 Clock 컴퍼넌트에서 시간 형식의 포멧 형태를 가져오라는 뜻이 됩니다.

이제 마지막으로 그 가져온 형식을 lablel 에 넣어주면 시간이 표시됩니다. 아래 최종 코드가 됩니다.

이제 앱을 빌드시켜서 확인해 보면 아래와 같이 시간이 나온는 것을 볼 수 있을 것입니다.

앱인벤터로 시간 표시하는 간단한 시계앱을 만들어 보았습니다. 생각보다 간단하게 만들 수 있어서 좋아보이는데요. 이걸 응용해서 스톱워치를 만들어 보려고 하는데 잘 안되네요 ^^

다음에 또 뵙겠습니다. ^^ 공감은 로그인 필요가 없는거 아시지요? ^^ 이상으로 마치겠습니다.