[7][android]안드로이드 타이머 만드는 방법, 초시계 만들기

메인이미지

안녕하세요.

이번 포스팅은 안드로이드 스튜디오를 활용해서 타이머 어플을 만드는 방법을 알려드리려 합니다.

기존에 강의했던 내용을 가지고 만들어 볼 것이기 때문에 만약 직접 만들어 보실 분이라면 앞 강의를 보고 오시는 것도 괜찮을 것 같아요.

그럼 바로 시작해 보도록 하겠습니다.

타이머 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="타이머 예제"
        android:textSize="30sp"
        android:textColor="#ffffff"
        android:gravity="center"
        android:background="#80000000"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintTop_toTopOf="parent"
        />
    <TextView
        android:id="@+id/time"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:text="00 : 00"
        android:textSize="50sp"
        android:textColor="#0001FF"
        android:gravity="center"
        app:layout_constraintTop_toBottomOf="@+id/text"
        app:layout_constraintBottom_toTopOf="@id/seekerBar"
        />
        <androidx.appcompat.widget.AppCompatSeekBar
            android:id="@+id/seekerBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:max="3600"
            app:layout_constraintTop_toBottomOf="@id/time"
            app:layout_constraintBottom_toTopOf="@id/start"/>
        <Button
            android:id="@+id/start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="start"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/seekerBar"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/stop"/>
        <Button
            android:id="@+id/stop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="stop"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/seekerBar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/start"/>

</androidx.constraintlayout.widget.ConstraintLayout>

먼저 어플의 이름을 가장 위에 있는 텍스트 뷰에 넣어 줬습니다.

뷰의 크기는 width = 부모에 맞춤, height = 부모의 1/10으로 맞춰 두고 그 후 배경은 50% 투명도의 검정색, 글자는 하얀색으로 설정해줬습니다.

다음 텍스트 뷰는 시간을 표시해주는 녀석으로 최상단의 width = 부모에 맞춤, height = 300dp에 로 맞춰줬어요.

그 아래 시크 바와 버튼 두 개를 생성해서 id를 각각 seekerbar, start, stop으로 설정해줬습니다.

시크바는 최댓값을 3600으로 설정해서 최대 1시간까지 타이머를 돌릴 수 있게끔 만들어 줬어요.

그런 뒤 각 위젯당 관계를 설정해서 위치를 설정했습니다.

 

다음으로 해야 할 일은 MainActivity.kt를 코딩해서 작동하게끔 하는 거겠죠?

MainActivity.kt 코딩하기

package com.pemblem.basicTimer

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.SeekBar
import android.widget.TextView
import kotlinx.android.synthetic.main.activity_main.*
import kotlin.concurrent.timer

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

        val seekbar : SeekBar = findViewById(R.id.seekerBar)
        val time : TextView = findViewById(R.id.time)
        var timeTick = 0
        var minute = 0
        var second = 0
        seekbar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
                timeTick = progress
                time.text = String.format("%02d : %02d",timeTick/60,timeTick%60)
            }
            override fun onStartTrackingTouch(seekBar: SeekBar?) {
                timeTick = seekBar!!.progress
                time.text = String.format("%02d : %02d",timeTick/60,timeTick%60)
            }
            override fun onStopTrackingTouch(seekBar: SeekBar?) {
                timeTick = seekBar!!.progress
                time.text = String.format("%02d : %02d",timeTick/60,timeTick%60)
            }
        })
        start.setOnClickListener {
            minute = timeTick/60
            second = timeTick%60
            timer(period = 1000,initialDelay = 1000) {
                runOnUiThread {
                    time.text = String.format("%02d : %02d",minute,second)
                }
                if (second==0&&minute==0) {
                    println("\n타이머 종료")
                    cancel()
                }
                if (second == 0) {
                    minute--
                    second = 60
                }
                second--
                stop.setOnClickListener { cancel() }
            }
        }
    }
}

먼저 시크바를 seekbar 변수에 넣어주고 시간 표시용 텍스트뷰를 TextView 변수에 넣어줍니다.

그 이후 시간틱을 임시로 저장할 변수(timeTick)와 분(minute), 초(second)를 저장할 변수를 만들어 줬어요.

 

시크바 리스너를 작성해서 timeTick변수에 progress값을 저장해주고 time <TextView>의 text 값을 수정해서 시간을 표시해줍니다.

 

Start(xml의 버튼의 아이디)로 바로 버튼을 불러와서 람다식으로 클릭 리스너를 불러오고 minute, second 변수에 timeTick변수 값을 변환해 넣어줍니다.

 

kotlin타이머 강의에서 알려준 대로 timer함수를 불러오고 period와 initialDelay를 1000으로 설정한 뒤 코드 블록 안에 시간 계산 코드를 적어 넣어 줍니다.

timer코드 블럭 안에서는 텍스트뷰의 text값을 수정할 수 없기 때문에 runOnUiThread 코드 블럭을 만들어서 그 안에서 변경해줘야 하죠.

 

마지막으로 타이머 코드 블록 안에 stop버튼을 불러와서 클릭 리스너를 만들어주고 timer함수를 종료 시키는 cancel()을 넣어주면 전부 완성입니다.

아래는 실행시킨 동영상입니다.

 

타이머 실행 사진

 

---

이렇게 오늘은 안드로이드 스튜디오로 타이머 앱을 만드는 방법에 대한 내용을 포스팅해보았습니다.

영상으로 설명했으면 더 쉬웠을 글로만 설명할 수 있다는 것이 너무 아쉽네요.

그럼 저는 다음에 다른 강좌로 다시 찾아오기로 하겠습니다.

긴 글 읽어 주셔서 감사합니다.

---

이번 강의에 사용된 내용

[Kotlin][4]코틀린 timer 함수 기본 사용법과 println, print의 차이에 대하여

이번 강의에 사용된 내용

[Kotlin][6]코틀린 타이머 만드는 방법[강좌]

이번 강의에 사용된 내용

[안드로이드 스튜디오]Constraint Layout 기본 사용법[1] – 위젯 관계 설정

이번 강의에 사용된 내용

[안드로이드 스튜디오]버튼, 클릭 이벤트 기본 사용법 – 클릭 이벤트[Button][1]

이번 강의에 사용된 내용

https://postiveemblem.tistory.com/130

[안드로이드 스튜디오]텍스트뷰 기본 사용법 – 문자 정렬, 글자 색, 크기, 내용 변경에 대해[TextView][1]

---

이 글의 저작권은 전적으로 작성자인 P_Emblem에게 있으며
허락 없는 사용을 금합니다.