Implemente TimePicker personalizado en Android usando SnapTimePicker

Android TimePicker es un control de interfaz de usuario para seleccionar la hora en formato de 24 horas o en modo AM/PM. Se utiliza para garantizar que los usuarios elijan una hora válida para el día en la aplicación. El TimePicker predeterminado se puede personalizar usando SnapTimePicker en Android .
customized-time-picker

Algunas características de SnapTimePicker son:

Soporte de rango de tiempo seleccionable.
Personalización de texto y color.
IOS Time Picker como con el estilo Material Design.

Acercarse

Paso 1: agregue la biblioteca de soporte en el archivo build.gradle y agregue la dependencia en la sección de dependencias.

implementation 'com.akexorcist:snap-time-picker:1.0.0'

Paso 2: agregue el siguiente código en el archivo string.xml en el directorio de valores. En este archivo, agregue todas las strings utilizadas en la aplicación. Se puede hacer referencia a estas strings desde la aplicación o desde otros archivos de recursos (como el diseño XML).

string.xml

   
<resources>
    <string name="app_name">GFG | SnapTimePicker</string>
    <string name="title">Please select the time</string>
    <string name="selected_time_prefix">Your selected time is</string>
  
    <!-- %1$s:%2$s will add the string in HH:MM format 
    for more understanding follow the link at the end -->
    <string name="selected_time_format">%1$s:%2$s</string>
  
    <!-- >> means >> for more understanding follow 
    the link at the end -->
    <string name="time_prefix">>></string>
  
    <!-- << means << for more understanding follow 
    the link at the end -->
    <string name="time_suffix"><<</string>
</resources>       

Paso 3: agregue el siguiente código en el archivo activity_main.xml . En este archivo, agregue los botones para seleccionar la hora y TextView para mostrar la hora seleccionada.

actividad_principal.xml

   
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:orientation="vertical"
        android:padding="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
  
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your selected time is"
            android:textSize="16sp"/>
  
        <TextView
            android:id="@+id/selectedTime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"/>
    </LinearLayout>
  
    <Button
        android:id="@+id/defaultTimePicker"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginStart="104dp"
        android:layout_marginBottom="112dp"
        android:text="Default Time Picker"
        android:textAllCaps="false"
        app:layout_constraintBottom_toTopOf="@+id/customTimePicker"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent" />
  
    <Button
        android:id="@+id/customTimePicker"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginStart="104dp"
        android:layout_marginBottom="212dp"
        android:text="Custom Time Picker"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 4: agregue el siguiente código en el archivo MainActivity.kt . En este archivo, agregue un onClickListner()método a los botones para que cada vez que el usuario haga clic en ellos se cree un cuadro de diálogo TimePicker .

MainActivity.kt

package com.madhav.maheshwari.snaptimepicker
  
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.akexorcist.snaptimepicker.SnapTimePickerDialog
import kotlinx.android.synthetic.main.activity_main.*
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        defaultTimePicker.setOnClickListener {
            // Default TimePicker
            SnapTimePickerDialog.Builder().apply {
                setTitle(R.string.title)
                setTitleColor(android.R.color.white)
            }.build().apply {
                setListener {
                    // when the user select time onTimePicked
                    // function get invoked automatically which
                    // sets the time in textViewTime.
                        hour, minute ->
                    onTimePicked(hour, minute)
                }
            }.show(
                supportFragmentManager,
                SnapTimePickerDialog.TAG
            )
        }
  
        customTimePicker.setOnClickListener {
            // Custom TimePicker
            SnapTimePickerDialog.Builder().apply {
                setTitle(R.string.title)
                setPrefix(R.string.time_prefix)
                setSuffix(R.string.time_suffix)
                setThemeColor(R.color.colorAccent)
                setTitleColor(android.R.color.black)
            }.build().apply {
                setListener {
                    // when the user select time onTimePicked
                    // function get invoked automatically which
                    // sets the time in textViewTime.
                        hour, minute ->
                    onTimePicked(hour, minute)
                }
            }.show(
                supportFragmentManager,
                SnapTimePickerDialog.TAG
            )
        }
  
    }
  
    private fun onTimePicked(selectedHour: Int, selectedMinute: Int) {
        // Pads the string to the specified length
        // at the beginning with the specified
        // character or space.
        val hour = selectedHour.toString()
            .padStart(2, '0')
        val minute = selectedMinute.toString()
            .padStart(2, '0')
        selectedTime.text = String.format(
            getString(
                R.string.selected_time_format,
                hour, minute
            )
        )
    }
}

Salida: ejecutar en el emulador

ventajas:

Las ventajas de usar SnapTimePicker sobre TimePicker simple son:

SnapTimePicker se puede personalizar según los requisitos.
Es muy fácil de usar.
Le da a IOS la sensación de una aplicación.

Publicación traducida automáticamente

Artículo escrito por madhavmaheshwarimm20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA