DevCorner620

DevCorner: disegniamo sullo schermo

Roberto Orgiu

Abbiamo visto diverse volte delle grafiche realmente accattivanti far capolino nelle app che usiamo quotidianamente, ma non ci eravamo ancora addentrati nel percorso che ci porterà a sviscerare i componenti che creano queste particolarità: ecco quindi l’argomento di questo DevCorner, come disegnare semplici componenti geometrici.

Introdotto l’argomento di questa puntata, iniziamo a vedere come si possa implementare la possibilità di disegnare, ad esempio, un cerchio: ci sono diversi modi, quello che andremo a vedere si basa sull’estensione dell’oggetto View, nel cui metodo onDraw andremo a disegnare i nostri componenti, come mostrato nello screenshot.

Il primo passo è quindi creare una nuova classe che vada ad estendere View e ne crei tutti i costruttori (questa parte verrà eseguita in automatico da Android Studio)

public class JustAView extends View

A questo punto, non ci resta che procedere con l’override del metodo onDraw, la cui prima operazione sarà di eseguire il suddetto metodo preso dal parent, in modo da evitare spiacevoli inconvenienti

super.onDraw(canvas);

Il canvas che viene accettato come parametro in ingresso è la superficie su cui andremo a disegnare, ed è quindi questo oggetto che verrà interessato dal metodo che creerà la figura sullo schermo.

Per poter tracciare quindi le linee, abbiamo bisogno di un contenitore di tipo Paint, che porterà con sé diversi parametri, come ad esempio lo stile (che nel nostro caso è il solo contorno della figura)

Paint circlePaint = new Paint();
circlePaint.setStyle(Paint.Style.STROKE);

Lo spessore del contorno

circlePaint.setStrokeWidth(20);

Il colore di sfondo della figura

circlePaint.setColor(Color.DKGRAY);

e l’Anti-Alias, che ci permetterà di avere contorni più nitidi a tutte le risoluzioni

circlePaint.setAntiAlias(true);

Una volta impostati tutti i parametri che ci interessano, possiamo chiedere al canvas di disegnare la figura tramite una chiamata all’apposito metodo

canvas.drawCircle( centerX, centerY, radius, circlePaint);

Una cosa che vale la pena notare è che possiamo chiamare più volte i metodi di disegno del canvas, in modo da creare delle composizioni più elaborate e, una volta terminata la View, non resta che aggiungerla al layout come faremmo con qualsiasi altro componente.

Se volete dare un’occhiata al codice completo di questo esempio, scaricarne l’APK o chiedere aiuto, vi basta fare un salto sul nostro forum.