• 0
  • Contact Me: alexbashy9001@gmail.com

Time Picker

Time Picker – виджет из концепции Material Design, который позволяет запустить часы с выбором времени. Давайте сделаем так, что бы при клике по кнопке мы запускали Time 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/butTime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent"
android:text="@string/time"
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/butTime"
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 timePickerDialog:TimePickerDialog? =null
private var hours = 0
private var minutes = 0

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

binding?.butTime?.setOnClickListener(this)

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

override fun onClick(view: View) {

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

startTimePicker()

}

}
}

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

private fun startTimePicker () {


timePickerDialog = TimePickerDialog(this, this, hours, minutes,true)

timePickerDialog?.setCanceledOnTouchOutside(false)

timePickerDialog?.setOnShowListener(DialogInterface.OnShowListener {
timePickerDialog?.getButton(Dialog.BUTTON_NEGATIVE)?.visibility = View.GONE
})

timePickerDialog?.show()

}

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

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

timePickerDialog = TimePickerDialog(this, this, hours, minutes,true)

Метод show – запускает наши часы

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

timePickerDialog?.setCanceledOnTouchOutside(false)

timePickerDialog?.setOnShowListener(DialogInterface.OnShowListener {
timePickerDialog?.getButton(Dialog.BUTTON_NEGATIVE)?.visibility = View.GONE
})

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

timePickerDialog?.setCanceledOnTouchOutside(false)

установите true

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

сlass DateTime : AppCompatActivity(),View.OnClickListener,TimePickerDialog.OnTimeSetListener

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

@SuppressLint("SetTextI18n")
override fun onTimeSet(timePicker: TimePicker?, hours: Int, minutes: Int) {
binding?.selected?.text = "$hours:$minutes"

}

Давайте поподробнее остановимся на этом коде. Здесь мы получаем данные – hours, minutes с выбранным временем. И всё что нам нужно сделать это записать переменные с данными в текстовое поле.

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

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

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/butTime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent"
android:text="@string/time"
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/butTime"
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,TimePickerDialog.OnTimeSetListener {

private var binding:ActivityDateTimeBinding? = null
var timePickerDialog:TimePickerDialog? =null
private var hours = 0
private var minutes = 0


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


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

binding?.butTime?.setOnClickListener(this)



}

override fun onClick(view: View) {

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

startTimePicker()

}

}
}

private fun startTimePicker () {


timePickerDialog = TimePickerDialog(this, this, hours, minutes,true)

timePickerDialog?.setCanceledOnTouchOutside(false)

timePickerDialog?.setOnShowListener(DialogInterface.OnShowListener {
timePickerDialog?.getButton(Dialog.BUTTON_NEGATIVE)?.visibility = View.GONE
})

timePickerDialog?.show()

}

@SuppressLint("SetTextI18n")
override fun onTimeSet(timePicker: TimePicker?, hours: Int, minutes: Int) {
binding?.selected?.text = "$hours:$minutes"

}


}

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

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

Leave a Reply

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