고급 위젯 - 날짜/시간 관련

크로노미터

타이머 형식의 위젯이며 일반적으로 시간을 측정할 때 많이 사용합니다.

 

    <Chronometer
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/chronometer"
        android:textSize="30sp"
        android:gravity="center"
        android:format="시간 측정 [ %s ]" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnStart"
        android:text="START"
        android:textSize="20sp"
        android:layout_marginTop="5dp" />

 

Chronometer 위젯에 gravity 속성으로 중앙으로 위치를 바꿔주고 필수적인 format 속성을 주어 %s 포맷으로 출력되도록 하였습니다.

 

public class MainActivity extends AppCompatActivity {

    Chronometer chronometer;
    Button btnStart;

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

        chronometer = findViewById(R.id.chrono);
        btnStart = findViewById(R.id.btnStart);

        btnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // START 버튼 클릭 시 Button 텍스트로 판별
                if(btnStart.getText().equals("START")) {
                    // START 버튼 클릭 시 크로노미터의 시각을 0분 0초로 초기화
                    chronometer.setBase(SystemClock.elapsedRealtime());

                    // Chronometer의 start() 메서드를 호출하여 타이머 가동
                    chronometer.start();
                    chronometer.setTextColor(Color.BLACK);
                    btnStart.setText("STOP");
                } else {
                    btnStart.setText("START");
                    chronometer.setTextColor(Color.BLUE);
                }
            }
        });
    }
}

 

btnStart의 Text로 판별하여 시작과 정지를 구분하고 START 버튼 클릭 시 시각을 0분 0초로 초기화하고 타이머를 가동합니다. 정확히 구분하기 위하여 텍스트의 색상을 변경했고 다시 버튼의 Text를 토글 형식으로 문구를 변경합니다.

 

 

 

 

타임피커

시간을 선택할 수 있는 위젯입니다.

 

 

 

타임피커의 2가지 모드 중 친숙한 spinner 모드

 

 

 

타임피커의 2가지 모드 중 clock 모드 (좌측 하단 키보드 모양의 아이콘 클릭 시 spinner 모드 처럼 직접 입력 가능)

 

<?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"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TimePicker
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/timePicker"
        android:timePickerMode="spinner" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnPick"
        android:text="설정 완료" />

</LinearLayout>

 

public class MainActivity extends AppCompatActivity {

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

        final TimePicker tPicker = findViewById(R.id.timePicker);
        Button btnPick = findViewById(R.id.btnPick);

        btnPick.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 안드로이드 API 23 Level(Mashmellow) 부터 사용 가능한 코드
                // int hour = tPicker.getHour();
                // int min = tPicker.getMinute();

                // API 23 Level 이전의 코드에서 사용 시
                int hour = tPicker.getCurrentHour();
                int min = tPicker.getCurrentMinute();

                Toast.makeText(MainActivity.this, hour + "시 " + min + "분", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

 

 

 

 

데이트피커

날짜를 선택할 수 있는 위젯입니다.

 

 

데이트피커의 2가지 모드 중 spinner 모드로 선택하면 위 처럼 spinner와 calendar가 함께 나오고 생략하거나 calendar를 입력하면 calendar 모드만 적용됩니다.

 

    <DatePicker
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/dPicker"
        android:datePickerMode="calendar" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnPick"
        android:text="설정 완료"
        android:textSize="20sp" />

 

public class MainActivity extends AppCompatActivity {

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

        final DatePicker dPicker = findViewById(R.id.dPicker);
        Button btnPick = findViewById(R.id.btnPick);

        btnPick.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int year = dPicker.getYear();
                int month = dPicker.getMonth() + 1; // 0~11월을 사용하므로 +1 필요
                int day = dPicker.getDayOfMonth();

                Toast.makeText(MainActivity.this, year + "년 " + month + "월 " + day + "일", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

 

 

 

 

캘린더뷰

데이트피커와 마찬가지로 날짜를 선택할 수 있는 위젯입니다.

 

 

    <CalendarView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cPicker" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnPick"
        android:text="설정 완료"
        android:textSize="20sp" />

 

public class MainActivity extends AppCompatActivity {
    int selectedYear, selectedMonth, selectedDay;

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

        final CalendarView cPicker = findViewById(R.id.cPicker);
        Button btnPick = findViewById(R.id.btnPick);

        // CalendarView 날짜 변경 시 동작하는 이벤트
        cPicker.setOnDateChangeListener(new CalendarView.OnDateChangeListener() {
            @Override
            public void onSelectedDayChange(@NonNull CalendarView view, int year, int month, int dayOfMonth) {
                // OnClick 이벤트에서 사용하기 위해 저장
                selectedYear = year;
                selectedMonth = month + 1; // 0~11월을 사용하므로 +1 필요
                selectedDay = dayOfMonth;
            }
        });

        btnPick.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(selectedYear == 0) {
                    Toast.makeText(MainActivity.this, "날짜를 선택해주세요.", Toast.LENGTH_SHORT).show();
                    return;
                }
                
                Toast.makeText(MainActivity.this, selectedYear + "년 " + selectedMonth + "월 " + selectedDay + "일", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

 

다른 이벤트(OnClick)에서 사용해주기 위해 OnDateChange 이벤트에서 변수에 저장해주어 사용합니다.