android TimerView

흔히 모바일에서 문자인증을 하게되면 이런 화면을 많이 보셨을껍니다.

android 에서는 Timer 나 CountDownTimer 또는 스레드와 핸들러 조합으로 타이머 구현이 가능합니다.

하지만 CountDownTimer는 간헐적으로 시간이 맞지 않는 증상도 있고 스레드와 핸들러를 조합하면 로직이 복잡해지는 단점이 있습니다.

그래서 간단하게 직접 구현해 봤습니다.

java파일을 추가해 주시고

TimerView.java

import android.animation.ObjectAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.view.animation.LinearInterpolator;

public class TimerView extends android.support.v7.widget.AppCompatTextView {

    private ObjectAnimator animator;
    private int time;

    private boolean certification = false;

    public TimerView( Context context ) {
        super( context );
    }

    public TimerView( Context context, AttributeSet attrs ) {
        super( context, attrs );
    }

    public void start( int allTime ) {
        setTime( allTime );
        setCertification( true );
        animator = ObjectAnimator.ofInt( this, "time", 0 );
        animator.setDuration( allTime );
        animator.setInterpolator( new LinearInterpolator( ) );
        animator.start( );
    }

    public void stop( ) {
        animator.cancel( );
        setTime( 0 );
        setCertification( false );
    }

    public boolean isCertification( ) {
        return certification;
    }

    private void setCertification( boolean certification ) {
        this.certification = certification;
    }

    public int getTime( ) {
        return time;
    }

    public void setTime( int time ) {
        this.time = time;

        int h = time / 3600000;
        int m = ( time - h * 3600000 ) / 60000;
        int s = ( time - h * 3600000 - m * 60000 ) / 1000;

        //주석해제시 format 형식 : 00:00:00

//        String hh = h < 10 ? "0"+h: h+"";
        String mm = m < 10 ? "0" + m : m + "";
        String ss = s < 10 ? "0" + s : s + "";
//        this.setText(hh+":"+mm+":"+ss);
        this.setText( mm + ":" + ss );

        if ( this.time == 0 ) {
            setCertification( false );
        }
    }


}

xml에서는 이렇게 사용이 가능합니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.timerview.TimerView
        android:id="@+id/timer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24dp"
        android:text="00:15"
        android:textColor="#F00"
        android:layout_centerInParent="true" />


    <LinearLayout
        android:id="@+id/groupBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">
        <Button
            android:id="@+id/btn1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="타이머시작"
            android:layout_weight="1"/>

        <Button
            android:id="@+id/btn2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="타이머중지"
            android:layout_weight="1"/>

    </LinearLayout>

    <Button
        android:id="@+id/btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/groupBtn"
        android:text="인증하기"/>




</RelativeLayout>

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private TimerView timerView;
    private Button btn1, btn2, btn3;

    @Override
    protected void onCreate( Bundle savedInstanceState ) {
        super.onCreate( savedInstanceState );
        setContentView( R.layout.activity_main );

        timerView = findViewById( R.id.timer );
        btn1 = findViewById( R.id.btn1 );
        btn2 = findViewById( R.id.btn2 );
        btn3 = findViewById( R.id.btn3 );

        btn1.setOnClickListener( this );
        btn2.setOnClickListener( this );
        btn3.setOnClickListener( this );
    }

    @Override
    public void onClick( View v ) {
        if ( v == btn1 ) {
            timerView.start( 15000 );
        } else if ( v == btn2 ) {
            timerView.stop();
        } else if ( v == btn3 ){
            if ( timerView.isCertification() ){
                Toast.makeText( this, "인증", Toast.LENGTH_SHORT).show();
            } else{
                Toast.makeText( this, "인증시간초과", Toast.LENGTH_SHORT).show();
            }
        }
    }
}

실제로 사용하시게 되면 start 부분에 원하는 시간을 int로 설정하시면 됩니다.  현재 코드상에는 15초로 설정이 되어있습니다.

ex) 1초 = 1000 , 3분 = 180000

실행화면입니다.

gitHub : https://github.com/ChoiJeongHyun/TimerView.git