코틀린 안드로이드 앱개발 강좌, 시계 앱의 스톱워치 기능 만들기

안드로이드 개발에서 시계 앱을 만들면서 스톱워치 기능을 구현하는 것은 매우 유용한 연습입니다. 이 글에서는 Kotlin을 사용하여 스톱워치 기능을 만드는 방법을 자세히 설명할 것입니다. 우리는 전체적인 앱 구조를 설정하고, 스톱워치의 UI를 디자인하며, 스톱워치의 기본 동작을 구현할 것입니다.

1. 프로젝트 설정

Android Studio를 열고 새로운 프로젝트를 생성합니다. 프로젝트의 이름은 “StopwatchApp”으로 설정하고, 언어는 Kotlin을 선택합니다. Minimum SDK는 API 21 (Lollipop) 이상으로 설정합니다.

1.1. Gradle 종속성 추가

스톱워치의 UI 요소들을 구현하기 위해 특별한 라이브러리가 필요하지 않지만, ViewModelLiveData를 사용하여 UI 상태를 관리할 것입니다. 따라서, 다음과 같은 종속성을 build.gradle 파일에 추가합니다.

implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.0"
implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.4.0"

2. UI 설계

스톱워치의 UI는 기본적으로 TextViewButton으로 구성됩니다. activity_main.xml 파일을 열고 다음과 같이 UI를 설계합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:id="@+id/tvStopwatch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="48sp"
        android:text="00:00:00"
        android:layout_marginBottom="20dp"/>

    <Button
        android:id="@+id/btnStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="시작"/>

    <Button
        android:id="@+id/btnStop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="정지"/>

    <Button
        android:id="@+id/btnReset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="리셋"/>

</LinearLayout>

3. 로직 구현

MainActivity.kt 파일을 열고 스톱워치의 로직을 구현합니다. 우리는 CountDownTimer를 활용하여 스톱워치의 시간을 카운트할 것입니다.

3.1. ViewModel 생성

스톱워치의 상태를 관리하기 위해 ViewModel 클래스를 생성합니다. 이를 통해 UI 관련 데이터를 저장할 수 있습니다.

class StopwatchViewModel : ViewModel() {
    private var timer: CountDownTimer? = null
    private var time = 0L
    private val _formattedTime = MutableLiveData()

    val formattedTime: LiveData get() = _formattedTime

    private fun updateTime() {
        val hours = (time / 3600000) % 24
        val minutes = (time / 60000) % 60
        val seconds = (time / 1000) % 60
        _formattedTime.value = String.format("%02d:%02d:%02d", hours, minutes, seconds)
    }

    fun start() {
        timer = object : CountDownTimer(Long.MAX_VALUE, 1000) {
            override fun onTick(millisUntilFinished: Long) {
                time += 1000
                updateTime()
            }

            override fun onFinish() {}
        }.start()
    }

    fun stop() {
        timer?.cancel()
    }

    fun reset() {
        stop()
        time = 0
        updateTime()
    }
}

3.2. MainActivity 구현

이제 MainActivity.kt 파일에서 ViewModel을 사용하여 버튼 클릭 이벤트를 처리합니다.

class MainActivity : AppCompatActivity() {
    private lateinit var viewModel: StopwatchViewModel
    private lateinit var tvStopwatch: TextView
    private lateinit var btnStart: Button
    private lateinit var btnStop: Button
    private lateinit var btnReset: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewModel = ViewModelProvider(this).get(StopwatchViewModel::class.java)
        tvStopwatch = findViewById(R.id.tvStopwatch)
        btnStart = findViewById(R.id.btnStart)
        btnStop = findViewById(R.id.btnStop)
        btnReset = findViewById(R.id.btnReset)

        viewModel.formattedTime.observe(this, { time ->
            tvStopwatch.text = time
        })

        btnStart.setOnClickListener {
            viewModel.start()
        }

        btnStop.setOnClickListener {
            viewModel.stop()
        }

        btnReset.setOnClickListener {
            viewModel.reset()
        }
    }
}

4. 앱 실행 및 테스트

이제 앱을 실행하고 스톱워치 기능을 테스트해봅시다. 시작 버튼을 누르면 스톱워치가 시작되고, 정지 버튼으로 시간을 멈출 수 있으며, 리셋 버튼으로 시간을 초기화할 수 있습니다.

5. 개선 사항

기본 스톱워치 기능이 구현되었지만, 추가적으로 다음과 같은 기능들을 개선하여 구현할 수 있습니다:

  • 일시 정지(Pause) 기능 추가
  • 시간 기록 기능 (Lap) 추가
  • UI 개선 및 애니메이션 적용

6. 결론

이 글에서는 Kotlin을 사용하여 간단한 스톱워치 기능을 가진 안드로이드 앱을 만드는 방법에 대해 설명했습니다. 이러한 기초적인 앱을 통해 Kotlin과 Android의 기본적인 개념을 익힐 수 있을 것입니다. 차후 더 복잡한 앱을 만들기 위한 기초를 다지는데 큰 도움이 될 것입니다.

이제 각 기능을 더 발전시켜 나가며 여러분의 안드로이드 앱 개발 능력을 한 단계 향상시켜 보시기 바랍니다!