[Java][Android] 플립시계 만들기

안녕하세요 !

이번 시간에는 라이브러리를 사용해서 플립시계를 구현하는 방법에 대해 알아보겠습니다.

 

참조 문서

https://github.com/aldrek/Flip_Digit

GitHub - aldrek/Flip_Digit: Flip digit Library that makes a cool and flexible animation flip when changing from one numbers to a

 

먼저 gradle에 라이브러리를 등록해줍니다.

 

build.gradle(Module:프로젝트명:app)
dependencies 괄호 안에 아래 코드를 넣어주세요.

implementation 'com.github.aldrek:Flip_Digit:1.0.1'

 

다음으로 xml 파일입니다.

activity_flip.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"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

        <com.aldrek.digitflip.FlipWidget
            android:id="@+id/flipHour"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:digitColor="@color/black"
            app:isFastFlipMain="true"
            app:numberOfDigits="2"/>

        <com.aldrek.digitflip.FlipWidget
            android:id="@+id/flipMinute"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:digitColor="@color/black"
            app:isFastFlipMain="true"
            android:layout_marginLeft="20dp"
            app:numberOfDigits="2"/>

        <com.aldrek.digitflip.FlipWidget
            android:id="@+id/flipSecond"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            app:digitColor="@color/black"
            app:isFastFlipMain="true"
            app:numberOfDigits="2"/>
    </LinearLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="시작"
        android:id="@+id/start_btn"
        android:layout_marginTop="50dp"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="취소"
        android:id="@+id/cancel_btn"
        android:layout_marginTop="50dp"
        />

</LinearLayout>

 

다음으로 자바 파일입니다.

FlipActivity.java

import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.Button;

import androidx.appcompat.app.AppCompatActivity;

import com.aldrek.digitflip.FlipWidget;

import java.util.Calendar;

public class FlipActivity extends AppCompatActivity {

    FlipWidget flipHour, flipMinute, flipSecond;

    Handler handler;
    Runnable runnable;

    int hour, minute, second;

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


        flipHour = findViewById(R.id.flipHour);
        flipMinute = findViewById(R.id.flipMinute);
        flipSecond = findViewById(R.id.flipSecond);

        handler = new Handler();
        runnable = new Runnable() {
            @Override
            public void run() {
                Calendar calendar = Calendar.getInstance();

                //시간 생성
                hour = calendar.get(Calendar.HOUR_OF_DAY);
                minute = calendar.get(Calendar.MINUTE);
                second = calendar.get(Calendar.SECOND);

                //생성된 시간 플립에 넣기
                flipHour.setValue(hour, true);
                flipMinute.setValue(minute, true);
                flipSecond.setValue(second, true);

                //1초마다 반복
                handler.postDelayed(runnable, 1000);
            }
        };

        Button startBtn = findViewById(R.id.start_btn);
        startBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                handler.postDelayed(runnable, 1000); //실행
            }
        });

        Button cancelBtn = findViewById(R.id.cancel_btn);
        cancelBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                handler.removeCallbacksAndMessages(null); //취소
            }
        });
    }
} //FlipActivity

 

실행화면 입니다.

 

보시는 것과 같이 시작 버튼을 누르면 현재 시간이 불러와지며, 시계 기능을 사용할 수 있는 것을 볼 수 있습니다.

오늘 준비한 내용은 여기까지 입니다.

궁금한 점은 언제든 댓글로 남겨주세요.

감사합니다 !