Compartilhar via


Seletor de tempo do Android

Para fornecer uma maneira para o usuário selecionar uma hora, você pode usar o TimePicker. Os aplicativos Android normalmente usam TimePicker o TimePickerDialog para selecionar um valor de tempo – isso ajuda a garantir uma interface consistente entre dispositivos e aplicativos. TimePicker permite que os usuários selecionem a hora do dia no modo AM/PM de 24 horas ou 12 horas. TimePickerDialog é uma classe auxiliar que encapsula o TimePicker em uma caixa de diálogo.

Captura de tela de exemplo da caixa de diálogo Seletor de Tempo em ação

Visão geral

Aplicativos Android modernos exibem o TimePickerDialog em um DialogFragment. Isso possibilita que um aplicativo exiba a TimePicker caixa de diálogo pop-up como uma caixa de diálogo pop-up ou incorpore-a em uma Atividade. Além disso, o DialogFragment gerencia o ciclo de vida e a exibição da caixa de diálogo, reduzindo a quantidade de código que deve ser implementado.

Este guia demonstra como usar o TimePickerDialog, embrulhado em um DialogFragmentarquivo . O aplicativo de exemplo exibe o TimePickerDialog como uma caixa de diálogo modal quando o usuário clica em um botão em uma atividade. Quando a hora é definida pelo usuário, a caixa de diálogo é encerrada e um manipulador atualiza um TextView na tela Atividade com a hora que foi selecionada.

Requisitos

O aplicativo de exemplo para este guia destina-se ao Android 4.1 (nível de API 16) ou superior, mas pode ser usado com o Android 3.0 (nível de API 11 ou superior). É possível suportar versões mais antigas do Android com a adição da Biblioteca de Suporte do Android v4 ao projeto e algumas mudanças de código.

Usando o TimePicker

Este exemplo estende DialogFragment; a implementação de subclasse de DialogFragment hosts (chamada TimePickerFragment abaixo) e exibe um TimePickerDialogarquivo . Quando o aplicativo de exemplo é iniciado pela primeira vez, ele exibe um botão PICK TIME acima de um TextView que será usado para exibir a hora selecionada:

Tela inicial do aplicativo de exemplo

Quando você clica no botão PICK TIME , o aplicativo de exemplo inicia o como visto nesta captura de TimePickerDialog tela:

Captura de tela da caixa de diálogo Seletor de Tempo padrão exibida pelo aplicativo

TimePickerDialogNo , selecionar uma hora e clicar no botão OK faz com que o invocar o TimePickerDialog método IOnTimeSetListener.OnTimeSet. Esta interface é implementada pela hospedagem DialogFragment (TimePickerFragment, descrita abaixo). Clicar no botão Cancelar faz com que o fragmento e a caixa de diálogo sejam descartados.

DialogFragment retorna o tempo selecionado para a Atividade de hospedagem de uma das três maneiras:

  1. Invocando um método ou definindo uma propriedade – A atividade pode fornecer uma propriedade ou método especificamente para definir esse valor.

  2. Gerando um evento – O DialogFragment pode definir um evento que será gerado quando OnTimeSet for invocado.

  3. Usando um Action – O DialogFragment pode invocar um Action<DateTime> para exibir a hora na Atividade. A Atividade fornecerá o Action<DateTime ao instanciar o DialogFragment.

Este exemplo usará a terceira técnica, que requer que a Atividade forneça um Action<DateTime> manipulador para o DialogFragment.

Iniciar um projeto de aplicativo

Inicie um novo projeto Android chamado TimePickerDemo (se você não estiver familiarizado com a criação de projetos Xamarin.Android, consulte Olá, Android para saber como criar um novo projeto).

Edite Resources/layout/Main.axml e substitua seu conteúdo pelo seguinte XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:padding="16dp">
    <Button
        android:id="@+id/select_button"
        android:paddingLeft="24dp"
        android:paddingRight="24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="PICK TIME"
        android:textSize="20dp" />
    <TextView
        android:id="@+id/time_display"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:paddingTop="22dp"
        android:text="Picked time will be displayed here"
        android:textSize="24dp" />
</LinearLayout>

Este é um LinearLayout básico com um TextView que exibe a hora e um Button que abre o TimePickerDialog. Observe que esse layout usa cadeias de caracteres e dimensões codificadas para tornar o aplicativo mais simples e fácil de entender – um aplicativo de produção normalmente usa recursos para esses valores (como pode ser visto no exemplo de código do DatePicker ).

Edite MainActivity.cs e substitua seu conteúdo pelo seguinte código:

using Android.App;
using Android.Widget;
using Android.OS;
using System;
using Android.Util;
using Android.Text.Format;

namespace TimePickerDemo
{
    [Activity(Label = "TimePickerDemo", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        TextView timeDisplay;
        Button timeSelectButton;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);
            timeDisplay = FindViewById<TextView>(Resource.Id.time_display);
            timeSelectButton = FindViewById<Button>(Resource.Id.select_button);
        }
    }
}

Ao compilar e executar este exemplo, você verá uma tela inicial semelhante à seguinte captura de tela:

Tela inicial do aplicativo

Clicar no botão PICK TIME não faz nada porque o DialogFragment ainda não foi implementado para exibir o TimePicker. O próximo passo é criar este DialogFragment.

Estendendo DialogFragment

Para estender DialogFragment para uso com TimePickero , é necessário criar uma subclasse derivada de DialogFragment e implementa TimePickerDialog.IOnTimeSetListener. Adicione a seguinte classe ao MainActivity.cs:

public class TimePickerFragment : DialogFragment, TimePickerDialog.IOnTimeSetListener
{
    public static readonly string TAG = "MyTimePickerFragment";
    Action<DateTime> timeSelectedHandler = delegate { };

    public static TimePickerFragment NewInstance(Action<DateTime> onTimeSelected)
    {
        TimePickerFragment frag = new TimePickerFragment();
        frag.timeSelectedHandler = onTimeSelected;
        return frag;
    }

    public override Dialog OnCreateDialog (Bundle savedInstanceState)
    {
        DateTime currentTime = DateTime.Now;
        bool is24HourFormat = DateFormat.Is24HourFormat(Activity);
        TimePickerDialog dialog = new TimePickerDialog
            (Activity, this, currentTime.Hour, currentTime.Minute, is24HourFormat);
        return dialog;
    }

    public void OnTimeSet(TimePicker view, int hourOfDay, int minute)
    {
        DateTime currentTime = DateTime.Now;
        DateTime selectedTime = new DateTime(currentTime.Year, currentTime.Month, currentTime.Day, hourOfDay, minute, 0);
        Log.Debug(TAG, selectedTime.ToLongTimeString());
        timeSelectedHandler (selectedTime);
    }
}

Essa TimePickerFragment classe é dividida em partes menores e explicada na próxima seção.

Implementação do DialogFragment

TimePickerFragment implementa vários métodos: um método de fábrica, um método de instanciação Dialog e o OnTimeSet método de manipulador exigido pelo TimePickerDialog.IOnTimeSetListener.

  • O TimePickerFragment é uma subclasse de DialogFragment. Ele também implementa a TimePickerDialog.IOnTimeSetListener interface (ou seja, fornece o método necessário OnTimeSet ):

    public class TimePickerFragment : DialogFragment, TimePickerDialog.IOnTimeSetListener
    
  • TAG é inicializado para fins de log (MyTimePickerFragment pode ser alterado para qualquer cadeia de caracteres que você deseja usar). A timeSelectedHandler ação é inicializada em um delegado vazio para evitar exceções de referência nulas:

    public static readonly string TAG = "MyTimePickerFragment";
    Action<DateTime> timeSelectedHandler = delegate { };
    
  • O NewInstance método de fábrica é chamado para instanciar um novo TimePickerFragmentarquivo . Esse método usa um Action<DateTime> manipulador que é chamado quando o usuário clica no botão OK no TimePickerDialog:

    public static TimePickerFragment NewInstance(Action<DateTime> onTimeSelected)
    {
        TimePickerFragment frag = new TimePickerFragment();
        frag.timeSelectedHandler = onTimeSelected;
        return frag;
    }
    
  • Quando o fragmento deve ser exibido, o Android chama o DialogFragment método OnCreateDialog. Esse método cria um novo TimePickerDialog objeto e o inicializa com a Activity, o objeto de retorno de chamada (que é a instância atual do TimePickerFragment) e a hora atual:

    public override Dialog OnCreateDialog (Bundle savedInstanceState)
    {
        DateTime currentTime = DateTime.Now;
        bool is24HourFormat = DateFormat.Is24HourFormat(Activity);
        TimePickerDialog dialog = new TimePickerDialog
            (Activity, this, currentTime.Hour, currentTime.Minute, is24HourFormat);
        return dialog;
    }
    
  • Quando o usuário altera a configuração de hora na TimePicker caixa de diálogo, o OnTimeSet método é chamado. OnTimeSet Cria um DateTime objeto usando a data atual e mescla na hora (hora e minuto) selecionada pelo usuário:

    public void OnTimeSet(TimePicker view, int hourOfDay, int minute)
    {
        DateTime currentTime = DateTime.Now;
        DateTime selectedTime = new DateTime(currentTime.Year, currentTime.Month, currentTime.Day, hourOfDay, minute, 0);
    
  • Esse DateTime objeto é passado para o timeSelectedHandler que está registrado com o objeto no momento da TimePickerFragment criação. OnTimeSet invoca esse manipulador para atualizar a exibição de hora da atividade para a hora selecionada (esse manipulador é implementado na próxima seção):

    timeSelectedHandler (selectedTime);
    

Exibindo o TimePickerFragment

Agora que o DialogFragment foi implementado, é hora de instanciar o DialogFragment usando o NewInstance método de fábrica e exibi-lo invocando DialogFragment.Show:

Adicione o seguinte método a MainActivity:

void TimeSelectOnClick (object sender, EventArgs eventArgs)
{
    TimePickerFragment frag = TimePickerFragment.NewInstance (
        delegate (DateTime time)
        {
            timeDisplay.Text = time.ToShortTimeString();
        });

    frag.Show(FragmentManager, TimePickerFragment.TAG);
}

Depois TimeSelectOnClick de instanciar um TimePickerFragment, ele cria e passa um representante para um método anônimo que atualiza a exibição de hora da atividade com o valor de tempo passado. Finalmente, ele inicia o fragmento TimePicker de diálogo (via DialogFragment.Show) para exibir o TimePicker para o usuário.

No final do método, adicione a seguinte linha para anexar o manipulador de eventos ao botão PICK TIME que inicia a caixa de OnCreate diálogo:

timeSelectButton.Click += TimeSelectOnClick;

Quando o botão PICK TIME for clicado, TimeSelectOnClick será chamado para exibir o fragmento de TimePicker diálogo para o usuário.

Experimente!

Compile e execute o aplicativo. Quando você clica no botão PICK TIME , o TimePickerDialog é exibido no formato de hora padrão para a atividade (neste caso, modo AM/PM de 12 horas):

A caixa de diálogo Hora é exibida no modo AM/PM

Quando você clica em OK na caixa de diálogo, o manipulador atualiza a atividade com TextView a hora escolhida e, em TimePicker seguida, sai:

O tempo A/M é exibido no Activity TextView

Em seguida, adicione a seguinte linha de código para imediatamente após is24HourFormat é OnCreateDialog declarado e inicializado:

is24HourFormat = true;

Essa alteração força o sinalizador passado para o construtor para true que o TimePickerDialog modo de 24 horas seja usado em vez do formato de hora da Atividade de hospedagem. Quando você compilar e executar o aplicativo novamente, clique no botão PICK TIME , a TimePicker caixa de diálogo agora é exibida no formato de 24 horas:

Caixa de diálogo TimePicker no formato de 24 horas

Como o manipulador chama DateTime.ToShortTimeString para imprimir a hora na Atividade TextView, a hora ainda é impressa no formato padrão de 12 horas AM/PM.

Resumo

Este artigo explicou como exibir um TimePicker widget como uma caixa de diálogo modal pop-up de uma atividade do Android. Ele forneceu um exemplo de DialogFragment implementação e discutiu a IOnTimeSetListener interface. Este exemplo também demonstrou como o DialogFragment pode interagir com a atividade do host para exibir a hora selecionada.