Introducció

En aquest tema, aprendrem a crear vistes personalitzades a Android utilitzant la classe View i el component Canvas. Les vistes personalitzades ens permeten crear elements de la interfície d'usuari que no estan disponibles per defecte a Android, oferint una major flexibilitat i control sobre l'aparença i el comportament de la nostra aplicació.

Objectius

Comprendre la necessitat de vistes personalitzades.
Aprendre a crear una vista personalitzada heretant de la classe View.
Utilitzar el component Canvas per dibuixar elements gràfics.
Gestionar els esdeveniments de la vista personalitzada.

Creació d'una Vista Personalitzada

Pas 1: Crear una Classe Personalitzada

Per crear una vista personalitzada, primer hem de crear una nova classe que hereti de View.

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class CustomView extends View {
    private Paint paint;

    public CustomView(Context context) {
        super(context);
        init();
    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawLine(0, 0, getWidth(), getHeight(), paint);
    }
}

Explicació del Codi

Constructor: La classe CustomView té tres constructors per assegurar-se que es pot instanciar des de codi o des d'un fitxer XML.
init(): Aquest mètode inicialitza l'objecte Paint que utilitzarem per dibuixar.
onDraw(): Aquest mètode és on realitzem el dibuix. En aquest exemple, dibuixem una línia diagonal de color vermell.

Pas 2: Afegir la Vista Personalitzada al Layout

Per utilitzar la nostra vista personalitzada en un layout XML, simplement l'afegim com qualsevol altra vista.

<com.example.customview.CustomView
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Utilització del Canvas

El component Canvas és una eina poderosa per dibuixar elements gràfics. A continuació, veurem alguns exemples de com utilitzar-lo.

Dibuixar un Cercle

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawCircle(getWidth() / 2, getHeight() / 2, 100, paint);
}

Dibuixar un Rectangle

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawRect(50, 50, 200, 200, paint);
}

Dibuixar Text

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    paint.setTextSize(50);
    canvas.drawText("Hola, Android!", 50, 100, paint);
}

Gestió d'Esdeveniments

Les vistes personalitzades també poden gestionar esdeveniments com tocs de pantalla. Per fer-ho, sobreescrivim el mètode onTouchEvent.

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // Acció quan es toca la pantalla
            return true;
        case MotionEvent.ACTION_MOVE:
            // Acció quan es mou el dit per la pantalla
            return true;
        case MotionEvent.ACTION_UP:
            // Acció quan es deixa de tocar la pantalla
            return true;
    }
    return super.onTouchEvent(event);
}

Exercici Pràctic

Objectiu

Crear una vista personalitzada que dibuixi un cercle que canviï de color quan es toqui la pantalla.

Solució

Crear la Classe Personalitzada

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class ColorChangingCircleView extends View {
    private Paint paint;
    private int color;

    public ColorChangingCircleView(Context context) {
        super(context);
        init();
    }

    public ColorChangingCircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ColorChangingCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        color = Color.RED;
        paint.setColor(color);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, 100, paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            color = color == Color.RED ? Color.BLUE : Color.RED;
            paint.setColor(color);
            invalidate(); // Redibuixa la vista
            return true;
        }
        return super.onTouchEvent(event);
    }
}

Afegir la Vista al Layout

<com.example.customview.ColorChangingCircleView
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Conclusió

En aquest tema, hem après a crear vistes personalitzades a Android utilitzant la classe View i el component Canvas. Hem vist com dibuixar elements gràfics i gestionar esdeveniments de la vista. Les vistes personalitzades ens permeten crear interfícies d'usuari úniques i adaptades a les necessitats específiques de la nostra aplicació.

En el següent tema, explorarem com treballar amb tasques en segon pla per millorar el rendiment i la resposta de les nostres aplicacions.

Vistes Personalitzades i Canvas

Introducció

Objectius

Creació d'una Vista Personalitzada

Pas 1: Crear una Classe Personalitzada

Explicació del Codi

Pas 2: Afegir la Vista Personalitzada al Layout

Utilització del Canvas

Dibuixar un Cercle

Dibuixar un Rectangle

Dibuixar Text

Gestió d'Esdeveniments

Exercici Pràctic

Objectiu

Solució

Conclusió

Curs d'Android Studio

Mòdul 1: Introducció a Android Studio

Mòdul 2: Desenvolupament Bàsic d'Android

Mòdul 3: Desenvolupament Intermedi d'Android

Mòdul 4: Desenvolupament Avançat d'Android

Mòdul 5: Desenvolupament Professional d'Android

Mòdul 6: Temes Especials