Diseños de interfaz de usuario de Android

El diseño de Android se utiliza para definir la interfaz de usuario que contiene los controles o widgets de la interfaz de usuario que aparecerán en la pantalla de una aplicación o pantalla de actividad de Android. Generalmente, cada aplicación es una combinación de View y ViewGroup. Como sabemos, una aplicación de Android contiene una gran cantidad de actividades y podemos decir que cada actividad es una página de la aplicación. Por lo tanto, cada actividad contiene múltiples componentes de interfaz de usuario y esos componentes son las instancias de View y ViewGroup. Todos los elementos de un diseño se construyen utilizando una jerarquía de objetos View y ViewGroup .

Vista

Una vista se define como la interfaz de usuario que se utiliza para crear componentes de interfaz de usuario interactivos, como TextView , ImageView , EditText , RadioButton , etc., y es responsable del manejo y dibujo de eventos. Son generalmente llamados widgets.

Vista

Un grupo de vistas actúa como una clase base para diseños y parámetros de diseños que contienen otras vistas o grupos de vistas y para definir las propiedades del diseño. Son generalmente llamados diseños.

Ver grupo

El framework de Android nos permitirá utilizar elementos de UI o widgets de dos formas:  

• Usar elementos de la interfaz de usuario en el archivo XML
• Crear elementos en el archivo Kotlin dinámicamente

Tipos de diseño de Android

• Diseño lineal de Android: LinearLayout es una subclase de ViewGroup, que se usa para proporcionar elementos de vista secundarios uno por uno, ya sea en una dirección particular, ya sea horizontal o verticalmente, según la propiedad de orientación.
• Diseño relativo de Android: RelativeLayout es una subclase de ViewGroup, que se usa para especificar la posición de los elementos de vista secundarios entre sí, como (A a la derecha de B) o en relación con el padre (fijar en la parte superior del padre).
• Diseño de restricción de Android: ConstraintLayout es una subclase de ViewGroup, que se usa para especificar la posición de las restricciones de diseño para cada vista secundaria en relación con otras vistas presentes. Un ConstraintLayout es similar a un RelativeLayout, pero tiene más potencia.
• Diseño de marco de Android: FrameLayout es una subclase de ViewGroup, que se usa para especificar la posición de los elementos de vista que contiene uno encima del otro para mostrar solo una vista dentro de FrameLayout.
• Diseño de tabla de Android: TableLayout es una subclase de ViewGroup, que se usa para mostrar los elementos secundarios de View en filas y columnas.
• Android Web View: WebView es un navegador que se utiliza para mostrar las páginas web en nuestro diseño de actividad.
• Android ListView: ListView es un ViewGroup, que se utiliza para mostrar listas desplazables de elementos en una sola columna.
• Vista de cuadrícula de Android: GridView es un ViewGroup que se usa para mostrar una lista desplazable de elementos en una vista de cuadrícula de filas y columnas.

Usar elementos de la interfaz de usuario en el archivo XML

Aquí, podemos crear un diseño similar a las páginas web. El archivo de diseño XML contiene al menos un elemento raíz en el que se pueden agregar elementos de diseño o widgets adicionales para crear una jerarquía de vistas. El siguiente es el ejemplo:  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http:// schemas.android.com/apk/res/android"
    xmlns:tools="http:// schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <!--EditText with id editText-->
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:hint="Input"
        android:inputType="text"/>
 
    <!--Button with id showInput-->
    <Button
        android:id="@+id/showInput"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="show"
        android:backgroundTint="@color/colorPrimary"
        android:textColor="@android:color/white"/>
 
</LinearLayout>

Cargue el archivo de diseño XML y sus elementos desde una actividad

Cuando hayamos creado el diseño, debemos cargar el recurso de diseño XML desde nuestro método de devolución de llamada onCreate() de actividad y acceder al elemento de la interfaz de usuario desde el XML usando findViewById . 

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

        // finding the button
        val showButton = findViewById<Button>(R.id.showInput)

        // finding the edit text
        val editText = findViewById<EditText>(R.id.editText)

Aquí, podemos observar el código anterior y descubrir que estamos llamando a nuestro diseño mediante el método setContentView en forma de R.layout.activity_main . En general, durante el lanzamiento de nuestra actividad, el marco de Android llamará al método de devolución de llamada  onCreate() para obtener el diseño requerido para una actividad.

Crear elementos en el archivo Kotlin dinámicamente

Podemos crear o instanciar elementos o widgets de la interfaz de usuario durante el tiempo de ejecución mediante el uso de los objetos View y ViewGroup personalizados mediante programación en el archivo Kotlin. A continuación se muestra el ejemplo de cómo crear un diseño usando LinearLayout para contener un EditText y un Button en una actividad mediante programación. 

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.LinearLayout
import android.widget.Toast
import android.appcompat.app.AppCompatActivity
 
class MainActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // create the button
        val showButton = Button(this)
        showButton.setText("Submit")
 
        // create the editText
        val editText = EditText(this)
 
        val linearLayout = findViewById<LinearLayout>(R.id.l_layout)
        linearLayout.addView(editText)
        linearLayout.addView(showButton)
 
        // Setting On Click Listener
        showButton.setOnClickListener
        {
            // Getting the user input
            val text = editText.text
 
            // Showing the user input
            Toast.makeText(this, text, Toast.LENGTH_SHORT).show()
        }
    }
}

Atributo diferente de los diseños