Calendarios para Android

A la hora de preparar una aplicación de productividad, una de las primeros puntos que se deben mirar son las opciones de calendario que se nos ofrecen.
Así que decidí revisar la documentación para el desarrollo en Android decidí explorar la utilización del componente DatePickerDialog
Para verlo en acción solo se tendrá que crear un layout y su Activity.

El activity_main.xml mostrará un botón y dos campos de texto.

<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:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        tools:context=".MainActivity"
        android:orientation="vertical">

    <Button
            android:id="@+id/btnCalendar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/calendar" />

    <LinearLayout android:orientation="horizontal"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content">
        <TextView
                android:id="@+id/lblDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/currentDate"
                android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
                android:id="@+id/dateValue"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=""
                android:textAppearance="?android:attr/textAppearanceLarge" />
    </LinearLayout>
</LinearLayout>

Se modificará el fichero String.xml para informar los valores de los textos del layout:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name" >Tutoriales
    </string>
    <string name="action_settings" >Settings
    </string>
    <string name="currentDate" >Fecha actual(M-D-AAAA):
    </string>
    <string name="calendar" >Calendario</string>

</resources>

La pantalla que se visualizará desde el dispositivo quedará con la siguiente apariencia:
Vista activity_main.xml

Ahora se deberá crear el activity para controlar las acciones de la pantalla. Para ello se crea la clase MainActivity que extiende de Activity. La clase tendrá dos métodos onCreate que se ejecutará al acceder a la aplicación y servirá para inicializar propiedades y definir el comportamiento del botón calendar. El método showDatePickerDialog servirá para abrir la ventana modal donde se mostrará el componente datepicker.

package com.example.datepickertutorial;

import android.app.DatePickerDialog;
import android.app.Dialog;
import android.app.DialogFragment;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Locale;

public class MainActivity extends Activity {

    private TextView tvDateValue;

    private int year;
    private int month;
    private int day;

    private Activity context;

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

        tvDateValue = (TextView) findViewById(R.id.dateValue);

        context = this;
        // Definición del botón calendar
        final Button btnOpenPopup = (Button) findViewById(R.id.btnCalendar);
        btnOpenPopup.setOnClickListener(new Button.OnClickListener(){

            @Override
            /**
             * Al pulsar sobre el boton se abre la ventana modal con el componente DatePicker
             */
            public void onClick(View arg0) {
                showDatePickerDialog(arg0);
            }
        });
    }

    /**
     * Abre la ventana modal
     * @param v
     */
    public void showDatePickerDialog(View v) {
        DialogFragment newFragment = new DatePickerFragment();
        newFragment.show(context.getFragmentManager(), "datePicker");
    }


    /**
     * Clase que se utiliza para abrir la ventana modal, extiende de DialogFragment.
     *
     */
    public class DatePickerFragment extends DialogFragment
            implements DatePickerDialog.OnDateSetListener {

        @Override
        public Dialog onCreateDialog(Bundle savedInstanceState) {
            // Usar del defecto la fecha actual
            final Calendar c = Calendar.getInstance();
            try {
                // Si en algun momento se ha informado la fecha se recupera
                String format = "MM-dd-yyyy";
                SimpleDateFormat sdf = new SimpleDateFormat(format, Locale.US);
                c.setTime(sdf.parse(String.valueOf(tvDateValue.getText())));
            } catch (ParseException e) {
                // Si falla utilizaremos la fecha actual
            }

            int year = c.get(Calendar.YEAR);
            int month = c.get(Calendar.MONTH);
            int day = c.get(Calendar.DAY_OF_MONTH);

            // Create a new instance of TimePickerDialog and return it
            return new DatePickerDialog(getActivity(), this, year, month, day);
        }

        /**
         * Recupera el valor seleccionado en el componente DatePicker e inserta el valor en el
         * TextView tvDate
         *
         * @param view
         * @param year
         * @param month
         * @param day
         */
        public void onDateSet(DatePicker view, int year, int month, int day) {
            try{
                final Calendar c = Calendar.getInstance();
                c.set(year, month, day);
                String format = "MM-dd-yyyy";
                SimpleDateFormat sdf = new SimpleDateFormat(format, Locale.US);
                tvDateValue.setText(sdf.format(c.getTime()));
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

En la misma clase se definirá la clase DatePickerFragment que será la encargada de gestionar la ventana modal donde se abrirá el calendario. El método onCreateDialog se lanzará al iniciarse la ventana modal.
El método onDateSet se ejecutará al pulsar el botón Done de la ventana modal y servirá para enviar la información de la fecha seleccionada.

Por último la definición del AndroidManifest de la aplicación quedará de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.datepickertutorial"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="16" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.datepickertutorial.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Al ejecutar la aplicación y pulsar el botón Calendario se abrirá la ventana modal para seleccionar la fecha.

Vista activity_main.xml

Vista activity_main.xml

Al pulsar sobre el botón Done, recuperará la fecha y la mostrará por pantalla:

Vista activity_main.xml

La facilidad para crear una ventana modal para seleccionar una fecha es evidente, ya que prácticamente no hay que generar mucho código.

Lo que no me gusta de esta forma de ejecución es que no he encontrado la manera de añadir un botón para cancelar la selección una vez se llega a la pantalla modal.

Es por ello que he optado por elegir la opción de utilizar el widget PopupWindow que explicaré la próxima semana.

Referencia:
Guía de desarrollo Android. Pickers

Anuncios
  1. 15/08/14
    Trackback from : android blackmart alpha

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: