Pomodoro Timer 앱 개발하기

Side Projects - Pomodoro Timer
0~60분 사이의 타이머를 설정하고 종료되면 알람이 울리는 기본적인 타이머를 구현한 프로젝트

• GitHub Repository -> https://github.com/hwayeon351/Pomodoro-Timer

GitHub - hwayeon351/Pomodoro-Timer

 

---

학습 회고

오늘은 새로운 프로젝트인 뽀모도로 타이머 앱을 시작해서 레이아웃을 만들고 뷰 바인딩을 하였다.

또한, SeekBar를 이용해서 드래그 앤 드롭을 통해 시간을 설정하고 1초씩 시간이 줄어드는 것을 UI에 표현했다.

---

오늘 공부한 내용

• ConstraintLayout - Chain

ConstraintLayout을 사용하면 복잡한 레이아웃을 만들기 좋다.

View의 위치를 정의하기 위해서는 View의 가로나 세로의 제약조건을 각각 하나 이상 추가해야 한다.

각 제약조건은 다른 VIew나 상위 레이아웃을 기준으로 정렬이나 연결을 나타낸다.

 

Chain은 제약조건을 통해 양방향으로 서로 연결된 보기 그룹이다.

Horizontal chain

Chain은 다음과 같이 4가지 스타일이 있다.

1. Spread: View들이 Margin을 처리한 후, 균등하게 분산된다. Chain Style의 default는 Spread이다.

2. Spread Inside: 첫번째와 마지막 View는 양쪽 끝에 있는 제약조건에 고정되고 나머지 View들은 균등하게 분산된다.

3. Weighted: Chain이 Spread나 Spread Inside로 설정되면 제약조건에 View를 일치시키고 나머지 공간을 채울 수 있다.(0dp)

기본적으로 남은 공간은 각 View들 사이에 균등하게 분배되지만, layout_constraintHorizontal_weight나 layout_constraintVerticalweight 속성을 사용해서 가중치를 할당 할 수 있다.

이 방식은 LinearLayout의 layout_weight가 작동하는 방식과 동일하다. 즉, 가중치를 가장 높게 설정한 View에 가장 많은 공간이 지정되고, 가중치가 동일한 View들은 동일한 크기의 공간이 지정된다.

4. Packed: View들이 서로 딱붙어 배치된다.(Margin을 제외하고) Chain의 bias를 이용해서 상하좌우로 조정할 수 있다.

타이머의 잔여 시간을 분과 초로 나타내기 위해서 Horizontal Chain으로 TextView 두 개를 정렬했다.

그리고 두 Text뷰를 딱 붙여서 좌우로 나머지 공간을 균등하게 배분하기 위해서 constraint_Horizontal_chainStyle 속성을 packed로 지정하였다.

 

https://developer.android.com/training/constraint-layout?hl=ko 

ConstraintLayout으로 반응형 UI 빌드  |  Android 개발자  |  Android Developers

 

 

• SeekBar

SeekBar는 ProgressBar를 확장한 객체로 draggable thumb을 넣어 유저가 thumb을 터치해 좌우로 드래그해서 progress level을 선택할 수 있다. SeekBar에 OnseekBarChangeListener을 이용해서 유저의 액션을 알 수 있다.

Seekbar.OnSeekBarChangeListner를 사용하기 위해서 onProgressChanged(), onStartTrackingTouch(), onStopTrackingTouch() 세가지 추상 메서드를 오버라이딩 해줘야 한다.

 

1. onProgressChanged(): progress level이 변할 때 시스템에서 알려준다. 이때, fromUser 매개변수를 통해서 유저의 제스처에 의해 Seekbar의 progress level이 변화하였는지(true) 아니면 코드에 의해서 변화된 것인지(false)를 알 수 있다.

따라서, 유저의 제스처에 의해 타이머의 progress level이 변화함에 따라 TextView의 분과 초를 변화시키는 updateRemainTime 함수를 실행시킨다.

 

2. onStartTrackingTouch(): 유저가 Seekbar에 터치 제스처를 시작할 때 시스템에서 알려준다.

유저가 타이머를 조정하기 시작할 때, 작동되고 있는 타이머가 있다면 취조해준다.

 

3. onStopTrackingTouch(): 유저가 터치 제스처를 끝냈을 때 시스템에서 알려준다.

유저가 타이머 조정을 완료하여 타이머를 실행시킬 때, 타이머를 가동시킨다.

 

https://developer.android.com/reference/android/widget/SeekBar.OnSeekBarChangeListener

SeekBar.OnSeekBarChangeListener  |  Android Developers

 

 

• CountDownTimer

CountDownTimer 클래스를 이용해서 카운트 다운 시간을 예약하고 도중에 계속해서 알림을 받을 수 있다.

CountDownTimer를 이용해서 실제 타이머를 가동시킬 수 있다.

타이머 기능을 구현하기 위해서는 1초가 흐름에 따라 Seekbar의 progress level을 한 칸씩 줄이고, TextView에 남은 시간을 줄여야 한다. 이를 위해 CountDownTimer를 사용한다.

CountDownTimer 생성자에 millisInFuture과 countDownInterval 매개변수를 설정한다.

millisInFuture는 CountDownTimer.start()를 호출할 때 부터 얼마나 후에 카운트 다운을 끝낼 것인지를(onFinished() 콜백을 받을지) 설정한다. 단위는 ms로 long 타입으로 지정한다.

countDownInterval은 CountDownTimer의 onTick() 콜백 메서드를 받을 시간 간격을 얼마나로 할 것인지를 설정한다. 단위는 ms로 long 타입으로 지정한다.

뽀모도로 타이머 앱에서는 사용자가 SeekBar를 이용해 지정한 시간동안 CountDownTimer가 작동하도록 millisInFuture을 설정하고, 1초에 한 번씩 UI 변화를 주기 위해 countDownInterval을 1000으로 설정했다.

그리고 매 1초마다 UI 변화를 주는 작업을 onTick() 콜백 메서드에 넣어주었다.

onFinish() 콜백 메서드가 호출되면 Seekbar의 progress level을 0으로 만들어주고 TextView에도 00분 00초로 셋팅하도록 하였다.