Frontend/실습

안드로이드 앱 : 타이머 앱 실습

qoeka 2025. 2. 28. 15:13

 

 

  • 왼쪽 화면에서는 ImageView의 ID를 imgClock으로 설정하고, 시계 이미지를 추가한다.
  • 오른쪽 화면에서는 TextView의 ID를 textTime으로 설정하고, 시계 이미지(imgClock)와 버튼(button)을 Constraint Layout으로 연결한다.

 

 

 

 

  • 버튼 ID 설정 (왼쪽 화면)
    btnStop ID를 가진 버튼을 설정한다. 버튼의 레이아웃 크기와 제약 조건을 설정하고, 버튼 텍스트를 "정지"로 설정한다.
  • 시간 입력 필드 설정 (가운데 화면)
    editTime ID를 가진 TextView를 설정한다. 시간 입력을 받을 수 있도록 hint와 textSize를 설정하고, 버튼과 시계 이미지 사이에 위치시킨다.
  • 시작 버튼 설정 (오른쪽 화면)
    btnStart ID를 가진 버튼을 설정한다. 빨간색으로 스타일링하고, 버튼의 크기와 위치를 제약 조건을 통해 조정한다.

 

 

 

뷰 초기화
ImageView, TextView, EditText, Button 요소들을 findViewById를 통해 연결한다.

 

 

사용자 입력 값 가져오기
EditText에서 입력된 시간을 받아와 빈 값이면 Toast 메시지 출력.

 

입력값을 정수형으로 변환 및 타이머 설정
밀리초 단위로 변환 후 CountDownTimer 시작.

 

  • "Implement methods"를 선택하여 onTick(long millisUntilFinished)와 onFinish() 메서드를 자동 생성한다.
  • 또는 "Split into declaration and assignment"를 선택해 변수 선언과 초기화를 분리한 후, 필요한 메서드를 수동으로 구현한다.

 

onTick(long millisUntilFinished)
1초마다 호출되며, 남은 시간을 화면에 표시하는 코드를 작성할 수 있다.

 

onFinish()
타이머가 종료되었을 때 호출되며, 알람 소리를 내거나 시계 애니메이션을 추가할 수 있다.

 

온이 유저와 관련될때인것이다

 

 

문자열 변환을 통한 텍스트 설정
+ ""를 사용해 millisUntilFinished 값을 문자열로 변환하여 setText에 전달한다.

 

String.valueOf()를 사용하면 명시적으로 형 변환을 할 수 있어 가독성이 좋아진다.
millisUntilFinished / 1000으로 밀리초를 초 단위로 변환할 수 있다.

 

 

 

 

 

 

  • YoYo 애니메이션 라이브러리를 사용하기 위해 추가한다.
  • @aar는 Android Archive 파일 형식으로, 리소스와 코드가 포함된 패키지다.

 

알람 소리 재생:
MediaPlayer를 사용해 R.raw.alarm 파일을 재생한다.

시계 애니메이션:
YoYo 라이브러리를 사용하여 시계(imgClock)를 흔들리는 애니메이션으로 설정한다.
 
  • MediaPlayer의 리소스 해제를 위해 타이머 종료 시 mediaPlayer.release()를 사용하는 것이 좋다.
  • YoYo 애니메이션은 duration과 repeat을 통해 흔들림의 속도와 반복 횟수를 조정할 수 있다.

 

 

 

 

  • CountDownTimer를 전역 변수로 선언하여 시작 및 취소 시 접근 가능하도록 한다.
  • 입력된 시간을 초 단위로 변환 후 CountDownTimer를 생성하고 시작한다.
  • onTick에서 남은 시간을 표시하고, onFinish에서 알람과 애니메이션을 처리한다.

 

화면 구현 (우측 이미지)

  • 시작 버튼을 눌러 타이머가 동작하면 남은 시간이 표시된다.
  • 정지 버튼을 누르면 타이머가 멈춘다.

 

 

타이머 시작 시 초기화 설정:

  • 새로운 타이머를 시작하기 전에 기존 타이머를 초기화하여 중복 실행을 방지할 수 있다.

 

  • 타이머를 중지하거나 초기화하는 버튼(초기화 버튼)을 활용하면 사용자가 타이머 상태를 쉽게 제어할 수 있다.
  • countDownTimer.cancel()을 사용하면 onFinish()가 호출되지 않으므로, 타이머 종료 시 수행할 동작이 필요하면 추가 구현이 필요하다.

 

 

방법2

 

 

 

 

이제 시작을 다시 눌러도 이상하게 다시 동작되지 않는다

 

 

이제 다시 시작 누르면 다시 실행할 수 있다

 

 

이걸써주면 다시 시작버튼을 누를 수 있게 된다

 

이제 마지막에 한 시간초를 저장해서 다음에도 보여줄 수 있게하겠다.