Programación Android, Creación de un control personalizado

Control personalizado
creación de un control personalizado

En Android existe una gran cantidad de controles que podemos utilizar para conseguir realizar las interfaces que necesitemos, pero una de las posibilidades que nos ofrece es la de crear nuestros propios controles personalizados, de manera que en un único control, creado por nosotros mismos, podamos crear múltiples controles. El clásico ejemplo es el de la gestión de una ventana de login, en la que existen dos campos en los que escribir texto (usuario y contraseña), y un botón para aceptar el login.

En Internet pueden encontrarse muchos tutoriales sobre la creación de un control personalizado, y muchos de ellos utilizando el propio ejemplo del login para explicarlo. Sin embargo siempre hemos echado en falta un elemento que nos gustaría explicar en este tutorial. Esto es la posibilidad de configurar los eventos onClick de los elementos internos de nuestro control personalizado utilizando atributos en xml. Como sabéis, desde xml podemos configurar el atributo android:onClick=””, dándole como valor el nombre del método que debe lanzarse, y que posteriormente tenemos que codificar en nuestra Activity en Java. Sin embargo este evento, si lo escribimos tal cual sobre nuestro control, se lanzará cuando se pulse sobre cualquier zona del control, y no tendríamos la capacidad de lanzarlo únicamente cuando se pulsara, por ejemplo, el botón para aceptar el login antes citado.

Creación de un control personalizado

Como el ejemplo del login está muy utilizado, nosotros vamos a crear un control diferente, en el que pondremos un botón a cada lado, y entre ambos botones posicionaremos un texto, que irá cambiando a medida que se pulse uno u otro botón. En primer lugar crearemos el xml con el layout que dará forma a nuestro control personalizado:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="horizontal">

    <Button
        android:id="@+id/btPREV_SLIDER_CUSTOMER_DETAILS"
        android:background="@android:color/transparent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="<"/>

    <TextView
        android:id="@+id/tvSliderText_SLIDER_CUSTOMER_DETAILS"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:maxLines="1"
        android:gravity="center"/>

    <Button
        android:id="@+id/btNext_SLIDER_CUSTOMER_DETAILS"
        android:background="@android:color/transparent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=">"/>

</LinearLayout>

Como hemos dicho, tenemos un botón en cada lado, a los que hemos dado un fondo transparente, y entre ambos botones hemos colocado un TextView que contendrá el texto que queramos mostrar.
Leer más…