Crea una clase de vista

Prueba el método de Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Obtén información para trabajar con diseños en Compose.
Diseños personalizados en Compose →

Una vista personalizada bien diseñada es como cualquier otra clase bien diseñada. Encapsula un un conjunto específico de con una interfaz simple, usa la CPU y la memoria de manera eficiente, etcétera. En además de ser un clase bien diseñada, una vista personalizada debe hacer lo siguiente:

  • Cumplen con los estándares de Android.
  • Proporciona atributos con estilo personalizados que funcionen con diseños XML de Android.
  • Envía eventos de accesibilidad.
  • Ser compatible con múltiples plataformas de Android

El framework de Android proporciona un conjunto de clases base y etiquetas XML para ayudarte a crear una vista que cumpla con todos estos y los requisitos de cumplimiento. En esta lección, se analiza cómo usar el framework de Android para crear la base de datos funcionalidad de una vista .

Puedes encontrar información en Componentes de vistas personalizadas.

Crea una subclase para una vista

Todas las clases de vista definidas en el framework de Android extienden View Tu vista personalizada también puede puedes extender View directamente ahorrar tiempo extendiendo una de las vista existente subclases, como Button.

Para permitir que Android Studio interactúe con tu vista, como mínimo debes proporcionar un constructor que tome un Context y un objeto AttributeSet como parámetros. Este constructor permite que el editor de diseño cree y edite una instancia de tu vista.

Kotlin

class PieChart(context: Context, attrs: AttributeSet) : View(context, attrs)

Java

class PieChart extends View {
    public PieChart(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
}

Define atributos personalizados

Para agregar un View integrado a tu interfaz de usuario, especifícalo en un elemento XML y controlar su y el comportamiento con atributos de los elementos. También puedes agregar y aplicar estilos vistas con XML. Para Para habilitar este comportamiento en tu vista personalizada, haz lo siguiente:

  • Define atributos personalizados para tu vista en un elemento del recurso <declare-styleable> .
  • Especifica valores para los atributos en tu diseño XML.
  • Recupera valores de atributos en el tiempo de ejecución.
  • Aplica los valores de atributo recuperados a tu vista.

En esta sección, se analiza cómo definir atributos personalizados y especificar sus valores. En la siguiente sección, se aborda recuperar y aplicar los valores en el entorno de ejecución.

Para definir atributos personalizados, agrega recursos <declare-styleable> a tu proyecto. Es habitual colocar estos recursos en un res/values/attrs.xml. Aquí tienes Un ejemplo de un archivo attrs.xml: 

<resources>
   <declare-styleable name="PieChart">
       <attr name="showText" format="boolean" />
       <attr name="labelPosition" format="enum">
           <enum name="left" value="0"/>
           <enum name="right" value="1"/>
       </attr>
   </declare-styleable>
</resources>

Este código declara dos atributos personalizados, showText y labelPosition, que pertenecen a un atributo la entidad llamada PieChart. El nombre de la entidad que admite estilo es, por convención, el mismo como el nombre de la clase que define la vista personalizada. Aunque no es necesario seguir esta convención, muchos códigos populares los editores dependen de esta convención de nomenclatura para completar las instrucciones.

Una vez que definas atributos personalizados, podrás usarlos en archivos de diseño XML como los integrados atributos. El único sus atributos personalizados pertenecen a un espacio de nombres diferente. En lugar de pertenecer al espacio de nombres http://schemas.android.com/apk/res/android, pertenecen a http://schemas.android.com/apk/res/[your package name]. Por ejemplo, aquí te mostramos cómo usar la definidos para PieChart: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:custom="http://schemas.android.com/apk/res-auto">
 <com.example.customviews.charting.PieChart
     custom:showText="true"
     custom:labelPosition="left" />
</LinearLayout>

Para evitar tener que repetir el URI de espacio de nombres largo, en el ejemplo se usa un directiva xmlns. Esta directiva asigna el alias custom a el espacio de nombres http://schemas.android.com/apk/res/com.example.customviews Puedes elegir cualquier alias que desees para tu espacio de nombres.

Observa el nombre de la etiqueta XML que agrega la vista personalizada al diseño. Es el enfoque nombre calificado del elemento una clase de vista personalizada. Si tu clase de vista es interna, califícala por el nombre de la clase externa de la vista. Por ejemplo, el La clase PieChart tiene una clase interna llamada PieView. Para usar atributos personalizados de esta clase, usa la etiqueta com.example.customviews.charting.PieChart$PieView.

Aplica atributos personalizados

Cuando se crea una vista a partir de un diseño XML, se leen todos los atributos de la etiqueta XML. del recurso y se pasan al constructor de la vista como una AttributeSet Si bien es posible leer valores de AttributeSet directamente. tiene algunas desventajas:

  • No se resuelven las referencias de recursos dentro de los valores de atributos.
  • Los estilos no se aplican.

En su lugar, pasa el AttributeSet a obtainStyledAttributes() Este método devuelve un TypedArray array de valores que son sin referencias y estilo.

El compilador de recursos de Android hace mucho trabajo para que las llamadas obtainStyledAttributes() y fácil de usar. Para cada <declare-styleable> en el directorio res/, el R.java generado define un array de atributos IDs y un conjunto de constantes que definen el índice de cada atributo del array. Se usa el modelo de constantes para leer los atributos de TypedArray. Aquí te indicamos cómo hacerlo la clase PieChart lee sus atributos:

Kotlin

init {
    context.theme.obtainStyledAttributes(
            attrs,
            R.styleable.PieChart,
            0, 0).apply {

        try {
            mShowText = getBoolean(R.styleable.PieChart_showText, false)
            textPos = getInteger(R.styleable.PieChart_labelPosition, 0)
        } finally {
            recycle()
        }
    }
}

Java

public PieChart(Context context, AttributeSet attrs) {
   super(context, attrs);
   TypedArray a = context.getTheme().obtainStyledAttributes(
        attrs,
        R.styleable.PieChart,
        0, 0);

   try {
       mShowText = a.getBoolean(R.styleable.PieChart_showText, false);
       textPos = a.getInteger(R.styleable.PieChart_labelPosition, 0);
   } finally {
       a.recycle();
   }
}

Ten en cuenta que los objetos TypedArray son un recurso compartido y deben reciclarse después de su uso.

Agrega propiedades y eventos

Los atributos son una forma poderosa de controlar el comportamiento y la apariencia de las vistas, pero solo se pueden leer cuando se inicializa la vista. Para brindar un comportamiento dinámico, expone un método get de propiedad y par de métodos set para cada atributo personalizado. En el siguiente fragmento, se muestra cómo PieChart expone una propiedad. Llamada showText:

Kotlin

fun isShowText(): Boolean {
    return mShowText
}

fun setShowText(showText: Boolean) {
    mShowText = showText
    invalidate()
    requestLayout()
}

Java

public boolean isShowText() {
   return mShowText;
}

public void setShowText(boolean showText) {
   mShowText = showText;
   invalidate();
   requestLayout();
}

Observa que setShowText llama a invalidate(). y requestLayout(). Estas llamadas son cruciales para garantizar que la vista se comporte de manera confiable. Necesitas para invalidar la vista después de cualquier cambio en sus propiedades que pueda modificar su la apariencia, de modo que el sistema sabe que debe volver a dibujarse. Del mismo modo, deberás solicitar un diseño nuevo si una propiedad cambia de manera que podrían afectar el tamaño o la forma de la vista. Olvidar estas llamadas a los métodos puede causar difícil de encontrar entre insectos.

Las vistas personalizadas también deben admitir objetos de escucha de eventos para comunicar eventos importantes. Para instancia, PieChart expone un evento personalizado llamado OnCurrentItemChanged para notificar a los objetos de escucha que el usuario rotó un gráfico circular para enfocarse en una nueva porción circular.

Es fácil olvidarse de exponer propiedades y eventos, en especial cuando eres el único usuario. de la vista personalizada. Dedicar tiempo a definir cuidadosamente la interfaz de la vista reduce el mantenimiento futuro. de los costos. Una buena regla a seguir es siempre exponer cualquier propiedad que afecte la visibilidad la apariencia o el comportamiento de tu vista personalizada.

Diseño para la accesibilidad

Tu vista personalizada debe admitir una amplia variedad de usuarios. Esto incluye a los usuarios con discapacidades que y les impiden ver o usar una pantalla táctil. Para ayudar a los usuarios con discapacidades, haz lo siguiente:

  • Etiqueta tus campos de entrada con el android:contentDescription. .
  • Llama a sendAccessibilityEvent() para enviar eventos de accesibilidad cuando corresponda.
  • Admite controles alternativos, como un pad direccional o una bola de seguimiento.

Para obtener más información sobre cómo crear vistas accesibles, consulta Cómo mejorar la accesibilidad de las apps