30 - Dibujar: graficar píxeles

Problema:

Graficar 10000 píxeles en forma aleatoria de color blanco en la pantalla del dispositivo con fondo negro.

Para poder hacer esta simple tarea debemos seguir una serie de pasos:

1 - Creamos un proyecto llamado: Proyecto033

Borramos el TextView que agrega automáticamente el Android Studio y procedemos a definir un id para el ConstraintLayout (le asignamos como id el valor layout1):

Ahora codificamos la clase en Kotlin donde se encuentra toda la lógica para encender los píxeles:

package com.tutorialesprogramacionya.proyecto033

import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import androidx.constraintlayout.widget.ConstraintLayout

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val fondo = Lienzo(this)
        val layout1=findViewById<ConstraintLayout>(R.id.layout1)
        layout1.addView(fondo)
    }


    class Lienzo(context: Context) : View(context) {

        override fun onDraw(canvas: Canvas) {
            canvas.drawRGB(0,0,0)
            val ancho = getWidth()
            val alto = getHeight()
            val pincel1 = Paint()
            pincel1.setARGB(255, 255, 255, 255)
            for(x in 1..10000) {
                var alex = (Math.random() * ancho).toFloat()
                var aley = (Math.random() * alto).toFloat()
                canvas.drawPoint(alex, aley , pincel1)
            }
        }
    }
}

Debemos crear una clase que herede de la clase View (todos los controles visuales en Android heredan de esta clase) y sobreescribir el método onDraw. El método onDraw se ejecuta cuando tiene que graficarse. Para acceder a las primitivas gráficas hay una clase llamada Canvas que encapsula todo lo relacionado a pintar píxeles, líneas, rectángules etc.:

        override fun onDraw(canvas: Canvas) {
            canvas.drawRGB(0,0,0)
            val ancho = getWidth()
            val alto = getHeight()
            val pincel1 = Paint()
            pincel1.setARGB(255, 255, 255, 255)
            for(x in 1..10000) {
                var alex = (Math.random() * ancho).toFloat()
                var aley = (Math.random() * alto).toFloat()
                canvas.drawPoint(alex, aley , pincel1)
            }
        }

Lo primero que hacemos en el método onDraw es pintar el fondo de negro llamando al método drawRGB, luego es obtener el ancho y alto en píxeles de la vista mediante los métodos getWidth() y getHeight(). Seguidamente creamos un objeto de la clase Paint. Llamamos al método setARGB para definir el color del pincel (el primer parámetro indica el valor de transparencia con 255 indicamos que no hay transparencia, luego indicamos la cantidad de rojo, verde y azul.

Por último debemos llamar al método drawPoint que dibuja el píxel en la columna, fila y pincel que le pasamos como parámetros.

Por último en el método onCreate del MainActivity creamos un objeto de la clase Lienzo (llamado fondo) y agregamos el objeto fondo al ConstraintLayout llamando al método addView:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val fondo = Lienzo(this)
        val layout1=findViewById<ConstraintLayout>(R.id.layout1)
        layout1.addView(fondo)
    }

Cuando ejecutemos el programa veremos una serie de píxeles en la pantalla:

Este proyecto lo puede descargar en un zip desde este enlace: proyecto033.zip