Creare un corso di visualizzazione

Prova la modalità Scrivi
Jetpack Compose è il toolkit dell'interfaccia utente consigliato per Android. Scopri come utilizzare i layout in Compose.

Una visualizzazione personalizzata ben progettata è come qualsiasi altra classe ben progettata. 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 visualizzazione personalizzata deve:

  • Sono conformi agli standard Android.
  • Fornisci attributi di stile personalizzati che funzionano con i layout XML di Android.
  • Invia eventi di accessibilità.
  • Essere compatibile con diverse 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 illustra come utilizzare il framework Android per creare la funzionalità di base di una classe di visualizzazione.

Puoi trovare ulteriori informazioni nella sezione Componenti delle viste personalizzate.

Sottoclasse una vista

Tutte le classi di vista 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, come 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 di layout di creare e modificare un'istanza della 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);
    }
}

Definisci attributi personalizzati

Per aggiungere un elemento View integrato all'interfaccia utente, specificalo in un elemento XML e controllane l'aspetto e il comportamento tramite gli attributi dell'elemento. Puoi anche aggiungere visualizzazioni personalizzate e definire gli stili utilizzando XML. Per attivare questo comportamento nella visualizzazione personalizzata:

  • Definisci attributi personalizzati per la tua vista 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 alla visualizzazione i valori degli attributi recuperati.

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

Per definire attributi personalizzati, aggiungi risorse <declare-styleable> al 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 corrisponde al nome della classe che definisce la visualizzazione personalizzata. Sebbene non sia necessario seguire questa convenzione, molti editor di codice più diffusi dipendono da 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 istruzione 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.

Osserva il nome del tag XML che aggiunge la visualizzazione personalizzata al layout. È il nome completo della classe della visualizzazione personalizzata. Se la tua classe di visualizzazione è una classe interna, qualificala ulteriormente con il nome della classe esterna della vista. 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.

Applica attributi personalizzati

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

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

Passa invece AttributeSet a obtainStyledAttributes(). Questo metodo restituisce un array TypedArray di valori già dereferenziati e con uno stile.

Il compilatore di risorse Android lavora molto per te per semplificare le chiamate a obtainStyledAttributes(). Per ogni risorsa <declare-styleable> nella directory res/, il valore R.java generato definisce sia un array di ID attributo sia un insieme di costanti che definiscono l'indice per ogni attributo dell'array. Puoi utilizzare le costanti predefinite per leggere gli attributi da TypedArray. Ecco come la classe PieChart legge i suoi attributi:

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

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

Aggiungere proprietà ed eventi

Gli attributi rappresentano un metodo efficace per controllare il comportamento e l'aspetto delle viste, ma possono essere letti solo quando la vista viene inizializzata. Per fornire un comportamento dinamico, esponi una coppia getter e setter della proprietà per ogni attributo personalizzato. Il seguente snippet mostra in che modo PieChart espone una proprietà denominata 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();
}

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

Le viste personalizzate devono inoltre supportare i listener di eventi per comunicare eventi importanti. Ad esempio, PieChart mostra un evento personalizzato denominato OnCurrentItemChanged per notificare ai listener che l'utente ha ruotato il grafico a torta allo stato attivo su una nuova sezione del grafico a torta.

È facile dimenticare di esporre proprietà ed eventi, soprattutto se sei l'unico utente della vista personalizzata. Dedicare del tempo a definire attentamente l'interfaccia della vista riduce i costi di manutenzione futuri. Una buona regola da seguire è esporre sempre qualsiasi proprietà che influisce sull'aspetto o sul comportamento visibile della vista personalizzata.

Progettare per l'accessibilità

La visualizzazione personalizzata deve supportare un'ampia gamma di utenti. Sono inclusi gli utenti con disabilità che non possono vedere o utilizzare un touchscreen. Per supportare gli utenti con disabilità:

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

Per maggiori informazioni sulla creazione di viste accessibili, consulta Rendere le app più accessibili.