viernes, 11 de febrero de 2011

Crear una Vista Personalizada en Android

Que tal, en esta ocasión les quiero compartir la manera en la que podemos crear una vista personalizada para una aplicación Android. Ya hemos comentado en algunas ocasiones sobre como construir vistas y lo que estas son (pueden ver posts pasados para recordar un poco). Básicamente una Vista es algo que ocupa espacio en pantalla en una aplicación, y puede haber infinidad de vistas, por ejemplo Botones, Combos, etc. o también existen los grupos de vistas (ViewGroup) los cuales son vistas especiales que almacenan otras vistas dentro (o las agrupan), mas sin embargo todos estos diferentes objetos extienden un mismo objeto padre que es la vista (View). Ya con estas bases podemos deducir que si nosotros creamos nuestro propio objeto que extienda de View o ViewGroup puede ser interpretado y desplegado por el sistema, lo mas común es extender un objeto como un Boton, o un TableLayout para crear nuestras propias vistas ya que de otra manera si extendemos directamente View entramos en código un poco complejo como dibujar en pantalla por medio del Canvas y eso, por lo tanto lo mas sencillo y rápido (y lo que les quiero mostrar en este post) es como crear nuestra propia vista basándonos en una preexistente. En este ejemplo les quiero mostrar la manera de hacer una vista muy facil pero ampliamente usada.
La mayoría de los developers (si no es que todos yo creo) nos hemos topado con esta situación, "Necesitas crear un formulario para llenar datos y enviarlos a algún lado" por lo tanto necesitas poner una etiqueta describiendo lo que necesitas llenar, seguido de un campo donde el usuario pueda escribir el dato. Algo mas o menos así:
Normalmente necesitaríamos un TextView (etiqueta) que almacenara la descripción del campo necesario, el Nombre en este caso, y un EditText (campo de entrada) donde el usuario pueda introducir los datos, ahora imaginen que necesitamos 10, 20 o 30 campos como este en nuestro formulario, nuestro archivo de layout crecería bastante simplemente en estar definiendo los atributos para cada uno de las etiquetas y campos de entrada, es por esto que podemos crear una vista personalizada que englobe estos dos campos en uno solo. Lo primero que necesitaríamos hacer seria crear nuestro archivo xml de layout que utilizaríamos como base, este se vería mas o menos así:


Como ven estamos tomando un LinearLayout como base para generar nuestra nueva vista, estamos definiendo un punto de partida para nuestra nueva clase, ahora lo que necesitamos hacer es crear nuestra nueva vista y hacer uso de este archivo XML, lo mas sencillo es extender una vista ya establecida y no directamente la clase View o ViewGroup, para fines de este ejemplo tomaremos como base un LinearLayout pero lo mismo aplicaría para cualquier vista que ustedes quieran. Por lo tanto nuestra nueva clase se vería de esta manera.
y listo como verán lo único que hacemos es inflar nuestro layout base y asignar ciertos parámetros a nuestras vistas internas, mas sin embargo nuestra vista puede ser tan compleja como nosotros queramos, podemos dibujar, agregar fondos de animados a la vista, etc. cualquier cosa creativa que necesiten, solo recuerden que entre mas compleja sea nuestra vista mas tiempo tardara nuestra aplicación en inflarla, haciendo que el usuario espere en una horrorosa pantalla negra o podemos agregar alguna splashscreen al cargar nuestra vista. Para finalizar lo único que necesitaríamos en nuestro layout principal, el cual se agregara a una actividad, es agregar nuestra nueva vista. Este es un ejemplo de como quedaría nuestro archivo de layout para nuestra actividad principal.
Recuerdan que tenemos un método dentro de nuestra vista que busca por los atributos "text" y "default_input"?, los podemos agregar en nuestro archivo xml y serán reconocidos por nuestra vista al momento de ser construida. Ademas pueden repetir esta vista cuantas veces sea necesario para crear su
formulario (espero y en otro post poder revisar como crear un formulario completo). ya solo falta a nuestra actividad principal llamar el método setContentView de esta manera (nuestro layout principal se llama main).
setContentView(R.layout.main)
Espero y este breve tutorial les aya servido de ayuda para crear nuevas y geniales vistas para sus aplicaciones. No olviden dejar sus comentarios y si necesitan el codigo me pueden decir o mandar un mail y con mucho gusto les envió este pequeño proyecto,  saludos a todos.
Asi se veria nuestra vista en una aplicacion:


3 comentarios:

  1. Fue muy instructivo el tutorial que has montado, la verdad estuve buscando un buen rato sobre el funcionamiento de LayoutInflater para cuando se extendia un vista como LinearLayout y no encontraba nada. Programé tu ejemplo y funciono perfecto, le hice un par de metodos a la clase FieldInput para modificar backgrounds y todo andubo bien =).

    Una grata sorpresa tu blog.

    ResponderEliminar
  2. funciono perfectamente (y)
    quizas haya una pequeña confusión allí en tú código
    entrada_defecto es la variable defualt_input que colocas en el archivo xml
    despues lo demàs funciona perfectamente
    gracias (y)

    ResponderEliminar
    Respuestas
    1. Graias por tu comentario Miguel. Muy cierto tu anotacion. Saludos

      Eliminar