Edición de Qdadas

El siguiente paso que he dado es la creación de los fragments encargados de la edición de las qdadas por parte del usuario, que es lo primordial en la app. Para ello hice uso de un ViewPager que permite en la misma Activity definir distintas secciones (mediante fragments) poniendo el estilo tan propio de la versión 4 de Android en adelante como es la pantalla divida en pestañas. Además le aplique un scroll lateral para que se pueda navegar no solo por las pestañas sino también arrastrando lateralmente entre los fragments. Dividí la edición de qdadas en tres pestañas:

  • Información General: Aquí irán los datos básicos como el Título, la Descripción o la Dirección (que en un futuro la creare de forma más compleja para que la experiencia de usuario sea total con posibilidad de autocompletado y manipulación de un Mapa 3D)
  • Fechas: Este fragment permite la inclusión de distintas fechas para la Qdada, distinguiendo unívocamente la aplicación de otras que puedan ser similares, ya que esta funcionalidad de matching de fechas es nuevo.
  • Invitados: Que serán las personas que el creador de la qdada invite a la misma, esto se realizará usando el SDK de Facebook para Android y permitiendo conocer los amigos de esa persona que tengan instalada la app para filtrarlos y poder seleccionarlos e invitarlos.

El Fragment de Información General, simplemente cuanto con varios EditText y un fragment embebido para representar un mapa mediante Google Play Services y el nuevo SDK de Google Maps en su versión 2. Para conocer todo lo necesario que tuve que realizar para configurar esto, podemos seguir el tutorial de sgoliver, página por cierto muy recomendada para aprender Android desde nivel básico a nivel avanzado. Y totalmente en castellano. De manera que un primer borrador visual del fragment quedó como se muestra:

UI de la Pestaña o Fragment de Edición de la Info General de la Qdada

UI de la Pestaña o Fragment de Edición de la Info General de la Qdada

 

El diseño del Fragment de las fechas es una simple ListView que muestra de una forma sencilla las fechas añadidas así como un botón para cada una de estas que sirve para eliminar una fecha por si nos equivocamos. En la parte inferior de la pantalla se muestra un botón que servirá para añadir una nueva fecha, que está asociado a un Dialog (o PopUp) que permite elegir fecha y hora. Para esto último se hizo uso de una libreria externa open source que es la que utilizan otras apps como Google Calendar para Android.

ListView de la edición de Fechas

ListView de la edición de Fechas

DateTime Picker utilizado en el momento de selección de Fecha

DateTime Picker utilizado en el momento de selección de Fecha

 

DateTime Picker utilizado en el momento de la Selección de Hora

DateTime Picker utilizado en el momento de la Selección de Hora

Por último para la selección de invitados se usó un ListView donde se muestra su imagen de perfil y su nombre completo en Facebook así como un botón asociado a cada item que permite borrar un invitado por si nos equivocamos al seleccionarlo. Además se asoció todo con un fragment interno del SDK de Facebook que permite seleccionar los usuarios de forma transparente y predefinida.

ListView que muestra los usuarios invitados a la Qdada

ListView que muestra los usuarios invitados a la Qdada

Fragment predefinido del SDK de Facebook que se ha usado para la selección de invitados a la Qdada.

Y hasta aquí esta entrada. El código correspondiente a todo esto, como siempre os dejo, esta en el siguiente commit.

Anuncios

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