[안드로이드] 축복 터지는 타이머(Timer) 만들기 Sound Pool ,seekBar, CountDownTimer,Lottie Animation

안녕하세요 오늘은 저번에 공부했던 Lottie 애니메이션을 이용해서 정각이 되면 축복이 터지는 타이머를 만들어봤습니다 

요번 타이머는 seekBar,CountDownTimer , Lottie Animation 을 이용하고 매 초 간격마다 틱틱 소리와 정각이 되면 축복과 함께 알림음이 나오도록 Sound Pool 을 이용해봤습니다 ! 

해당 프로젝트에 사용한 소스파일과 mp4 파일 , 애니메이션 파일은 제 깃헙을 참고해주세요 ! 

 

 activity_main.xml 부터 먼저 보겠습니다

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
<com.airbnb.lottie.LottieAnimationView
    android:layout_width="0dp"
    android:layout_height="200dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:lottie_rawRes="@raw/fireworksicon"
    android:id="@+id/lottie_view"
    app:layout_constraintTop_toTopOf="parent"/>
    <TextView
        android:id="@+id/remainMinutesTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="00"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/remainSecondeTextView"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/remainSecondeTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="00"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="@id/remainMinutesTextView"
        app:layout_constraintLeft_toRightOf="@id/remainMinutesTextView"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/remainMinutesTextView" />

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="60"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/remainMinutesTextView" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

하단에 SeekBar을 만들어서 자신이 원하는 만큼 타이머를 설정할 수 있게 했고 그 위에 TextView 2개를 통해 분과 초를 나타냅니다! 

 

MainActivity,kt 부분은 너무 길어서  중요한 부분만 보여드리고 전체 코드는 깃헙에서 확인해주세요

 

private fun bindViews(){
        seekbar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(p0: SeekBar?, p1: Int, fromUser: Boolean) {
                if(fromUser){
                    updateRemainTime(p1*60*1000L)
                }
            }

            override fun onStartTrackingTouch(p0: SeekBar?) {
                countDownTimer?.cancel()
                countDownTimer =null
            }

            override fun onStopTrackingTouch(p0: SeekBar?) {
                seekbar ?: return

                startCountDown()
            }

        })
    }

 

seekbar.setOnSeekBarChangeListener 는 아래에 바를 움직여서 원하는 타이머를 설정하는 부분입니다

onProgressChanged 부분은 바를 움직여질때 호출되는 부분이고 (1초씩 줄어들면 seekbar도 줄어드는대 그때마다 실행되는 메소드)

onStartTrackingTouch 는 터치가 시작하는 부분입니다 

또 onStopTrackingTouch 는 화면에서 손을 땔때 호출되는 부분이고  startCountDown ()은 타이머가 시작하는 메소드 입니다!

updateRemainTime 은 1초씩 seekBar 가 줄어드는 메소드 입니다 

private fun createCountDownTimer(initialMililis : Long) =
         object : CountDownTimer(initialMililis,1000L){
            override fun onFinish() {
                completeCountDown()
                showTime()
            }

            override fun onTick(p0: Long) {
                updateRemainTime(p0)
                updateSeekBar(p0)
            }

        }

CountDownTimer 클래스는 추상클래스 입니다 그래서 위 의 코드처럼 미리 정의해야 사용할 수 있습니다 

 

onFinish() 는 말 그대로 카운트다운이 끝났을때 실행하는 메소드 이고 

onTick() 은 1초간격으로 실행되는 메소드 입니다 

 

   private fun initSounds(){
        tickingSoundId = soundPool.load(this,R.raw.timer_ticking,1)
        bellSoundId = soundPool.load(this,R.raw.timer_bell,1)
    }

initSounds() 메소드는 사운드 풀을 시작하기 위한 준비과정 입니다 

사운드 풀에 원하는 mp4파일을 로드 하면 해당 아이디 값을 반환합니다

 private fun startCountDown(){
        countDownTimer = createCountDownTimer(seekbar.progress*60*1000L)
        countDownTimer?.start()

        tickingSoundId?.let { soundPool.play(it,1F,1F,0,-1,1F) }
    }

카운트 다운이 시작되는 메소드 입니다 앞서 코드중에 onStopTrackingTouch(p0: SeekBar?) 부분에서 실행되는 메소드로 

seekbar로 맞춘 시간에 맞춰 타이머가 작동합니다 이때 seekbar.progress*60*1000L 은 default 가 밀리세컨입니다

그래서 이 타이머는 최대 60분을 타이머를 맞추어야 하므로 60분을 밀리세컨으로 계산한 부분입니다

 

그리고 trickingSoundId?.let 부분은 카운트 다운이 시작되고 초 간격으로 틱틱 소리가 나는 사운드풀을 실행하는 부분입니다 

앞서 받은 tickingSoundId 부분을 이용해서 필요한 mp4파일을 실행할 수 있습니다 

 

자세한 소스코드는 아래의 깃헙에 가서 다운받아주세요 감사합니다 아마 제 설명 보다 코드를 보시는 것이 더 이해가 더 쉽습니다 ㅠㅠ

혹시 궁금한 내용은 댓글 달아주세요

github.com/jaeilssss/PomodoroTimer

jaeilssss/PomodoroTimer