====== Android Canvas : Views Personalitzades ======

{{ android:display_canvas.png?200}}

Article de referència: [[Android]]

En aquest article veiem com crear una ''View'' o //widget// personalitzat, dibuixant directament sobre ell amb l'objecte ''Canvas''.

{{tag> #Dam #DamMp08 #DamMp08Uf1 #DamMp08Uf01 #DamMp08Uf2 Android mobile kotlin }}

\\

===== Crear una nova View =====

Ves a la carpeta amb els arxius de codi Kotlin/Java i clica amb el botó dret o vés a:
  File -> New -> Kotlin Class/File

Posa-li el nom que desitgis, per exemple Display:

<code kotlin Display.kt>
class Display @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val paint = Paint().apply {
        color = Color.BLUE
        style = Paint.Style.FILL
        isAntiAlias = true
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        // Fons
        canvas.drawColor(Color.WHITE)

        // pintem un quadrat del 25% al 75% de l'alçada i amplada
        canvas.drawRect(
            width * 0.25f,  // left
            height * 0.75f, // top
            width * 0.75f,  // right
            height * 0.25f, // bottom
            paint)

    }
}
</code>

Fixa't en què:
  * ''width'' i ''height'' els agafem de la classe ''View'' i retorna els tamanys reals del //widget// al dispositiu.
  * Hem sobreescrit el mètode ''onDraw''

\\

===== Afegeix la nova classe al layout =====

La manera més fàcil és afegir una View genèrica amb la interfície gràfica, amb els tamanys que ens convingui, i després anar al codi XML i canviar el tipus de //widget// per la nova ''class'' que hem creat.

Canviariem l'element ''<View ...>'' per ''<com.myuser.myapp.MyClass ...>''

Segurament quedaria similar a aquest exemple (dins d'una //constraint layout//):

<code xml activity_main.xml>
<com.myuser.myapp.Display
    android:id="@+id/display"
    android:layout_width="300dp"
    android:layout_height="300dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</code>

\\

===== Aplicar canvis als dibuixos sobre el widget =====

El més còmode per dibuixar-hi de forma dinàmica és posar el codi dins de la nova classe ''Display'' i repintar sempre tota la ''View''.

Per forçar que es repinti podem cridar la funció ''View.invalidate()'', la qual acabarà amb la crida a ''onDraw'' que hem implementat:

<code kotlin>
  val display = findViewById<Display>(R.id.display)
  display.invalidate()
</code>