Se usó la API de Cloud Translation para traducir esta página.

Cómo crear componentes de vistas personalizadas

Android ofrece un modelo componentizado para compilar la IU que es sofisticado y potente, y que se basa en las clases de diseño fundamentales View y ViewGroup. La plataforma incluye una variedad de subclases View y ViewGroup compiladas previamente, llamadas widgets y diseños, respectivamente, que puedes usar para construir tu IU.

Una lista parcial de widgets disponibles incluye Button, TextView, EditText, ListView, CheckBox, RadioButton, Gallery y Spinner, así como los de propósito más especiales AutoCompleteTextView, ImageSwitcher y TextSwitcher.

Entre los diseños disponibles, se encuentran LinearLayout, FrameLayout, RelativeLayout y otros. Para ver más ejemplos, consulta Diseños comunes.

Si ninguno de los widgets o diseños precompilados satisface tus necesidades, puedes crear tu propia subclase de View. Si solo necesitas realizar pequeños ajustes en un widget o diseño existente, puedes crear una subclase del widget o el diseño y anular sus métodos.

Crear tus propias subclases de View te brinda un control preciso sobre el aspecto y la función de un elemento de pantalla. Para tener una idea del control que obtienes con las vistas personalizadas, a continuación, se muestran algunos ejemplos de lo que puedes hacer con ellas:

Puedes crear un tipo de View con un renderizado completamente personalizado, por ejemplo, un "control de volumen", renderizado con gráficos 2D, que se asemeja a un control electrónico analógico.
Puedes combinar un grupo de componentes de View en un solo componente nuevo, quizás para crear algo como un cuadro combinado (una combinación de lista emergente y campo de texto de entrada libre), un control de selección de panel doble (un panel izquierdo y derecho con una lista en cada uno en el que puedes reasignar qué elemento está en esa lista), etcétera.
Puedes anular la forma en que se renderiza en la pantalla un componente EditText. La app de ejemplo NotePad usa esto para crear una página de bloc de notas alineada.
Puedes capturar otros eventos, como presionar teclas, y controlarlos de manera personalizada, como para un juego.

En las siguientes secciones, se explica cómo crear vistas personalizadas y usarlas en tu aplicación. Para obtener información de referencia detallada, consulta la clase View.

El enfoque básico

A continuación, se muestra una descripción general de alto nivel de lo que necesitas saber para crear tus propios componentes de View:

Extiende una clase o subclase View existente con tu propia clase.
Anula algunos de los métodos de la superclase. Los métodos de la superclase que se deben anular comienzan con on, por ejemplo, onDraw(), onMeasure() y onKeyDown(). Esto es similar a los eventos on en Activity o ListActivity, que anulas para el ciclo de vida y otros hooks de funcionalidad.
Usa tu nueva clase de extensión. Cuando termines, puedes usar tu clase de extensión nueva en lugar de la vista en la que se basó.

Sugerencia: Las clases de extensión se pueden definir como clases internas dentro de las actividades que las usan. Esto es útil, porque controla el acceso a ellos, pero no es necesario. Por ejemplo, es posible que quieras crear un nuevo View público para un uso más amplio en tu aplicación.

Componentes completamente personalizados

Puedes crear componentes gráficos completamente personalizados que tengan el aspecto que quieras. Quizás quieras un vúmetro gráfico que parezca un viejo medidor analógico o una vista de texto para cantar a coro en la que una pelota rebota sobre las palabras mientras cantas junto con una máquina de karaoke. Es posible que quieras algo que los componentes integrados no puedan hacer, sin importar cómo los combines.

Por suerte, puedes crear componentes que se vean y se comporten de la manera que desees, limitados solo por tu imaginación, el tamaño de la pantalla y la potencia de procesamiento disponible, teniendo en cuenta que tu aplicación podría ejecutarse en un dispositivo con mucha menos energía que tu estación de trabajo de escritorio.

Para crear un componente completamente personalizado, ten en cuenta lo siguiente:

La vista más genérica que puedes extender es View, por lo que, por lo general, debes comenzar extendiendo esto para crear tu nuevo supercomponente.
Puedes proporcionar un constructor, que puede tomar atributos y parámetros del XML, y consumir tus propios atributos y parámetros, como el color y el rango del vúmetro o el ancho y el amortiguamiento de la aguja.
Es probable que quieras crear tus propios objetos de escucha de eventos, descriptores de acceso de propiedades y modificadores, así como un comportamiento más sofisticado en tu clase de componente.
Es casi seguro que quieras anular onMeasure() y que también debas anular onDraw() si quieres que el componente muestre algo. Si bien ambos tienen un comportamiento predeterminado, la onDraw() predeterminada no hace nada, y la onMeasure() predeterminada siempre establece un tamaño de 100 x 100, que es probable que no desees.
También puedes anular otros métodos on, según sea necesario.

Cómo extender onDraw() y onMeasure()

El método onDraw() entrega un Canvas en el que puedes implementar lo que desees: gráficos 2D, otros componentes estándares o personalizados, texto con estilo o lo que se te ocurra.

Nota: Esto no se aplica a los gráficos 3D. Si deseas usar gráficos 3D, extiende SurfaceView en lugar de View y dibuja desde un subproceso separado. Consulta la muestra de GLSurfaceViewActivity para obtener más detalles.

onMeasure() está un poco más involucrado. onMeasure() es una parte crítica del contrato de renderización entre tu componente y su contenedor. Se debe anular onMeasure() para informar de manera eficiente y precisa las mediciones de sus partes contenidas. Esto se vuelve un poco más complejo debido a los requisitos de límite del elemento superior, que se pasan al método onMeasure(), y por el requisito de llamar al método setMeasuredDimension() con el ancho y la altura medidos una vez que se calculan. Si no llamas a este método desde un método onMeasure() anulado, se generará una excepción en el momento de la medición.

En un nivel alto, la implementación de onMeasure() se ve de la siguiente manera:

Se llama al método onMeasure() anulado con especificaciones de ancho y altura, que se tratan como requisitos de las restricciones de las medidas de ancho y alto que produzcas. Los parámetros widthMeasureSpec y heightMeasureSpec son códigos de número entero que representan dimensiones. Puedes encontrar una referencia completa sobre los tipos de restricciones que pueden requerir estas especificaciones en la documentación de referencia en View.onMeasure(int, int). En esta documentación de referencia, también se explica la operación de medición completa.
El método onMeasure() de tu componente calcula el ancho y la altura de medición, que son necesarios para renderizar el componente. Debe tratar de mantenerse dentro de las especificaciones pasadas, aunque es posible que las supere. En este caso, el elemento superior puede elegir qué hacer, por ejemplo, recortar, desplazarse, mostrar una excepción o pedirle a onMeasure() que vuelva a intentarlo, quizás con diferentes especificaciones de medición.
Cuando se calculen el ancho y la altura, llama al método setMeasuredDimension(int width, int height) con las medidas calculadas. De lo contrario, se generará una excepción.

Este es un resumen de otros métodos estándar que el framework requiere en las vistas:

Categoría	Métodos	Descripción
Creación	Constructores	Existe una forma del constructor al que se llama cuando se crea la vista a partir de código y un formulario al que se llama cuando la vista se aumenta desde un archivo de diseño. En el segundo formulario, se analizan y se aplican atributos definidos en el archivo de diseño.
Creación	`onFinishInflate()`	Se llama después de que se aumenta una vista y todos sus elementos secundarios desde XML.
Diseño	`onMeasure(int, int)`	Se llama para determinar los requisitos de tamaño para esta vista y todos sus elementos secundarios.
	`onLayout(boolean, int, int, int, int)`	Se llama cuando esta vista debe asignar un tamaño y una posición a todos sus elementos secundarios.
	`onSizeChanged(int, int, int, int)`	Se llama cuando se cambia el tamaño de esta vista.
Dibujo	`onDraw(Canvas)`	Se llama cuando la vista debe renderizar su contenido.
Procesamiento de eventos	`onKeyDown(int, KeyEvent)`	Se llama cuando se produce un evento de presión de tecla.
	`onKeyUp(int, KeyEvent)`	Se llama cuando se produce un evento de activación de tecla.
	`onTrackballEvent(MotionEvent)`	Se llama cuando se produce un evento de movimiento de la bola de seguimiento.
	`onTouchEvent(MotionEvent)`	Se llama cuando se produce un evento de movimiento de la pantalla táctil.
Enfoque	`onFocusChanged(boolean, int, Rect)`	Se llama cuando la vista gana o pierde el foco.
Enfoque	`onWindowFocusChanged(boolean)`	Se llama cuando la ventana que contiene la vista gana o pierde el foco.
Adjuntar	`onAttachedToWindow()`	Se llama cuando se adjunta la vista a una ventana.
	`onDetachedFromWindow()`	Se llama cuando se separa la vista de su ventana.
	`onWindowVisibilityChanged(int)`	Se llama cuando se cambia la visibilidad de la ventana que contiene la vista.

Controles compuestos

Si no quieres crear un componente completamente personalizado, sino que quieres armar un componente reutilizable que conste de un grupo de controles existentes, lo mejor es crear un componente compuesto (o control compuesto). En resumen, esto reúne una serie de vistas o controles atómicos más en un grupo lógico de elementos que se pueden tratar como una sola cosa. Por ejemplo, un cuadro combinado puede ser una combinación de un campo EditText de una sola línea y un botón adyacente con una lista emergente adjunta. Si el usuario presiona el botón y selecciona algo de la lista, se propaga el campo EditText, pero también puede escribir algo directamente en EditText si lo prefiere.

En Android, hay otras dos vistas disponibles para hacerlo: Spinner y AutoCompleteTextView. En cualquier caso, este concepto de cuadro combinado es un buen ejemplo.

Para crear un componente compuesto, haz lo siguiente:

Al igual que con un Activity, usa el enfoque declarativo (basado en XML) para crear los componentes contenidos o anidalos de manera programática desde el código. El punto de partida habitual es un Layout de algún tipo, así que crea una clase que extienda un Layout. En el caso de un cuadro combinado, puedes usar un LinearLayout con orientación horizontal. Puedes anidar otros diseños en el interior, de modo que el componente compuesto pueda ser complejo y estructurado de forma arbitraria.
En el constructor de la nueva clase, toma los parámetros que espera la superclase y pásalos primero al constructor de la superclase. Luego, puedes configurar las otras vistas para usar dentro de tu componente nuevo. Aquí es donde creas el campo EditText y la lista emergente. Puedes ingresar tus propios atributos y parámetros en el XML que el constructor pueda extraer y usar.
De forma opcional, crea objetos de escucha para los eventos que puedan generar tus vistas contenidas. Un ejemplo es un método de objeto de escucha para que el objeto de escucha de clics de elementos de lista actualice el contenido de EditText si se realiza una selección de lista.
De forma opcional, crea tus propias propiedades con descriptores de acceso y modificadores. Por ejemplo, permite que se establezca inicialmente el valor de EditText en el componente y consulta su contenido cuando sea necesario.
De manera opcional, anula onDraw() y onMeasure(). Por lo general, no es necesario cuando se extiende un Layout, ya que el diseño tiene un comportamiento predeterminado que probablemente funcione bien.
De manera opcional, anula otros métodos on, como onKeyDown(), por ejemplo, para elegir ciertos valores predeterminados de la lista emergente de un cuadro combinado cuando se presiona una tecla determinada.

Usar un Layout como base de un control personalizado tiene ventajas, incluidas las siguientes:

Puedes especificar el diseño usando los archivos en formato XML declarativos, al igual que con una pantalla de actividad, o puedes crear vistas de manera programática y anidarlas en el diseño desde tu código.
Los métodos onDraw() y onMeasure(), junto con la mayoría de los otros métodos on, tienen un comportamiento adecuado, por lo que no tienes que anularlos.
Puedes crear rápidamente vistas compuestas arbitrariamente complejas y reutilizarlas como si fueran un solo componente.

Cómo modificar un tipo de vista existente

Si hay un componente similar al que deseas, puedes extenderlo y anular el comportamiento que deseas cambiar. Puedes hacer todo lo que haces con un componente completamente personalizado, pero si comienzas con una clase más especializada en la jerarquía View, podrás obtener algún comportamiento que haga lo que quieras de forma gratuita.

Por ejemplo, la app de ejemplo NotePad demuestra muchos aspectos del uso de la plataforma de Android. Entre ellos, está la extensión de una vista EditText para crear un bloc de notas alineado. Este no es un ejemplo perfecto, y las APIs para hacerlo podrían cambiar, aunque demuestra los principios.

Si aún no lo hiciste, importa el ejemplo del Bloc de notas a Android Studio o consulta la fuente mediante el vínculo proporcionado. En particular, consulta la definición de LinedEditText en el archivo NoteEditor.java.

A continuación, encontrarás algunos aspectos que debes tener en cuenta en este archivo:

La definición
La clase se define con la siguiente línea:
public static class LinedEditText extends EditText

LinedEditText se define como una clase interna dentro de la actividad NoteEditor, pero es pública para que se pueda acceder a ella como NoteEditor.LinedEditText desde fuera de la clase NoteEditor.

Además, LinedEditText es static, lo que significa que no genera los llamados "métodos sintéticos" que le permiten acceder a los datos de la clase superior. Esto significa que se comporta como una clase independiente en lugar de como algo muy relacionado con NoteEditor. Esta es una forma más limpia de crear clases internas si no necesitan acceso al estado desde la clase externa. Mantiene la clase generada pequeña y permite que se use fácilmente desde otras clases.

LinedEditText extiende EditText, que es la vista que se personalizará en este caso. Cuando termines, la clase nueva puede reemplazar a una vista de EditText normal.
Inicialización de la clase
Como siempre, se llama primero a la superclase. Este no es un constructor predeterminado, pero es uno parametrizado. Se crea EditText con estos parámetros cuando se aumenta desde un archivo de diseño XML. Por lo tanto, el constructor también debe tomarlas y pasarlas al constructor de la superclase.
Métodos anulados
En este ejemplo, solo se anula el método onDraw(), pero es posible que debas anular otros cuando crees tus propios componentes personalizados.

Para esta muestra, anular el método onDraw() te permite pintar las líneas azules en el lienzo de la vista EditText. El lienzo se pasa al método onDraw() anulado. Se llama al método super.onDraw() antes de que finalice. Se debe invocar el método de la superclase. En este caso, debes invocarlo al final después de pintar las líneas que deseas incluir.
Componente personalizado
Ahora tienes tu componente personalizado, pero ¿cómo puedes usarlo? En el ejemplo del Bloc de notas, se usa el componente personalizado directamente desde el diseño declarativo. Por lo tanto, debes buscar note_editor.xml en la carpeta res/layout:
```
<view xmlns:android="http://schemas.android.com/apk/res/android"
    class="com.example.android.notepad.NoteEditor$LinedEditText"
    android:id="@+id/note"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:padding="5dp"
    android:scrollbars="vertical"
    android:fadingEdge="vertical"
    android:gravity="top"
    android:textSize="22sp"
    android:capitalize="sentences"
/>
```
El componente personalizado se crea como una vista genérica en el XML y la clase se especifica con el paquete completo. Se hace referencia a la clase interna que defines con la notación NoteEditor$LinedEditText, que es una forma estándar de hacer referencia a las clases internas en el lenguaje de programación Java.

Si tu componente de vista personalizada no está definido como una clase interna, puedes declarar el componente de vista con el nombre del elemento XML y excluir el atributo class. Por ejemplo:
```
<com.example.android.notepad.LinedEditText
  id="@+id/note"
  ... />
```
Observa que la clase LinedEditText ahora es un archivo de clase independiente. Cuando la clase está anidada en la clase NoteEditor, esta técnica no funciona.

Los otros atributos y parámetros de la definición son los que se pasan al constructor de componentes personalizados y, luego, se pasan al constructor EditText, por lo que son los mismos que usas para una vista EditText. También puedes agregar tus propios parámetros.

Crear componentes personalizados es tan complicado como desees.

Un componente más sofisticado puede anular aún más métodos on e introducir sus propios métodos auxiliares, lo que permite personalizar de manera sustancial sus propiedades y comportamiento. El único límite es tu imaginación y lo que necesitas que haga el componente.