• 0
  • Contact Me: alexbashy9001@gmail.com

Data Picker

Data Picker – виджет из концепции Material Design, который позволяет запустить календарь с выбором даты. Давайте сделаем так, что бы при клике по кнопке мы запускали Data Picker и после выбора даты – календарь сворачивался, а выбранная дата записывалось в текстовое поле, которое будет расположено под кнопкой

Итак давайте создадим верстку для нашего Activity с кнопкой и текстовым полем для записи даты:

<?xml version="1.0" encoding="utf-8"?>
<layout
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">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DateTime">

<Button
android:id="@+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent"
android:text="@string/date"
android:background="@color/colorPrimary"
style="@style/Widget.MaterialComponents.Button.Icon"/>

<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/selected"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/date"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_margin="10dp"
android:textColor="@android:color/black"/>

</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

Теперь переходим в класс Activity. Мы должны получить из календаря три переменные даты – день, месяц, год. Эти данные мы будем получать в формате Int – поэтому внутри нашего класса, но перед методом onCreate мы создаём эти данные и кладём в них значение ноль. Кроме того нам нужно создать объект самого всплывающего календаря, код с его созданием мы также размещаем внутри класса, но перед методом OnCreate:

var datePickerDialog:DatePickerDialog? =null
private var day = 0
private var month = 0
private var year = 0

Теперь мы вешаем на кнопку, которая будет запускать наш календарь – прослушивателя

binding?.date?.setOnClickListener(this)

Далее мы реализуем метод тапа по кнопке и вызываем внутри него метод, который расположим чуть ниже

override fun onClick(view: View) {

when(view.id) {
R.id.date -> {

startDataPicker()

}

}
}

В этом методе мы и будем вызывать наш календарь. А вот и этот метод:

private fun startDataPicker () {

datePickerDialog = DatePickerDialog(this, this, year, month, day)
datePickerDialog?.datePicker?.minDate = System.currentTimeMillis() - 1000
datePickerDialog?.setCanceledOnTouchOutside(false)

datePickerDialog?.setOnShowListener(DialogInterface.OnShowListener {
datePickerDialog?.getButton(Dialog.BUTTON_NEGATIVE)?.setVisibility(View.GONE)
})

datePickerDialog?.show()

}

Давайте по подробнее поговорим об этом коде

Мы инициализируем объект всплывающего календаря и передаём в него три переменные для записи в них данных. Эти переменные мы чуть ранее создали:

datePickerDialog = DatePickerDialog(this, this, year, month, day)

Метод show – запускает наш календарь

Также мы скрыли кнопку отказа выбора даты

datePickerDialog?.setOnShowListener(DialogInterface.OnShowListener {
datePickerDialog?.getButton(Dialog.BUTTON_NEGATIVE)?.setVisibility(View.GONE)
})

Если Вам нужна эта кнопка, то вместо Gone поставьте Visible – либо вообще не прописывайте это свойство, а для

datePickerDialog?.setCanceledOnTouchOutside(false)

установите true

Далее для того что бы реализовать получение данных и запись их в текстовое поле нам нужно отнести наш класс Activity к интерфейсу:

class DateTime : AppCompatActivity(),View.OnClickListener,DatePickerDialog.OnDateSetListener

А затем реализовать метод onDataSet()

@SuppressLint("SetTextI18n")
override fun onDateSet(datePicker: DatePicker?, year: Int, month: Int, dayOfMonth: Int) {
val saveMonth=month + 1
binding?.selected?.text = "$dayOfMonth.0$saveMonth.$year"
}

Давайте поподробнее остановимся на этом коде. Здесь мы получаем данные – year, month, dayOfMonth с выбранной датой. И всё что нам нужно сделать это записать переменные с данными в текстовое поле. Но есть один нюанс. Переменная month возвращает порядковый номер самого месяца. Но исчисление начинается не с 1, а с 0. То есть вместо например февраля(2) мы получим январь(1). Поэтому нам нужно ввести ещё одну переменную, а затем записать в неё число выбранного месяца и увеличить его на единицу, а после записать в текстовое поле с другими полученными переменными.

Теперь наш календарь начнет функционировать

Код из этого урока

activity_date_time.xml -xml шаблон Activity

<?xml version="1.0" encoding="utf-8"?>
<layout
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">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DateTime">

<Button
android:id="@+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent"
android:text="@string/date"
android:background="@color/colorPrimary"
style="@style/Widget.MaterialComponents.Button.Icon"/>

<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/selected"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/date"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_margin="10dp"
android:textColor="@android:color/black"/>

</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

DateTime.kt – класс Activity

class DateTime : AppCompatActivity(),View.OnClickListener,DatePickerDialog.OnDateSetListener {

private var binding:ActivityDateTimeBinding? = null
var datePickerDialog:DatePickerDialog? =null
private var day = 0
private var month = 0
private var year = 0


override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)


binding = DataBindingUtil.setContentView(this, R.layout.activity_date_time)

binding?.date?.setOnClickListener(this)

}

override fun onClick(view: View) {

when(view.id) {
R.id.date -> {

startDataPicker()

}

}
}

private fun startDataPicker () {

datePickerDialog = DatePickerDialog(this, this, year, month, day)
datePickerDialog?.datePicker?.minDate = System.currentTimeMillis() - 1000
datePickerDialog?.setCanceledOnTouchOutside(false)

datePickerDialog?.setOnShowListener(DialogInterface.OnShowListener {
datePickerDialog?.getButton(Dialog.BUTTON_NEGATIVE)?.setVisibility(View.GONE)
})

datePickerDialog?.show()

}

@SuppressLint("SetTextI18n")
override fun onDateSet(datePicker: DatePicker?, year: Int, month: Int, dayOfMonth: Int) {
val saveMonth=month + 1
binding?.selected?.text = "$dayOfMonth.0$saveMonth.$year"
}


}

ДОМАШНЕЕ ЗАДАНИЕ

Создайте календарь, который будет появляться при тапе по кнопке. При выборе даты – выбранная дата должна записываться в текстовое поле, которое Вы расположите под кнопкой. Результат в формате видео пришлите на Whats App – +79612777611

Leave a Reply

Your email address will not be published. Required fields are marked *