4주차 : 만보기와 나침반 앱 만들기

이번주에는 Sensors(센서)와 Layout(레이아웃)의 기능을 활용할 예정이다.

#센서

14가지 센서를 제공한다
모든 센서를 다 사용할 수 있는 것이 아니다
AccelerometerSensor : 가속도 센서
Clock - 시간 관련 센서
LocationSensor : 위치 관련 센서
OrientationSensor : 방향 센서
Pedometer : 만보기 센서

#Layout

 

컴포넌트들을 배치하는 방법이다
HorizontalArrangement : 수평 배치
수평배치를 주로 사용한다

[만보기]

1. 디자인

 

스크린 구성에 대해 알아보자
* Image 1개
* Label 6개
* Button 2개
* HorizontalArrangement : 버튼 수평 정렬
* Pedometer

기본 스크린 구성할때 항상 해왔듯이
AlignHorizontal : Center
AlignVertical : Center 으로 설정해준다.

mage 파일은 iconfinder 사이트를 참조하여 가져왔다.
만보기에 출력되어야 할 기본 Label들, 걸음수와 거리, 칼로리를 작성해주고
Label1과 Label2는 화면 구성을 위한 간격을 조절하기 위해 추가하였다.

수평정렬 레이아웃 안에 2개의 버튼을 넣고 
각각 Reset버튼과 Exit버튼의 Width를 30percent로 설정하여 간격을 일정하게 맞춰주었다.
lblbetween은 수평정렬 레이아웃 안에 버튼 사이의 간격조절을 위해 추가하였고,
Width를 20percent로 설정해주었다.

 

2. 블럭 코딩

프로그램이 시작되면 Pedometer센서를 Start한다.

Pedometer 센서가 걸음을 감지하면 걸음수와 거리값을 받아서 화면에 출력한다.
이때 거리는 format as decimal number places를 사용해 소수점 아래 1자리 까지만 출력한다.

센서가 칼로리까지 제공하지 않기 때문에 계산식을 사용해 칼로리를 계산한다.
1시간에 5km씩 걷는다고 가정하여 계산식을 대입했다.
CB : 4.0877 x 체중(kg) x 시간

Reset버튼이 클릭되면 각 Label들의 값을 초기화 해준다.

Exit버튼이 클릭되면 어플리케이션을 종료한다.

최종 코딩

최종 블록 코딩이다.

[나침반]

 

스크린 구성에 대해 알아보자
우선 나침반은 내 위치(핸드폰이면 핸드폰의 위치나 각도)에 따라 방위각 등 값이 변해지므로
움직이는 이미지가 필요하다.
그래서 이번에 사용한 것이 이미지 스프라이트(ImageSprite)이다.
이미지 스프라이트와 만보기에서 사용했던 이미지의 차이점은 동적차이이다.
움직일 수 있고 없고의 차이이다.
이 이미지스프라이트는 꼭 Canvas 위에 위치하여야 한다.

다시 화면 구성으로 돌아가서, 
AlignHorizontal : Center
AlignVertical : Center으로 설정한다.

그 후, 아래에 수평정렬 레이아웃을 하나 추가해서 3개의 Label을 추가했다.
각각 Azimuth, Pitch, Roll을 출력해 줄 용도이다.
*Azimuth : 방위각 - 북쪽을 기준으로 시계방향으로 스마트폰이 가르치는 각도
*Pitch : 피치 - 스마트폰이 위아래 방향으로 기울어진 각도
*Roll : 롤 - 스마트폰이 좌우 옆 방향으로 기울어진 각도

2. 블럭코딩

ImageSprite 즉 Compass의 위치 - 이미지의 왼쪽 상단 끝이 기준
- Compass.X = canvas.Width/2 - Compass.Width/2
- Compass.Y = canvas.Height/2 - Compass.Height/2

위치가 변할때마다 compass Heading을 바꿔주고, 
각 Label에 방위각, 피치, 롤을 소수점 아래 1자리까지 숫자로 출력한다