이번에는 clock 컴포넌트를 이용하여 시계를 만들어보려고 한다,
앞서서 말하면, 이번에 만드는 디지털 시계 앱은 이 바로 다음 게시글에도 같은 개념을 사용할 것이기 때문에
집중해서 공부해 보도록 하자.
1. 아이디어
clock 컴포넌트를 이용하여 화면에 날짜와 시간을 표시하여준다.
2. 디자인
사용되는 컴포넌트들은 다음과 같다.
■ 날짜를 표시해주는 Label
■ 시간을 표시해주는 Label
■ clock 컴포넌트
처음으로 휴대폰을 가로로 두었을 때를 기준으로 출력하고 싶기 때문에 설정을 만져 주도록 하겠다.
가로 출력을 디폴트로 만드려면 Screen Properties의 ScreenOrientation을 Landscape로 지정해 주면 된다.
이제 날짜와 시간을 표시해줄 Label을 넣어 주도록하자.
시간을 표시하는 Label의 경우 Fontsize를 70으로 해주면 예쁘게 나온다.
또한 필자는 배경을 dark-gray로 지정해 주었기 때문에 글자가 잘 보이지 않음으로 글자색도 white로 변경해 주었다.
그리고 screen에서 잊지말고 AlignHorizontal와 AlignVertical도 center로 변경해주자.
기본적인 디자인이 완성되었다.
추가로 컴포넌트들의 이름과 스크인의 title을 변경해주도록하자.
마지막으로 sensor에서 clock을 넣어 주도록하자.
추가로 TimerInterval이라는 속성이 존재한다. 이는 밀리초 기준으로 얼마 주기로 틱을 쏴주는 지에 대한 설정값이다.
우리는 1초에 한번씩 틱을 받아야하므로 디폴트값이 1000에서 건들지 않겠다.
디자인이 완료되었다.
3. 코딩
지금까지는 화면이 이니셜라이즈되면 프로그램이 시작되었으나 이번에는 다르다.
이번에는 clock 컴포넌트를 사용하기 때문에 clock이 타이머를 시작하면 우리가 만든 코드들이 실행될 것이다.
clock이 타이머를 시작하면, 초 별로 Label들이 refresh되어야한다.
Label의 set.text 블록을 사용하여 시간을 바꿔주려면 다음과 같이 하면 된다.
보라색으로 보이는 블럭들은 모두 clock에서 파생된 블록이니 찾아서 사용해보도록 하자.
추가로 Date를 업데이트 해주는 코드블럭에서 Pattern이라는 항복이 존재하는데 위를 예시로 들면
월, 일, 년도 순으로 나타내 주겠다는 뜻이다. 한국식으로 표현하고 싶다면 'yyyy년 MM월, dd일'로 변경해주면된다.
(M의 경우는 월을, m의 경우는 분을 나타낸다. 대소문자의 차이가 있으니 주의!)
바로 위 코드를 when clock1.Timer 안에 넣어 주면 코딩도 끝나게 된다.
4. 테스트
테스트 결과 아주 잘 작동한다.
늦은 밤에 포스팅을 하려니 힘들다... 역시 할 일은 미루지 말고 바로해야되는 법이다.
잘못된 정보나 오류, 오타, 독자 입장에서의 수정사항 및 피드백 환영합니다.
E-mail : jhmh0226@gmail.com
'Project > App Inventer' 카테고리의 다른 글
| A07. 여행앱 만들기(with ActivityStarter) (0) | 2021.04.15 |
|---|---|
| A06-2. 두더지 잡기 (0) | 2021.04.12 |
| A05. 구구단 게임(TTS, Procedure, 랜덤과 게임) (0) | 2021.04.02 |
| A04-2. 나침반 (0) | 2021.03.29 |
| A04-1. 만보기(with Pedometer Senor) (0) | 2021.03.29 |