Creare un corso di visualizzazione

Prova Compose

Jetpack Compose è il toolkit per la UI consigliato per Android. Scopri come utilizzare i layout in Crea.

Layout personalizzati in Composizione →

Una vista personalizzata ben progettata è come qualsiasi altro corso ben progettato. Incapsula un insieme specifico di funzionalità con un'interfaccia semplice, utilizza CPU e memoria in modo efficiente e così via. Oltre a essere una classe ben progettata, una vista personalizzata deve:

• Rispettare gli standard Android.
• Fornisci attributi personalizzabili che funzionano con i layout XML di Android.
• Invia eventi di accessibilità.
• Essere compatibile con più piattaforme Android.

Il framework Android fornisce un insieme di classi di base e tag XML per aiutarti a creare una visualizzazione che soddisfi tutti questi requisiti. Questa lezione spiega come utilizzare il framework Android per creare la funzionalità principale di una classe di visualizzazione.

Puoi trovare ulteriori informazioni in Componenti della visualizzazione personalizzata.

Sottoclassificare una visualizzazione

Tutte le classi di visualizzazione definite nel framework Android estendono View. La tua visualizzazione personalizzata può anche estendere View direttamente oppure puoi risparmiare tempo estendendo una delle sottoclassi di visualizzazione esistenti, ad esempio Button.

Per consentire ad Android Studio di interagire con la tua visualizzazione, devi fornire almeno un costruttore che accetti un oggetto Context e un oggetto AttributeSet come parametri. Questo costruttore consente all'editor del layout di creare e modificare un'istanza della visualizzazione.

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

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

Definisci gli attributi personalizzati

Per aggiungere un View integrato all'interfaccia utente, specificalo in un elemento XML e controllane l'aspetto e il comportamento con gli attributi dell'elemento. Puoi anche aggiungere e formattare viste personalizzate utilizzando XML. Per attivare questo comportamento nella visualizzazione personalizzata, procedi nel seguente modo:

• Definisci gli attributi personalizzati per la tua visualizzazione in un elemento risorsa <declare-styleable> .
• Specifica i valori per gli attributi nel layout XML.
• Recupera i valori degli attributi in fase di runtime.
• Applica i valori degli attributi recuperati alla visualizzazione.

Questa sezione spiega come definire gli attributi personalizzati e specificarne i valori. La sezione successiva tratta il recupero e l'applicazione dei valori in fase di runtime.

Per definire attributi personalizzati, aggiungi risorse <declare-styleable> al tuo progetto. È consuetudine inserire queste risorse in un file res/values/attrs.xml. Ecco un esempio di file 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>

Questo codice dichiara due attributi personalizzati, showText e labelPosition, che appartengono a un'entità con stile denominata PieChart. Per convenzione, il nome dell'entità con stile è lo stesso della classe che definisce la visualizzazione personalizzata. Sebbene non sia necessario seguire questa convenzione, molti editor di codice popolari si basano su questa convenzione di denominazione per fornire il completamento delle istruzioni.

Una volta definiti gli attributi personalizzati, puoi utilizzarli nei file XML di layout proprio come gli attributi integrati. L'unica differenza è che gli attributi personalizzati appartengono a uno spazio dei nomi diverso. Anziché appartenere allo spazio dei nomi http://schemas.android.com/apk/res/android, appartengono a http://schemas.android.com/apk/res/[your package name]. Ad esempio, ecco come utilizzare gli attributi definiti per 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>

Per evitare di dover ripetere l'URI dello spazio dei nomi lungo, l'esempio utilizza un'istruzione xmlns. Questa direttiva assegna l'alias custom allo spazio dei nomi http://schemas.android.com/apk/res/com.example.customviews. Puoi scegliere qualsiasi alias per lo spazio dei nomi.

Prendi nota del nome del tag XML che aggiunge la visualizzazione personalizzata al layout. È il nome completo della classe della vista personalizzata. Se la classe della visualizzazione è una classe interna, qualificala ulteriormente con il nome della classe esterna della visualizzazione. Ad esempio, la classe PieChart ha una classe interna chiamata PieView. Per utilizzare gli attributi personalizzati di questa classe, utilizza il tag com.example.customviews.charting.PieChart$PieView.

Applicare gli attributi personalizzati

Quando una visualizzazione viene creata da un layout XML, tutti gli attributi nel tag XML vengono letti dal bundle di risorse e passati al costruttore della visualizzazione come AttributeSet. Sebbene sia possibile leggere i valori direttamente da AttributeSet, questa operazione presenta alcuni svantaggi:

• I riferimenti alle risorse all'interno dei valori degli attributi non vengono risolti.
• Gli stili non vengono applicati.

Trasferisci invece AttributeSet a obtainStyledAttributes(). Questo metodo restituisce un array TypedArray di valori già dereferenzati e formattati.

Il compilatore di risorse Android svolge molte attività per semplificare la chiamata di obtainStyledAttributes(). Per ogni risorsa <declare-styleable> nella directory res/, R.java generato definisce sia un array di ID attributo sia un insieme di costanti che definiscono l'indice per ogni attributo nell'array. Utilizzi le costanti predefinite per leggere gli attributi da TypedArray. Ecco come la classe PieChart legge i suoi attributi:

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()
        }
    }
}

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();
   }
}

Tieni presente che gli oggetti TypedArray sono una risorsa condivisa e devono essere riciclati dopo l'uso.

Aggiungere proprietà ed eventi

Gli attributi sono un modo efficace per controllare il comportamento e l'aspetto delle visualizzazioni, ma possono essere letti solo quando la visualizzazione viene inizializzata. Per fornire un comportamento dinamico, esponi una coppia di metodi getter e setter per ogni attributo personalizzato. Il seguente snippet mostra come PieChart espone una proprietà denominata showText:

fun isShowText(): Boolean {
    return mShowText
}

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

public boolean isShowText() {
   return mShowText;
}

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

Tieni presente che setShowText chiama invalidate() e requestLayout(). Queste chiamate sono fondamentali per garantire che la visualizzazione si comporti in modo affidabile. Devi invalidare la visualizzazione dopo qualsiasi modifica alle relative proprietà che potrebbe cambiarne l'aspetto, in modo che il sistema sappia che deve essere ridisegnata. Allo stesso modo, devi richiedere un nuovo layout se una proprietà cambia in modo che potrebbe influire sulle dimensioni o sulla forma della visualizzazione. Dimenticare queste chiamate al metodo può causare bug difficili da trovare.

Le visualizzazioni personalizzate devono supportare anche i listener di eventi per comunicare eventi importanti. Ad esempio, PieChart espone un evento personalizzato chiamato OnCurrentItemChanged per comunicare ai listener che l'utente ha ruotato il grafico a torta per concentrarsi su una nuova sezione.

È facile dimenticarsi di esporre proprietà ed eventi, soprattutto se sei l'unico utente della visualizzazione personalizzata. Se ti prendi il tempo di definire con attenzione l'interfaccia della visualizzazione, ridurrai i costi di manutenzione futuri. Una buona regola da seguire è quella di esporre sempre qualsiasi proprietà che influisce sull'aspetto o sul comportamento visibile della visualizzazione personalizzata.

Progettazione per l'accessibilità

La visualizzazione personalizzata deve supportare un'ampia gamma di utenti. Ciò include gli utenti con disabilità che impediscono loro di vedere o utilizzare un touchscreen. Per supportare gli utenti con disabilità, fai quanto segue:

• Etichetta i campi di input utilizzando l'attributo android:contentDescription.
• Invia eventi di accessibilità chiamando sendAccessibilityEvent() quando opportuno.
• Supportare controller alternativi, come un D-pad o una trackball.

Per saperne di più sulla creazione di visualizzazioni accessibili, consulta Rendere le app più accessibili.