¿Cómo crear tu propia vista personalizada en Android con Kotlin?

En este artículo, vamos a hablar sobre cómo podemos crear nuestra propia vista personalizada en Android paso a paso. Todos sabemos que, al principio, la plataforma de Android nos brinda algunas vistas básicas, por ejemplo: TextView, ImageView, EditText, Button, ImageButton, RadioButton, etc. satisfacer nuestras necesidades. Entonces, vamos a sumergirnos en eso.

¿Qué es una vista personalizada en Android?

Primero, el concepto de vista personalizada en Android no es más que tener nuestro propio modelo de vista personalizado además de los preconstruidos. ¿Y cómo logramos eso? Simplemente reuniendo diferentes tipos de vistas preconstruidas y luego usando la combinada como una sola vista.

¿Por qué los necesitamos en nuestras aplicaciones?

Todos sabemos que, al principio, la plataforma Android nos brinda algunas vistas básicas, por ejemplo: TextView , ImageView , EditText , Button , ImageButton , RadioButton , etc. dejar de satisfacer nuestras necesidades. Ahí las vistas personalizadas entran en escena. Ahora, los desarrolladores personalizan completamente las vistas personalizadas en Android para lograr el objetivo. Aunque las vistas personalizadas no son necesarias en todas partes. Pero, en un nivel de desarrollo superior donde la complejidad es mayor, los necesitamos.

¿Cómo vamos a crear nuestra propia vista personalizada?

Cada vez que vamos a crear una vista personalizada para nuestras aplicaciones, necesitamos algunos elementos bajo consideración. Preséntate al ciclo de vida de una vista en Android.

Ahora, 3 métodos básicos deben ser tomados en consideración.

1. onMeasure()
2. enDiseño()
3. enDibujar()

Estos 3 métodos se anularán en la clase Java/Kotlin correspondiente. 

1. Método onMeasure()

Como sugiere el nombre del método, se utiliza con fines de medición. Básicamente, podemos controlar el ancho y el alto de nuestra vista personalizada.

• Si no se anula: el tamaño de la vista será ‘match_parent’ o ‘wrap_content’.
• Si se anula: al anular este método, tenemos más control del tamaño sobre la vista personalizada. No llame al método ‘super.onMeasure()’ . En su lugar, llamaremos al método ‘setMeasuredDimension(ancho, alto)’.

Anulando onMeasure():

Cuando se llama a este método, obtenemos ‘widthMeasureSpec’ y ‘heightMeasureSpec’ como parámetros. Un modo de tamaño es una restricción establecida por el padre para las vistas de su hijo. Los 3 tipos de modos disponibles se enumeran a continuación.

• SIN ESPECIFICAR: no se dan restricciones, por lo que puede ser del tamaño que desee.
• EXACTAMENTE: el tamaño exacto se determina para las vistas secundarias.
• AT_MOST: El niño puede ser tan grande como quiera hasta el tamaño especificado.

Ejemplo:

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  
          // requested width and mode
        val reqWidth = MeasureSpec.getSize(widthMeasureSpec)
        val reqWidthMode = MeasureSpec.getMode(widthMeasureSpec)
  
        // requested height and mode
        val reqHeight = MeasureSpec.getSize(heightMeasureSpec)
        val reqHeightMode = MeasureSpec.getMode(heightMeasureSpec)
  
        // your choice
        val desiredWidth: Int =  // TODO("Define your desired width")
        val desiredHeight: Int = // TODO("Define your desired height")
  
        val width = when (requestedWidthMode) {
            MeasureSpec.EXACTLY -> reqWidth
            MeasureSpec.UNSPECIFIED -> desiredWidth
            else -> Math.min(reqWidth, desiredWidth) // AT_MOST condition
        }
  
        val height = when (requestedHeightMode) {
            MeasureSpec.EXACTLY -> reqHeight
            MeasureSpec.UNSPECIFIED -> desiredHeight
            else -> Math.min(reqHeight, desiredHeight) // AT_MOST condition
        }
  
        // set the width and the height of the view
        setMeasuredDimension(width, height)
}

2. Método onLayout()

La vista principal utiliza este método para notificar a nuestra vista personalizada sobre su posición. Uno debe usarlo para calcular el ancho y la altura de su dibujo. Punto para recordar que todo lo que sucede en onMeasure() afecta las posiciones obtenidas del padre. Se recomienda que siempre se calcule el tamaño del dibujo aquí antes de proceder a dibujar la vista. 

3. Método onDraw()

Todo el dibujo ocurre dentro de esta parte. No es nada difícil ya que obtienes una instancia del objeto Canvas y eres libre de dibujar lo que quieras.

Anulando onDraw() :

Primero, por simplicidad, obtenga el ancho y la altura del objeto de lienzo con los métodos ‘getWidth()’  y ‘getHeight()’ . 

Ejemplo:

protected fun onDraw(canvas:Canvas) {
  // Grab canvas dimensions.
  val canvasWidth = canvas.getWidth()
  val canvasHeight = canvas.getHeight()
  // Calculate horizontal center.
  val centerX = canvasWidth * 0.5f
  // Draw the background.
  backgroundRect.set(0f, 0f, canvasWidth, canvasHeight)
  canvas.drawRoundRect(backgroundRect, cornerRadius, cornerRadius, backgroundPaint)
  // Draw baseline.
  val baselineY = Math.round(canvasHeight * 0.6f).toFloat()
  canvas.drawLine(0, baselineY, canvasWidth, baselineY, linePaint)
  // Draw text.
  
  // Measure the width of text to display.
  val textWidth = numberPaint.measureText(displayedCount)
  // Figure out an x-coordinate that will center the text in the canvas.
  val textX = Math.round(centerX - textWidth * 0.5f).toFloat()
  // Draw.
  canvas.drawText(displayedCount, textX, baselineY, numberPaint)
}