Paint in Android: cos’è, metodi di configurazione e come funziona

Cos’è Paint in Android?

Paint è una classe del pacchetto android.graphics che memorizza tutte le impostazioni di stile per le operazioni di disegno su Canvas. Non contiene pixel di per sé, ma determina l’aspetto di linee, forme e testo. Ogni chiamata al metodo Canvas — drawCircle, drawLine, drawText — usa Paint per interpretare la rappresentazione visiva.

Paint funziona secondo il principio di un oggetto di configurazione. Si crea un’istanza, si impostano i parametri una volta e la si riutilizza per molteplici operazioni. Ciò riduce al minimo le allocazioni nel ciclo di disegno e migliora le prestazioni fino al 30% rispetto alla creazione di un nuovo oggetto ogni frame. Secondo Google I/O 2024, l’ottimizzazione di Paint è una delle pratiche fondamentali per raggiungere 60 FPS nella grafica personalizzata.

Tutte le impostazioni di Paint sono suddivise in diverse categorie: colore e trasparenza, stile del tratto e del riempimento, gestione del testo e dei font, effetti di sfocatura e mascheratura. Ogni categoria è controllata da metodi setter indipendenti che possono essere combinati in qualsiasi combinazione. Ciò rende l’API Paint flessibile, ma richiede la comprensione dell’interazione dei parametri — ad esempio, Style influisce sul fatto che Shader venga applicato al tratto o al riempimento.

Colore e trasparenza in Paint

setColor è il metodo principale per impostare il colore per tutte le successive operazioni di disegno. Il colore viene passato in formato ARGB (numero intero a 32 bit), dove gli 8 bit superiori sono il canale alpha e i restanti sono i canali rosso, verde e blu. Il valore 0xFF0000FF imposta un colore blu opaco.

Gestione del canale alpha

Il metodo setAlpha consente di regolare indipendentemente la trasparenza nell’intervallo da 0 (completamente trasparente) a 255 (completamente opaco). A differenza della specifica di alpha in setColor, questo metodo non influisce sulla tonalità di colore già impostata — modula solo la trasparenza generale. Ciò è utile per animare la comparsa e la scomparsa degli elementi senza cambiare colore.

ColorFilter per la correzione del colore

ColorFilter è un meccanismo per trasformare il colore di ogni pixel prima del rendering. Sono supportate tre modalità: LightingColorFilter per la moltiplicazione e l’aggiunta di canali, PorterDuffColorFilter per la sovrapposizione con modalità di fusione e ColorMatrixColorFilter per la trasformazione matriciale completa. ColorFilter viene applicato dopo Shader ma prima dell’output su Canvas.

Per la maggior parte delle attività, setColor o setAlpha standard sono sufficienti. ColorFilter viene utilizzato principalmente per effetti di desaturazione, seppia o inversione. L’uso di ColorFilter aumenta il carico della GPU, quindi Google consiglia di ridurne al minimo l’utilizzo nelle chiamate cicliche a onDraw.

Stile e spessore della linea

Il metodo setStyle accetta uno dei tre valori Paint.Style: FILL (riempimento), STROKE (contorno) o FILL_AND_STROKE (entrambi). La scelta dello stile determina se una forma viene visualizzata come silhouette, wireframe o contorno con riempimento interno. Per impostazione predefinita, Paint viene creato con lo stile FILL.

Spessore della linea e giunzioni

setStrokeWidth imposta lo spessore della linea in pixel per la modalità STROKE. Per forme arrotondate e angoli arrotondati, vengono utilizzati setStrokeCap (Cap.ROUND, BUTT, SQUARE) e setStrokeJoin (Join.MITER, ROUND, BEVEL). Questi parametri influenzano in modo critico l’aspetto di grafici, tracciati e bordi nelle viste personalizzate.

Con spessori inferiori a 1 pixel, una linea viene disegnata con precisione subpixel ma può apparire sfocata su schermi a bassa densità. Per i display Retina Android, utilizzare TypedValue.applyDimension per convertire dp in pixel. Uno spessore di 2 dp garantisce una visibilità nitida sulla maggior parte dei dispositivi.

Motivi di tratteggio (DashPathEffect)

DashPathEffect crea linee tratteggiate e tratteggiate-punteggiate. Il costruttore accetta un array di lunghezze alternate di trattini e spazi e un offset di fase iniziale. Ad esempio, l’array [10, 5, 3, 5] crea una linea con un trattino lungo, uno spazio corto, un trattino corto e uno spazio. Questo effetto viene utilizzato attivamente negli editor grafici e negli strumenti di annotazione.

La combinazione degli stili avviene tramite setPathEffect. Combinando CornerPathEffect, DashPathEffect e DiscretePathEffect, è possibile creare linee visive complesse per grafici, etichette ed elementi decorativi. Ogni PathEffect viene calcolato sulla CPU, quindi nelle animazioni con molte linee, si consiglia di rasterizzare preventivamente l’effetto in un Bitmap.

val paint = Paint().apply {
    setStyle(Paint.Style.STROKE)
    setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2f, resources.displayMetrics))
    setPathEffect(DashPathEffect(floatArrayOf(10f, 5f, 3f, 5f), 0f))
}

Font e rendering del testo

Typeface è un oggetto che definisce il carattere tipografico per tutte le operazioni di testo di Paint. Android supporta i caratteri di sistema (Roboto, Noto Sans), caratteri personalizzati dalle risorse assets e caratteri scaricabili tramite l’API Downloadable Fonts. Typeface viene impostato utilizzando setTypeface su un’istanza di Paint.

Dimensione del testo e interlinea

Il metodo setTextSize imposta la dimensione del carattere in pixel. Per una visualizzazione corretta su schermi diversi, si consiglia di specificare la dimensione in sp utilizzando TypedValue.applyDimension. L’interlinea viene regolata usando setTextScaleX per l’allungamento orizzontale ed è supportata dal testo multilinea integrato tramite Canvas.drawText.

Per l’allineamento del testo, viene utilizzato setTextAlign con i valori LEFT, CENTER e RIGHT. Con CENTER, la coordinata x passata a drawText diventa il punto centrale del testo — ciò è particolarmente utile per le etichette sotto le icone e i titoli all’interno delle forme. Per un posizionamento preciso, vengono utilizzati i metodi measureText e getTextBounds, che restituiscono la larghezza e il rettangolo di delimitazione del testo.

Sottolineatura e barrato

setUnderlineText e setStrikeThruText abilitano rispettivamente la sottolineatura e il barrato. Questi parametri funzionano a livello di carattere e si applicano a tutto il testo disegnato da questo Paint. Per una formattazione flessibile di diverse parti della stessa stringa, utilizzare oggetti Paint separati con impostazioni diverse o alternare i parametri tra le chiamate drawText.

Gradienti ed effetti avanzati

Shader è la classe base per riempire le forme con gradienti, texture bitmap e compositing. Tramite il metodo setShader, è possibile assegnare una qualsiasi delle sue sottoclassi: LinearGradient, RadialGradient, SweepGradient, BitmapShader o ComposeShader. Shader sostituisce il colore impostato da setColor e viene applicato a tutti gli elementi disegnati.

Gradienti lineari e radiali

LinearGradient crea una transizione graduale tra due o più colori lungo una linea retta. Il costruttore accetta punti di inizio e fine, un array di colori e le loro posizioni (modalità tile). La modalità tile determina il comportamento oltre il gradiente: CLAMP (ripeti l’ultimo colore), MIRROR (riflessione) o REPEAT (ripetizione). LinearGradient viene utilizzato attivamente per riempimenti di sfondo e barre di progresso.

RadialGradient crea un gradiente circolare dal centro verso i bordi. Il centro viene specificato dalle coordinate, il raggio definisce l’area di transizione del colore. L’aspetto di un gradiente radiale ricorda l’illuminazione da una sorgente puntiforme — questo viene spesso utilizzato per simulare la luminosità dei pulsanti ed evidenziare gli elementi attivi.

Sfocatura e ombre (BlurMaskFilter)

BlurMaskFilter aggiunge un effetto di sfocatura attorno agli elementi disegnati. Il costruttore accetta un raggio di sfocatura e uno stile: NORMAL (sfocatura in tutte le direzioni), INNER (solo all’interno della forma), OUTER (solo all’esterno) e SOLID (forma + sfocatura esterna). BlurMaskFilter funziona con qualsiasi tipo di Paint e viene spesso utilizzato per creare ombre ed effetti di bagliore.

val paint = Paint().apply {
    setShader(LinearGradient(
        0f, 0f, width, height,
        intArrayOf(Color.RED, Color.BLUE),
        null,
        Shader.TileMode.CLAMP
    ))
    setMaskFilter(BlurMaskFilter(20f, BlurMaskFilter.Blur.NORMAL))
}

Esempio di utilizzo di Paint con Canvas

Consideriamo un esempio completo di una vista personalizzata che disegna un cerchio con riempimento sfumato e un’etichetta di testo. La combinazione di Paint e Canvas consente di creare grafica complessa con un codice minimo. Tutte le impostazioni vengono spostate nell’inizializzazione per le prestazioni.

class GradientCircleView@JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null
) : View(context, attrs) {

    private val fillPaint = Paint().apply {
        setShader(RadialGradient(
            0f, 0f, 200f,
            intArrayOf(Color.CYAN, Color.DKGRAY),
            null, Shader.TileMode.CLAMP
        ))
    }

    private val textPaint = Paint().apply {
        setColor(Color.WHITE)
        setTextSize(TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_SP, 24f, resources.displayMetrics
        ))
        setTextAlign(Paint.Align.CENTER)
        setMaskFilter(BlurMaskFilter(5f, BlurMaskFilter.Blur.NORMAL))
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(200f, 200f, 150f, fillPaint)
        canvas.drawText("Gradiente", 200f, 210f, textPaint)
    }
}

Il codice utilizza due oggetti Paint separati: uno per riempire il cerchio con un gradiente radiale e il secondo per il testo con un’ombra tramite BlurMaskFilter. Questa separazione consente di configurare i parametri in modo indipendente ed evitare il ripristino dello stato di Paint tra il disegno di diversi tipi di elementi. Per migliorare le prestazioni, entrambi gli oggetti Paint vengono creati nel costruttore, non in onDraw.

Durante il ridimensionamento su dispositivi con diverse densità di pixel, i valori delle dimensioni devono essere ricalcolati utilizzando TypedValue.applyDimension. Senza questo, il testo e i gradienti avranno un aspetto diverso sugli schermi mdpi e xxxhdpi. Nell’esempio, la dimensione del testo è specificata in sp, che si adatta automaticamente alle impostazioni di dimensione del carattere di sistema dell’utente.