안드로이드 날짜 시간 위젯(DatePicker, TimePicker) 기본

---

1. 아날로그 시계 / 디지털 시계 / 캘린더

안드로이드에서는 아날로그 시계와 디지털 시계로 현재 시간을 표시할 수 있다.

레이아웃 파일에 시계 속성을 넣어 사용하면 된다.

안드로이드에서는 시계뿐만아니라 캘린더(Calender) 기능을 사용할 수 있다.

캘린더 기능 역시 레이아웃 파일에 캘린더 속성을 넣어 사용하면 된다.

---

2. TimePicker / DatePicker

안드로이드에서는 TimePicker와 DatePicker를 이용하여 사용자로부터 날짜와 시간을 입력받을 수 있다.

이 기능은 주로 알람이나 예약 어플리케이션 등에 자주 사용된다.

TimePicker와 DatePicker의 이벤트를 처리하는 방법도 있지만 버튼을 눌렀을 때 TimePicker와 DatePicker에서 읽어오는 방법이 훨씬 쉽다.

TimePicker와 DatePicker에서 읽어오는 방법은 각각 다음과 같다.

1) TimePicker

예전에는 getCurrentHour() 메서드와 getCurrentMinute() 메서드가 사용되었는데 다음과 같이 안드로이드 공식문서에서 살펴보면 이 메서드들은 안드로이드 API 23에서 deprecated 되었으므로 사용하지 않는다.

굳이 getCurrentHour() 메서드를 사용하고 싶다면 다음과 같이 getCurrentHour() 메서드와 getCurrentMinute() 메서드를 사용하면 된다.

private void setTimePicker() {
    int hour = timePicker.getCurrentHour();
    int min = timePicker.getCurrentMinute();
}

 

대체된 getHour() 메서드를 사용하고 싶다면 다음과 같이 getHour() 메서드와 getMinute() 메서드를 사용하면 된다.

물론 이것은 API 레벨이 23이상일 때 이야기다.

private void setTimePicker() {
    int hour = timePicker.getHour();
    int min = timePicker.getMinute();
}

 

API 레벨이 23 미만이라면 getHour() 메서드와 getMinute() 메서드를 사용했을 때 다음과 같이 에러가 발생한다.

 

이런 경우에는 다음과 같이 build.gradle(Module)에서 minSdk를 23 이상으로 변경하면 해결된다.

 

build.gradle을 변경하고 싶지 않은 경우에는 다음과 같이 @RequiresApi(api = Build.VERSION_CODES.M) 어노테이션을 붙여서 사용하면 된다.

@RequiresApi(api = Build.VERSION_CODES.M)
private void setTimePicker() {
    int hour = timePicker.getHour();
    int min = timePicker.getMinute();
}

 

2) DatePicker

DatePicker도 TimePicker와 마찬가지로 다음과 같이 날짜를 읽어오는 코드를 작성하여 사용하면 된다. 

private void initDate() {
    int year = datePicker.getYear();
    int month = datePicker.getMonth();
    int date = datePicker.getDayOfMonth();
}

---

3. 시간 설정 구현

예제는 시간을 선택하고 설정 버튼을 누르면 텍스트에 선택한 시간이 표시되도록 구현한다.

시간 설정 예제 테스트를 위해 다음과 같은 순서로 코드를 작성한다.

• activity_main.xml 작성
• MainActivity.java 작성

구현하고자 하는 것은 다음과 같다.

• 원하는 알람 시간을 선택한다.
• 시간을 선택한 후 설정 버튼을 누르면 텍스트뷰에 설정한 알람 시간이 표시된다.
• 시간이 오전이면 설정된 시간 뒤에 AM, 오후면 설정된 시간 뒤에 PM을 표시한다.

 

1) activity_main.xml

다음 작업으로 레이아웃을 구성해보자.

리니어 레이아웃을 기본으로하여 레이아웃을 작성한다.

레이아웃에 사용하는 위젯으로 <TimePicker>, <TextView>, <Button>을 사용한다.

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

    <TimePicker
        android:id="@+id/time_picker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="30dp"
        android:text="알람 시간 : "
        android:textColor="@color/black"
        android:textSize="20sp"/>

    <Button
        android:id="@+id/btn_setting"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:text="설정"
        android:textSize="20sp" />

</LinearLayout>

시간 설정 예제를 만들기 위해 TimePicker와 텍스트뷰, 버튼을 작성하고 각각의 id를 부여한다.

 

2) MainActivity.java

레이아웃 구성이 완료되었으니 이번에는 자바코드를 작성한다.

다음과 같이 자바코드를 작성한다.

public class MainActivity extends AppCompatActivity {

    private TimePicker timePicker;
    private TextView time;
    private String format = "";
    private Button setTime;

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

        initTime();
        setTimePicker();
    }

    private void initTime() {
        timePicker = findViewById(R.id.time_picker);
        time = findViewById(R.id.tv_time);
    }

    private void setTimePicker() {
        setTime = findViewById(R.id.btn_setting);
        setTime.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int hour = timePicker.getCurrentHour();
                int min = timePicker.getCurrentMinute();
                showTime(hour, min);
            }
        });
    }

    private void showTime(int hour, int min) {
        if (hour == 0) {
            hour += 12;
            format = "AM";
        } else if (hour == 12) {
            format = "PM";
        } else if (hour > 12) {
            format = "PM";
        } else {
            format = "AM";
        }
        time.setText(new StringBuilder().append("알람 시간 : ").append(hour).append(" : ").append(min)
                .append(" ").append(format));
    }
}

TimePicker 표시를 위해 initTime() 메서드를 만들고 id를 연결한다.

setTimePicker() 메서드를 만들어서 설정 버튼이 눌렸을 때의 동작을 구현한다.

showTime() 메서드는 설정된 시간이 텍스트뷰에 표시되도록 하는 역할을 한다.

 

---

4. 시간 설정 실행 결과

작성한 시간 설정 테스트 앱을 실행해보면 다음과 같이 구동되는 것을 확인할 수 있다.

구현하고자 했던대로 설정된 시간이 텍스트뷰에 표시되는 것을 확인할 수 있다.

---

5. 날짜 선택 구현

이번에는 캘린더에서 날짜를 선택하고 설정 버튼을 누르면 텍스트에 선택한 날짜가 표시되도록 구현한다.

날짜 설정 예제 테스트를 위해 다음과 같은 순서로 코드를 작성한다.

• activity_main.xml 작성
• MainActivity.java 작성

구현하고자 하는 것은 다음과 같다.

• 캘린더에서 특정 날짜를 선택한다.
• 날짜를 선택한 후 설정 버튼을 누르면 텍스트뷰에 설정한 날짜가 표시된다.

 

1) activity_main.xml

다음 작업으로 레이아웃을 구성해보자.

리니어 레이아웃을 기본으로하여 레이아웃을 작성한다.

레이아웃에 사용하는 위젯으로 <DatePicker>, <TextView>, <Button>을 사용한다.

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

    <DatePicker
        android:id="@+id/date_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

    <TextView
        android:id="@+id/tv_date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="30dp"
        android:text="선택 날짜 : "
        android:textColor="@color/black"
        android:textSize="20sp"/>

    <Button
        android:id="@+id/btn_setting"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:text="설정"
        android:textSize="20sp" />

</LinearLayout>

시간 설정 예제를 만들기 위해 DatePicker와 텍스트뷰, 버튼을 작성하고 각각의 id를 부여한다.

DatePicker의 경우 match_parent가 제대로 되지 않으므로 width를 wrap_content로 지정해주어야 layout_gravity 속성을 이용하여 화면 중앙에 정렬할 수 있다. 

 

2) MainActivity.java

레이아웃 구성이 완료되었으니 이번에는 자바코드를 작성한다.

다음과 같이 자바코드를 작성한다.

public class MainActivity extends AppCompatActivity {

    private DatePicker datePicker;
    private TextView date;
    private Button setDate;
    private String format = "";

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

        initDate();
        setDatePicker();
    }

    private void initDate() {
        datePicker = findViewById(R.id.date_picker);
        date = findViewById(R.id.tv_date);
    }

    private void setDatePicker() {
        setDate = findViewById(R.id.btn_setting);
        setDate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int year = datePicker.getYear();
                int month = datePicker.getMonth();
                int day = datePicker.getDayOfMonth();

                date.setText(new StringBuilder().append("선택 날짜 : ").append(year)
                        .append(". ").append(month+1).append(". ").append(day).append(" ")
                        .append(format));
            }
        });
    }

}

DatePicker 표시를 위해 initDate() 메서드를 만들고 id를 연결한다.

setDatePicker() 메서드를 만들어서 설정 버튼이 눌렸을 때의 동작을 구현한다.

month는 0부터 시작하기 때문에 append(month + 1)로 작성해준다.

 

---

6. 날짜 선택 실행 결과

작성한 날짜 선택 테스트 앱을 실행해보면 다음과 같이 구동되는 것을 확인할 수 있다.

구현하고자 했던대로 선택한 날짜가 텍스트뷰에 표시되는 것을 확인할 수 있다.