[Kotlin] 안드로이드 스튜디오 - ViewBinding을 활용한 스톱워치 앱만들기

 

 

 

 

Kotlin과 ViewBinding으로 스톱워치 앱 만들기

Android에서 Chronometer를 사용하여 초 단위 스톱워치를 구현!

ViewBinding을 활용해 XML에 정의된 UI 요소를 코드에서 쉽게 접근할 수 있도록 하고, Toast를 사용해 사용자에게 안내 메시지를 띄울 수도 있다.

 

 

1. 프로젝트 설정 - ViewBinding 활성화

뷰 바인딩을 사용하면 findViewById 없이도 XML에 정의된 UI 요소를 바로 접근할 수 있다.

 

build.gradle.kts 설정

모듈의 build.gradle.kts 파일에 다음 코드를 추가한 후 Sync Now를 클릭하면 된다.

android {
    buildFeatures {
        viewBinding = true
    }
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_11
        targetCompatibility = JavaVersion.VERSION_11
    }
    kotlinOptions {
        jvmTarget = "11"
    }
}

 

 

 

 

2. UI 구성 - Chronometer 추가

Chronometer를 사용하면 초 단위로 시간을 측정할 수 있다.

<Chronometer
    android:id="@+id/chronometer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="100dp"
    android:gravity="center_horizontal"
    android:textSize="60dp"/>

 

이제 Chronometer를 사용할 준비가 끝났다.

 

 

 

3. MainActivity.kt 코드 작성

이제 버튼을 눌러 시작(Start), 정지(Stop), 초기화(Reset) 기능을 구현하면 된다.

package com.example.ch8_stopwatch

import android.os.Bundle
import android.os.SystemClock
import android.view.KeyEvent
import android.widget.Toast
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import com.example.ch8_stopwatch.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private var initTime = 0L  // 뒤로가기 버튼을 눌렀을 때 시간을 측정하기 위한 변수
    private var pauseTime = 0L  // 멈췄을 때 시간을 저장하기 위한 변수

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge() // 시스템 바까지 UI가 확장되도록 설정하면 된다.

        val binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 시스템 바 영역까지 UI 확장하려면 이렇게 하면 된다.
        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
        }

        // ⏳ 스톱워치 시작 버튼
        binding.startButton.setOnClickListener {
            binding.chronometer.base = SystemClock.elapsedRealtime() + pauseTime
            binding.chronometer.start()

            binding.stopButton.isEnabled = true
            binding.resetButton.isEnabled = true
            binding.startButton.isEnabled = false
        }

        // ⏸ 스톱워치 정지 버튼
        binding.stopButton.setOnClickListener {
            pauseTime = binding.chronometer.base - SystemClock.elapsedRealtime()
            binding.chronometer.stop()

            binding.stopButton.isEnabled = false
            binding.resetButton.isEnabled = true
            binding.startButton.isEnabled = true
        }

        // 🔄 스톱워치 초기화 버튼
        binding.resetButton.setOnClickListener {
            pauseTime = 0L
            binding.chronometer.base = SystemClock.elapsedRealtime()
            binding.chronometer.stop()

            binding.stopButton.isEnabled = false
            binding.resetButton.isEnabled = false
            binding.startButton.isEnabled = true
        }
    }

    // 🔙 뒤로가기 버튼 두 번 눌러 종료하는 기능 추가
    override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (System.currentTimeMillis() - initTime > 3000) {
                Toast.makeText(this, "종료하려면 한 번 더 누르세요", Toast.LENGTH_SHORT).show()
                initTime = System.currentTimeMillis()
                return true
            }
        }
        return super.onKeyDown(keyCode, event)
    }
}

 

 

주요 코드 설명

 

• 뷰 바인딩(ViewBinding) 적용
  ActivityMainBinding.inflate(layoutInflater)을 사용하면 findViewById 없이 UI 요소를 바로 접근할 수 있다.

 

• Chronometer 활용
  • SystemClock.elapsedRealtime()을 사용하면 경과 시간을 측정할 수 있다.
  • chronometer.start()와 chronometer.stop()을 이용해 시간을 컨트롤하면 된다.

 

• 버튼 클릭 이벤트 처리
  • startButton: 스톱워치를 시작하려면 클릭하면 된다.
  • stopButton: 스톱워치를 멈추려면 클릭하면 된다.
  • resetButton: 스톱워치를 초기화하려면 클릭하면 된다.

 

• 뒤로가기 버튼 두 번 눌러 종료 기능
  • System.currentTimeMillis()를 사용해 시간 차이를 비교하면 된다.
  • 3초 내에 한 번 더 누르면 앱이 종료된다.

 

• 일시적으로 화면에 메시지를 띄우는 기능(Toast)
  • 사용자에게 간단한 안내나 알림을 표시할 때 사용한다.

 

 

4. 실행 결과

1. Start 버튼을 누르면 초가 증가한다.
2. Stop 버튼을 누르면 시간이 멈춘다.
3. Reset 버튼을 누르면 타이머가 초기화된다.
4. 뒤로가기 버튼을 한 번 누르면 "종료하려면 한 번 더 누르세요" 메시지가 뜬다.
5. 3초 내에 한 번 더 누르면 앱이 종료된다.