[android][kotlin] 달력, 시계, 타이머 사용하기

 

 

타이머와 달력 시계를 사용하는 방법을 알아봅시다~

 

타이머(Chronometer), 달력(CalendarView), 시계(TimePicker)

 

 

 

우선 xml을 대충 구성해준 후

activity_main.xml

소스코드

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:background="@color/custom_white"
    tools:context=".MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.cardview.widget.CardView
                app:cardCornerRadius="10dp"
                android:layout_margin="10dp"
                app:cardBackgroundColor="@color/custom_navy"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="5dp"
                    android:orientation="vertical" >

                    <Chronometer
                        android:id="@+id/timerChronometer"
                        android:textColor="@color/custom_white"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:format=" timer  %s "
                        android:textSize="20dp" />

                    <LinearLayout
                        android:layout_marginTop="5dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <Button
                            android:id="@+id/btnStart"
                            android:textColor="@color/custom_navy"
                            android:padding="5dp"
                            android:layout_marginLeft="10dp"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="@drawable/custom_btn"
                            android:text="timer start" />

                        <Button
                            android:id="@+id/btnReset"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:padding="5dp"
                            android:layout_marginLeft="10dp"
                            android:textColor="@color/custom_navy"
                            android:background="@drawable/custom_btn"
                            android:text="timer reset"/>

                        <Button
                            android:id="@+id/btnStop"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:padding="5dp"
                            android:layout_marginLeft="10dp"
                            android:textColor="@color/custom_navy"
                            android:background="@drawable/custom_btn"
                            android:text="timer stop"/>
                    </LinearLayout>

                </LinearLayout>

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                app:cardCornerRadius="10dp"
                android:layout_margin="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <CalendarView
                    android:id="@+id/calendarView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:maxDate="12/31/2999"
                    android:minDate="01/01/1000"
                    android:showWeekNumber="false" />

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                app:cardCornerRadius="10dp"
                android:layout_margin="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TimePicker
                    android:timePickerMode="clock"
                    android:numbersBackgroundColor="@color/custom_white"
                    android:numbersTextColor="@color/custom_navy"
                    android:numbersSelectorColor="@color/custom_purple"
                    android:id="@+id/timePicker"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                app:cardCornerRadius="10dp"
                android:layout_margin="10dp"
                app:cardBackgroundColor="@color/custom_navy"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:padding="5dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <Button
                        android:id="@+id/btnSelectEnd"
                        android:text="선택 완료"
                        android:textColor="@color/custom_navy"
                        android:background="@drawable/custom_btn"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"/>

                    <TextView
                        android:id="@+id/tvResult"
                        android:text="hello"
                        android:layout_marginLeft="10dp"
                        android:textColor="@color/custom_white"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"/>

                </LinearLayout>

            </androidx.cardview.widget.CardView>

        </LinearLayout>
    </ScrollView>

</LinearLayout>

 

 

 

MainActivity.kt

package com.example.myapplication

import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.SystemClock
import android.widget.*

class MainActivity : AppCompatActivity() {
    lateinit var chrono: Chronometer
    lateinit var btnStart: Button
    lateinit var btnSelectEnd: Button
    lateinit var btnStop: Button
    lateinit var btnReset: Button
    lateinit var calenderView: CalendarView
    lateinit var timePicker: TimePicker
    lateinit var resultTextView: TextView

    var selectYear = 0
    var selectMonth:Int = 0
    var selectDay:Int = 0

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

        // button
        btnStart = findViewById(R.id.btnStart)
        btnSelectEnd = findViewById(R.id.btnSelectEnd)
        btnStop = findViewById(R.id.btnStop)
        btnReset = findViewById(R.id.btnReset)

        // chronometer
        chrono = findViewById(R.id.timerChronometer)

        // Calender
        calenderView = findViewById(R.id.calendarView)

        // time select
        timePicker = findViewById(R.id.timePicker)

        // result Text
        resultTextView = findViewById(R.id.tvResult)


        // timer on
        btnStart.setOnClickListener{
            chrono.start()
            chrono.setTextColor(Color.MAGENTA)
        }

        // timer stop
        btnStop.setOnClickListener{
            chrono.stop()
            chrono.setTextColor(Color.WHITE)
        }

        // timer reset
        btnReset.setOnClickListener{
            chrono.stop()
            chrono.setTextColor(Color.WHITE)
            chrono.base = SystemClock.elapsedRealtime()
        }

        // select end
        btnSelectEnd.setOnClickListener {
            var selectHour = timePicker.currentHour.toString()
            var selectMinute = timePicker.currentMinute.toString()

            resultTextView.text = "${selectYear}년 ${selectMonth}월 ${selectDay}일 ${selectHour}시 ${selectMinute}분 선택"
        }

        calenderView.setOnDateChangeListener { view, year, month, dayOfMonth ->
            selectYear = year
            selectMonth = month + 1 //0~11
            selectDay = dayOfMonth
        }
    }
}