[안드로이드 코틀린] 9. 실전프로젝트(2) - 스톱워치

실전 프로젝트

실습 - 스톱 워치

주요구성

- 빠르게 계산하면서 UI를 갱신

- 각각timer와 runOnUiThread 메서드를 사용해 구현

- 랩타임을 누적하여 표시할 ScrollView에 동적으로 TextView를 추가

 

1. 화면구성

- 시간을 표시하는 TextView 2개

- 타이머를 시작 및 일시정지, 초기화하는 FloatingActionButton (벡터 아이콘 이미지 3개 추가)

    - tint로 색상 바꾸기 → xml 코드에서 app:tint="@color/white"추가

    -   FloatingActionButton 추가시 No speakable text present라는 오류 메시지가 발생하는 경우 activity_main.xml에서 FloatingActionButtom 속성에 tools:ignore="SpeakableTextPresentCheck"를 추가

- ‘랩 타임’ 버튼

- 랩 타임을 기록하고 표시할 ScrollView

 

2. 타이머 구현하기

timer 사용 방법

- 코틀린에서 일정한 시간을 주기로 반복하는 동작을 수행할 때는 timer 기능 사용

// 1000ms(1초) 간격으로 어떤 동작을 수행하는 코드
timer(period = 1000 {
	// 수행할 동작
}

- 워커 스레드에서는 UI를 조작할 수 없어 runOnUiThread( ) 메서드를 사용함

// timer를 사용하여 1초마다 UI를 변경하는 코드
tiemr(period = 1000) {
    // 오래 걸리는 작업
    runOnUiThread{
        // UI 조작
    }
}

 

타이머 시작 구현

- 타이머를 시작할 때 호출할 start ( ) 메서드를 작성

class MainActivity : AppCompatActivity() {

    private var time = 0;
    private var timerTask: Timer? = null

    lateinit var fab: FloatingActionButton
    lateinit var secTextView: TextView
    lateinit var milliTextView: TextView

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

        fab = findViewById<FloatingActionButton>(R.id.fab)
        secTextView = findViewById<TextView>(R.id.secTextView)
        milliTextView = findViewById<TextView>(R.id.milliTextView)

    }

    private fun start(){
        fab.setImageResource(R.drawable.baseline_pause_24)

        timerTask = timer(period=10){
            time++
            val sec = time / 100
            val milli = time % 100
            runOnUiThread {
                secTextView.text = "$sec"
                milliTextView.text = "$milli"
            }
        }
    }
}

 

타이머 일시정지 구현

- 일시정지 메서드인 pause( ) 메서드를 작성

    private fun pause(){
        fab.setImageResource(R.drawable.baseline_play_arrow_24)  // fab 누르면 fab의 이미지(시작) 변경
        timerTask?.cancel()      // 하는 일 멈추기
    }

 

버튼 이벤트 연결

- MainActivity.kt

- isRunning : play/pause 구별을 위한 플래그 변수

    private var time = 0;   // 시간을 계산할 변수
    private var timerTask: Timer? = null
    private var isRunning = false       // 작동 중: 처음은 false(작동X)

    lateinit var fab: FloatingActionButton
    lateinit var secTextView: TextView
    lateinit var milliTextView: TextView

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

        fab = findViewById<FloatingActionButton>(R.id.fab)
        secTextView = findViewById<TextView>(R.id.secTextView)
        milliTextView = findViewById<TextView>(R.id.milliTextView)

        fab.setOnClickListener {    // fab(일시정지/시작) 버튼
            isRunning = !isRunning         // 무조건 일시정지 아니면 시작 서로 반대로 작동할 수 있도록

            if(isRunning){  // 작동O
                start()     // timer 시작
            }
            else{           // 작동X
                pause()     // timer 멈춤
            }
        }
    }

 

3. 랩 타임 기록하기

동적으로 LinearLayout에 뷰 추가하기

- LinearLayout에 동적으로 뷰를 추가하는 방법은 addView( ) 메서드를 사용

val textView = TextView(this)
textView.text = "글자"
lapLayout.addView(textView)

- 항상 맨 위(0)에 텍스트 뷰를 추가하는 코드 (이 코드 조각을 사용하여 랩 타임을 기록하는 메서드를 작성할 수 있음)

lapLayout.addView(textView, 0)

 

랩 타임을 표시

- 랩 타임 기록 및 표시하는 recordLapTime( ) 메서드 작성

class MainActivity : AppCompatActivity() {

    private var time = 0;   // 시간을 계산할 변수
    private var timerTask: Timer? = null
    private var isRunning = false       // 작동 중: 처음은 false(작동X)
    private var lap = 1     // 몇번째 랩인지 표시하는 변수(무조건 1부터 시작)

    lateinit var fab: FloatingActionButton
    lateinit var secTextView: TextView
    lateinit var milliTextView: TextView
    lateinit var labLayout: LinearLayout
    lateinit var labButton: Button

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

        fab = findViewById<FloatingActionButton>(R.id.fab)
        secTextView = findViewById<TextView>(R.id.secTextView)
        milliTextView = findViewById<TextView>(R.id.milliTextView)
        labLayout = findViewById<LinearLayout>(R.id.labLayout)
        labButton = findViewById<Button>(R.id.labButton)

        // fab(일시정지/시작) 버튼 생략

        labButton.setOnClickListener { // 랩타임 버튼
            recordLapTime()
        }
    }

    // 타이머 멈춤 생략
    // 타이머 시작 생략

    private fun recordLapTime(){        // 시간 기록
        val lapTime = this.time         // 현재 시간을 변수에 저장(time에 저장된 값 가져오기)
        val textView = TextView(this)       // textView 생성(생성자 함수)
        textView.text = "$lap LAB : ${lapTime/100}.${lapTime%100}"  // 실제 값 쓰기

        labLayout.addView(textView, 0)      // 무조건 위로 생김(2LAB이 생성되면 1LAB이 아래로 밀림)
        lap++
    }
}

 

타이머 초기화 구현

class MainActivity : AppCompatActivity() {

    private var time = 0;   // 시간을 계산할 변수
    private var timerTask: Timer? = null
    private var isRunning = false       // 작동 중: 처음은 false(작동X)
    private var lap = 1     // 몇번째 랩인지 표시하는 변수(무조건 1부터 시작)

    lateinit var fab: FloatingActionButton
    lateinit var secTextView: TextView
    lateinit var milliTextView: TextView
    lateinit var labLayout: LinearLayout
    lateinit var labButton: Button
    lateinit var resetFab: FloatingActionButton

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

        fab = findViewById<FloatingActionButton>(R.id.fab)
        secTextView = findViewById<TextView>(R.id.secTextView)
        milliTextView = findViewById<TextView>(R.id.milliTextView)
        labLayout = findViewById<LinearLayout>(R.id.labLayout)
        labButton = findViewById<Button>(R.id.labButton)
        resetFab = findViewById<FloatingActionButton>(R.id.resetFab)

        // 위젯 생략

        resetFab.setOnClickListener {   // 초기화 버튼
            reset()
        }
    }

    // 함수 생략

    private fun reset(){        // 타이머 초기화
        timerTask?.cancel()     // 타이머의 모든 동작 멈추기

        // 모든 변수 초기화
        time = 0
        isRunning = false
        fab.setImageResource(R.drawable.baseline_play_arrow_24)
        secTextView.text = "0"
        milliTextView.text = "00"

        labLayout.removeAllViews()
        lap = 1
    }
}

 

 

최종

package com.example.stopwatch

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.LinearLayout
import android.widget.TextView
import com.google.android.material.floatingactionbutton.FloatingActionButton
import java.util.Timer
import kotlin.concurrent.timer

class MainActivity : AppCompatActivity() {

    private var time = 0;   // 시간을 계산할 변수
    private var timerTask: Timer? = null
    private var isRunning = false       // 작동 중: 처음은 false(작동X)
    private var lap = 1     // 몇번째 랩인지 표시하는 변수(무조건 1부터 시작)

    lateinit var fab: FloatingActionButton
    lateinit var secTextView: TextView
    lateinit var milliTextView: TextView
    lateinit var labLayout: LinearLayout
    lateinit var labButton: Button
    lateinit var resetFab: FloatingActionButton

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

        fab = findViewById<FloatingActionButton>(R.id.fab)
        secTextView = findViewById<TextView>(R.id.secTextView)
        milliTextView = findViewById<TextView>(R.id.milliTextView)
        labLayout = findViewById<LinearLayout>(R.id.labLayout)
        labButton = findViewById<Button>(R.id.labButton)
        resetFab = findViewById<FloatingActionButton>(R.id.resetFab)

        fab.setOnClickListener {    // fab(일시정지/시작) 버튼
            isRunning = !isRunning         // 무조건 일시정지 아니면 시작 서로 반대로 작동할 수 있도록

            if(isRunning){  // 작동O
                start()     // timer 시작
            }
            else{           // 작동X
                pause()     // timer 멈춤
            }
        }

        labButton.setOnClickListener { // 랩타임 버튼
            recordLapTime()
        }

        resetFab.setOnClickListener {   // 초기화 버튼
            reset()
        }
    }

    private fun pause(){    // 타이머 멈춤
        fab.setImageResource(R.drawable.baseline_play_arrow_24)  // fab 누르면 fab의 이미지(시작) 변경
        timerTask?.cancel()      // 하는 일 멈추기
    }

    private fun start(){    // 타이머 시작
        fab.setImageResource(R.drawable.baseline_pause_24)  // fab 누르면 fab의 이미지(일시정지) 변경

        timerTask = timer(period=10){   // 0.01초
            time++
            val sec = time / 100            // 초로 변환
            val milli = time % 100          // 밀리초로 변환
            runOnUiThread {                 // UI 갱신
                secTextView.text = "$sec"
                milliTextView.text = "$milli"
            }
        }
    }

    private fun recordLapTime(){        // 시간 기록
        val lapTime = this.time         // 현재 시간을 변수에 저장(time에 저장된 값 가져오기)
        val textView = TextView(this)       // textView 생성(생성자 함수)
        textView.text = "$lap LAB : ${lapTime/100}.${lapTime%100}"  // 실제 값 쓰기

        labLayout.addView(textView, 0)      // 무조건 위로 생김(2LAB이 생성되면 1LAB이 아래로 밀림)
        lap++
    }

    private fun reset(){        // 타이머 초기화
        timerTask?.cancel()     // 타이머의 모든 동작 멈추기

        // 모든 변수 초기화
        time = 0
        isRunning = false
        fab.setImageResource(R.drawable.baseline_play_arrow_24)
        secTextView.text = "0"
        milliTextView.text = "00"

        labLayout.removeAllViews()
        lap = 1
    }
}

 

 

정리

- 이미지를 올릴 수 있는 둥근 버튼 : FloatingActionButton

- 벡터 이미지를 아이콘으로 설정하고 backgroundTint 속성으로 배경색을 변경할 수 있고 아이콘 색상은 xml에서 app:tint 속성을 설정할 수 있음

- timer와 runOnUiThread를 사용하면 계산하면서 UI를 갱신할 수 있음

- 코틀린 코드를 사용하여 뷰를 동적으로 추가할 수 있음

 

 

 

응용 - 타이머 만들기

 

package com.example.timerapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import java.util.Timer
import kotlin.concurrent.timer

class MainActivity : AppCompatActivity() {

    private var time = 0;
    private var timerTask: Timer? = null

    lateinit var secTextView: TextView
    lateinit var milliTextView: TextView
    lateinit var secEditText: EditText
    lateinit var setButton: Button

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

        secTextView = findViewById<TextView>(R.id.secTextView)
        milliTextView = findViewById<TextView>(R.id.milliTextView)
        secEditText = findViewById<EditText>(R.id.secEditText)
        setButton = findViewById<Button>(R.id.setButton)

        setButton.setOnClickListener {
            time = secEditText.text.toString().toInt() * 100      // 100 곱하기!! (아니면 millisec으로 계산됨)
            start()
        }
    }

    private fun pause(){
        timerTask?.cancel()
    }

    private fun start(){
        timerTask = timer(period=10){
            time--
            val sec = time / 100
            val milli = time % 100

            if(sec == 0 && milli == 0) timerTask?.cancel()
            runOnUiThread {
                secTextView.text = "$sec"
                milliTextView.text = "$milli"
            }
        }
    }
}