[Android] 간단한 스톱워치 앱 만들기 : Thread

 

 

 

 

Thread를 복습하기 위한 간단한 스톱워치 프로젝트를 제작했다. (Joyce 서적 예시)

• 메인 스레드
  - 앱이 처음 시작될 때 생성되는 스레드
  - 액티비티의 모든 생명 주기 관련 콜백 실행을 담당
  - 버튼, 에딧텍스트와 같은 UI 위젯을 사용한 사용자 이벤트와 UI 드로잉 이벤트 담당
  - Handler 클래스, AsyncTask 클래스, runOnUiThread() 메서드 등 활용
• 백그라운드 스레드
  - 작업량이 큰 연산, 데이터베이스 쿼리, 네트워크 통신 등
  - 절대로 UI관련 연산을 백그라운드 스레드에서 하면 안 됨
  (각 백그라운드 스레드가 언제 처리를 끝내고 UI에 접근할 지 알 수 없음)
• 구글에서는 앱 개발 당시의 최신 API를 타겟 API로 작성할 것을 권고하고 있음 (보안, 성능 등)
• 시분초 정렬 시 Baseline을 이용한 Constraint Layout 정렬

 

💡 timer(period = ){}

private fun start() { // 스톱워치 측정 시작
        binding.btnStart.text = "일시정지"
        binding.btnStart.setBackgroundColor(getColor(R.color.red))
        isRunning = true // 실행 상태 변경

        timer = timer(period = 10){ // 스톱워치 시작 로직
            time++  // 10밀리초 단위 타이머

            val millisecond = time % 100
            val second = (time % 6000) / 100
            val minute = time / 6000

            binding.tvMillisecond.text =
                if (millisecond < 10) ".0${millisecond}" else ".${millisecond}"
            binding.tvSecond.text =
                if (second < 10) ":0${second}" else ".${second}"
            binding.tvMinute.text = "${minute}"
        }
    }

• 코틀린에서 제공하는 timer(period = [주기]) {} 함수는 일정한 주기로 반복하는 동작을 수행할 때 유용하게 쓰임
• {} 안에 쓰인 코드들은 모두 백그라운드 스레드에서 실행
• 주기를 나타내는 period 변수를 10으로 지정했으므로 10밀리초마다 실행
• 0.01초마다 time에 1을 더하는 것은 주기가 10밀리초이기 때문
• 뷰의 계층 구조를 생성한 메인 스레드에서만 그 뷰들에 접근할 수 있음 
  -> 백그라운드 스레드에서 UI작업을 하는 이 코드의 경우 오류가 뜸
• 따라서 아래와 같이 수정

 

💡 runOnUiThread

    private fun start() { // 스톱워치 측정 시작
        binding.btnStart.text = "일시정지"
        binding.btnStart.setBackgroundColor(getColor(R.color.red))
        isRunning = true // 실행 상태 변경

        timer = timer(period = 10) { // 스톱워치 시작 로직
            time++  // 10밀리초 단위 타이머

            val millisecond = time % 100
            val second = (time % 6000) / 100
            val minute = time / 6000

            runOnUiThread {  // UI 스레드 생성
                if (isRunning) // UI 업데이트 조건 설정
                binding.tvMillisecond.text =
                    if (millisecond < 10) ".0${millisecond}" else ".${millisecond}"
                binding.tvSecond.text =
                    if (second < 10) ":0${second}" else ".${second}"
                binding.tvMinute.text = "${minute}"
            }
        }
    }

• runonUiThread로 UI 스레드를 생성해주고, 그 안에 텍스트뷰를 설정했던 코드를 다 넣어주면 정상 작동
• isRunning이 true일 때만 UI가 업데이트 되어야 함
  -> 사용자가 타이머를 정지하는 시점과 UI스레드에서 코드가 실행되는 시점이 다를 수 있기 때문

 

💡 최종 결과 및 코드

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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv_minute"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:textSize="45sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_second"
        app:layout_constraintEnd_toStartOf="@+id/tv_second"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=":00"
        android:textSize="45sp"
        app:layout_constraintBottom_toTopOf="@+id/btn_refresh"
        app:layout_constraintEnd_toStartOf="@+id/tv_millisecond"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/tv_minute"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_millisecond"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=".00"
        android:textSize="30sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_second"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/tv_second" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn_refresh"
        android:layout_width="100dp"
        android:layout_height="70dp"
        android:layout_marginBottom="50dp"
        android:background="@color/yellow"
        android:padding="20dp"
        android:text="@string/refresh"
        android:textColor="@color/white"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/btn_start"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn_start"
        android:layout_width="100dp"
        android:layout_height="70dp"
        android:layout_marginBottom="80dp"
        android:background="@color/blue"
        android:padding="20dp"
        android:text="@string/start"
        android:textColor="@color/white"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

MainActivity.kt

package com.limheejin.stopwatch

import android.os.Bundle
import android.view.View
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import com.limheejin.stopwatch.databinding.ActivityMainBinding
import java.util.Timer
import kotlin.concurrent.timer

class MainActivity : AppCompatActivity(), View.OnClickListener { // 클릭 이벤트 처리 인터페이스

    private var isRunning = false // 실행 여부 확인용 변수
    private var timer: Timer? = null // timer 변수 추가
    private var time = 0 // time 변수 추가

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        enableEdgeToEdge()
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        initViews()
        setupListeners()

    }

    private fun initViews() {
        binding.btnStart.text = getString(R.string.start)
        binding.btnStart.setBackgroundColor(ContextCompat.getColor(this, R.color.blue))
        binding.tvMillisecond.text = ".00"
        binding.tvSecond.text = ":00"
        binding.tvMinute.text = "0"
    }

    private fun setupListeners() {
        binding.btnStart.setOnClickListener(this)
        binding.btnRefresh.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when (v?.id) {
            R.id.btn_start -> {
                if (isRunning) {
                    pause()
                } else {
                    start()
                }
            }

            R.id.btn_refresh -> {
                refresh()
            }
        }
    }

    private fun start() { // 스톱워치 측정 시작
        binding.btnStart.text = getString(R.string.pause)
        binding.btnStart.setBackgroundColor(getColor(R.color.red))
        isRunning = true // 실행 상태 변경

        timer = timer(period = 10) { // 스톱워치 시작 로직
            time++  // 10밀리초 단위 타이머

            val millisecond = time % 100
            val second = (time % 6000) / 100
            val minute = time / 6000

            runOnUiThread {  // UI 스레드 생성
                if (isRunning) // UI 업데이트 조건 설정
                binding.tvMillisecond.text = ".${millisecond.toString().padStart(2, '0')}"
                binding.tvSecond.text = ":${second.toString().padStart(2, '0')}"
                binding.tvMinute.text = minute.toString()
            }
        }
    }

    private fun pause() { // 스톱워치 일시정지
        isRunning = false // 멈춤으로 전환
        timer?.cancel() // 타이머 멈추기 - cancel()함수는 백그라운드 스레드에 있는 큐를 깔끔하게 비움
        binding.btnStart.text = getString(R.string.start)
        binding.btnStart.setBackgroundColor(getColor(R.color.blue))
    }

    private fun refresh() { // 스톱워치 초기화
        timer?.cancel() // 백그라운드 타이머 멈추기
        isRunning = false
        initViews()
        time = 0 // 타이머 초기화
    }

//    override fun onDestroy() {
//        super.onDestroy()
//        timer?.cancel()
//    }

}

 

MainAcitivty.kt -> timer(period)를 이용한 것이 아닌 Thread 클래스를 이용하여 명시적 구현

class MainActivity : AppCompatActivity(), View.OnClickListener {

    private var isRunning = false
    private var time = 0

    private lateinit var binding: ActivityMainBinding
    private var timerThread: Thread? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        enableEdgeToEdge()
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        initViews()
        setupListeners()
    }

    private fun initViews() {
        // 초기화 코드는 동일하게 유지
    }

    private fun setupListeners() {
        binding.btnStart.setOnClickListener(this)
        binding.btnRefresh.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when (v?.id) {
            R.id.btn_start -> {
                if (isRunning) {
                    pause()
                } else {
                    start()
                }
            }
            R.id.btn_refresh -> {
                refresh()
            }
        }
    }

    private fun start() {
        binding.btnStart.text = getString(R.string.pause)
        binding.btnStart.setBackgroundColor(getColor(R.color.red))
        isRunning = true

        timerThread = Thread {
            while (isRunning) {
                try {
                    Thread.sleep(10) // 10밀리초마다 작업 수행
                    time++

                    val millisecond = time % 100
                    val second = (time % 6000) / 100
                    val minute = time / 6000

                    runOnUiThread {
                        binding.tvMillisecond.text = ".${millisecond.toString().padStart(2, '0')}"
                        binding.tvSecond.text = ":${second.toString().padStart(2, '0')}"
                        binding.tvMinute.text = minute.toString()
                    }
                } catch (e: InterruptedException) {
                    e.printStackTrace()
                }
            }
        }
        timerThread?.start()
    }

    private fun pause() {
        isRunning = false
        binding.btnStart.text = getString(R.string.start)
        binding.btnStart.setBackgroundColor(getColor(R.color.blue))
    }

    private fun refresh() {
        isRunning = false
        timerThread?.interrupt() // 스레드를 중지하기 위해 interrupt 호출
        initViews()
        time = 0
    }

    override fun onDestroy() {
        super.onDestroy()
        timerThread?.interrupt() // 액티비티가 종료될 때 스레드를 중지
    }
}