miércoles, 3 de agosto de 2022

Componetes básicos en Android.

Los componentes gráficos corresponden a los elementos que permitirán la interacción del usuario con el sistema, cuando hablamos de GUI nos referimos a las interfaces gráficas de usuario así estas interfaces se construyen mediante elementos gráficos como botónes, menús, iconos, campos de texto, etiquetas de texto entre otros, una GUI combina el diseño visual y los eventos asociados a dicho diseño, así si agregamos un botón, debemos programar el evento asociado a dicho botón cuando es presionado por un usuario.

Como se mencionó nos enfocaremos en los componentes gráficos que se usan desde los archivos XML, veamos algunas de las propiedades mencionadas anteriormente.

Propiedades Básicas.

Veamos algunas propiedades básicas usadas en los componentes gráficos, estas se pueden aplicar a cualquier componente independientemente de su tipo, ya que como se mencionó todos los componentes son Views así que comparten las mismas propiedades, algunas de las más usadas son:

android:id.

Propiedad muy importante porque permite definir un identificador al control, esta propiedad se asigna a cualquier view, por ejemplo si se asinga a un campo de entrada de datos, entonces este se usará para capturar información del usuario por esa razón debemos usar un nombre diferenciador y claro.

La forma correcta de generar un identificador es la siguiente:

android:id="@+id/miCampoDeTexto"

El símbolo @+id/ quiere decir que se está generando un nuevo identificador, esto provocará que la clase R del paquete gen del proyecto cree una referencia de este objeto para que luego pueda ser manipulado por código.

En el ejemplo se crea de forma dinamica en la clase R el identificador “miCampoDeTexto” para el componente.

android:layout_width. Define el ancho asociado a la vista, es una propiedad obligatoria y su valor se puede definir en valores absolutos o indicando alguno de los siguientes dos valores:

  • wrap_content (Ocupa el espacio de acuerdo a su contenido)

  • match_parent (Ocupa todo el espacio disponible)

    Ejemplo: android:layout_width="match_parent" o android:layout_width="290dp"

android:layout_height. Define el alto asociado a la vista, es una propiedad obligatoria y su valor se puede definir en valores absolutos o indicando alguno de los siguientes dos valores:

  • wrap_content (Ocupa el espacio de acuerdo a su contenido)

  • match_parent (Ocupa todo el espacio disponible)

    Ejemplo: android:layout_height="wrap_content" o android:layout_height="58dp"

android:layout_margin.

Define un margen para el componente, permitiendo establecer un espacio superior, inferior y en sus laterales, como variantes en caso de que se quiera dar espacios independientes, se puede hacer usando las propiedades marginLeft, marginRight, marginTop o marginBottom (o todos)

Ejemplo: android:layout_margin="20dp" | android:layout_marginTop="20dp" | android:layout_marginLeft="20dp" | android:layout_marginRight="20dp" | android:layout_marginBottom="20dp"

android:hint.

Esta propiedad permite desplegar un texto sobre el control a manera de ayuda mientras el usuario aun no ingrese información. (Preferible sobre la propiedad text)

Ejemplo: android:hint="Ingrese el nombre"

android:inputType.

Determina el tipo de entrada que se admitirá para la caja de texto, esto permite cierto tipo de validación de los datos y además le indica al sistema operativo que tipo de teclado (virtual) debe utilizarse.

Entre las opciones que podemos asociar para esta propiedad se tienen algunas como:

  • Text
  • Number
  • Texturi
  • Textpassword
  • Phone
  • Date
  • TextEmailAddress

Existen muchas más opciones que se pueden utilizar según la necesidad.

Ejemplo: android:inputType="number" | android:inputType="textEmailAddress"

android:textSize.

Define un tamaño para el texto que se va a mostrar en pantalla, se debe tener en cuenta las unidades de medida donde para textos se utiliza sp

Ejemplo: android:textSize="25sp"

android:textStyle.

Define un estilo para el texto pudiendo establecer el texto en normal, negrilla, cursiva (o ambas).

Ejemplo: android:textStyle="bold" | android:textStyle="italic" | android:textStyle="bold|italic"

android:textColor.

Define un color para el texto, pudiendo agregar un color del archivo de propiedades “colors” o un valor hexadecimal

Ejemplo: android:textColor="@color/teal_700" | android:textColor="#9C27B0"

android:backgroundTint.

Define un color de fondo para el componente, igual se puede tomar el color de propiedades “colors” o un valor hexadecimal

Ejemplo: android:backgroundTint="@color/teal_200" | android:backgroundTint="#FF5722"

android:text. Define el contenido textual asociado a la vista. Aunque su valor puede ser asignado de forma directa, aunque se recomienda fuertemente usar el archivo de strings disponible en la carpeta de recursos.

Ejemplo: android:text="Bienvenidos" | android:text="@string/titulo"

Esta propiedad es comun en vistas que en la interface del dispositivo despliegan texto, en la siguiente pantalla se muestra el archivo de recursos strings.xml donde se agregan diferentes valores para los textos


 y posteriormente se accede a dichos valores desde los view


 Ya teniendo claras las propiedades anteriores, veamos cuales son los componentes gráficos básicos 

Button.

Estos corresponden a los botones básicos que conocemos, tan solo presenta un botón con su respectivo texto internamente y un margen definido.

 

 El botón cumpliría la función básica de esperar un evento cuando sea presionado.

 

ToggleButton

El tipo ToggleButton corresponde a un tipo de botón que puede mantenerse en 2 posibles estados, presionado o no presionado, para este no solo se define una única propiedad text sino 2 dependiendo del estado que posea en el momento, usando para eso las propiedades android:textOn y android:textOff.


 Al igual que los botones tradicionales el ToggleButton se puede programar para que responda al evento click pero muy seguramente solo necesitara saber en qué estado se encuentra, esto lo puede lograr consultando el método isChecked() que devuelve el valor de true en el caso de que este pulsado y false en caso contrario.

Switch

Este control puede simular un interruptor muy parecido al funcionamiento del ToggleButton pero con un aspecto visual distinto.

 

Hay que tener en cuenta que dependiendo de la versión de Android que estemos usando, el aspecto visual de nuestros componentes puede cambiar, en este caso el control Switch para versiones de android 5.0 en adelante se vería así:

 

 

ImageButton

Este tipo de botón permite vincular una imagen al mismo para ser mostrada al usuario en vez de un texto como es común, para hacerlo podemos tomar la imagen de las carpetas /res/drawable y la cargarla usando la propiedad android:src, en este caso vamos a usar una imagen directamente de los recursos de Android.


TextView

Estos corresponden a las etiquetas de texto básicas que se muestran a los usuarios, estos en otros lenguajes son conocidos como labels y permiten mostrar un texto asociado a la propiedad android:text, estas etiquetas tienen otras propiedades que permiten manipular su tamaño, color de fondo, color de la fuente y tipo de letra, estilo entre otras

EditText

La vista EditText de Android es equivalente al Textbox de ASP y C# o al JTextField de JAVA, es un control que permite la captura de texto ingresado por el usuario en tiempo de ejecución.

 

CheckBox

El control checkbox se utiliza para marcar o desmarcar opciones en una aplicación. La forma de definirlo en la interface y las propiedades disponibles para su manipulación por código son análogas a las comentadas en el control ToogleButton.

Este control hereda del control TextView por lo que todas las opciones de formato ya comentadas para este control también son válidas para el checkBox.

En el código de la aplicación se puede consultar si este control se encuentra o no seleccionado por medio del método isChecked() que devuelve el valor de true si ha sido seleccionado o false en caso contrario, también se puede usar el método setChecked(valor) para establecer un estado concreto para el control, donde valor true seria para seleccionado y false para no seleccionado.

El evento que normalmente se programa de este control y que se ejecuta cada vez que cambia de estado (seleccionado / No seleccionado) es el onCheckedChanged.

 

RadioButton

Al igual que el control CheckBox, el RadioButton se usa para marcar o desmarcar una determinada opción, la diferencia radica en el tipo de selección que se desea realizar. Normalmente los RadioButton se usan en grupo para definir un conjunto de opciones de las cuales solo podrá seleccionar una, es decir, cada opción es mutuamente excluyente por lo que al seleccionar una opción se desmarcara automáticamente la que previamente estaba seleccionada. Estos grupos se definen mediante el elemento RadioGroup que a su vez contendrá rodos los elementos RadioButton que representan las opciones.

Los RadioGroups pueden definir la propiedad android:orientation con los valores “vertical” u “Horizontal” para determinar la forma en que se ordenaran los RadioButton que contiene.

Lo RadioButton por su parte además del ancho y alto deberían definir la propiedad android:text para asociar el texto de la opción que se representa y android:id para asociar un código al control para que pueda ser manipulado desde la lógica de la aplicación.

Para manipular el control desde la lógica de la aplicación se puede hacer uso de diferentes métodos entre los cuales encontramos el check(id) que sirve para fijar al radiobutton identificado con el id que se pasa como parámetro como seleccionado, el método clearCheck() sirve para desmarcar todos los radiobutton del grupo y el método getCheckedRadioButtonId() sirve para obtener el id del radiobutton que dentro del grupo esta seleccionado o el valor de -1 si no hay ningún elemento seleccionado.

El evento más importante de este control también es el onCheckedChanged, que se lanza cuando un elemento del grupo es seleccionado (recuerde que la selección de un elemento del grupo indica la des selección de otro).


 Y listo, Estos son algunos de los componentes gráficos básicos que vamos a usar a lo largo del curso, en próximas entradas continuaremos con otros componentes o los layouts.

 

También te podría Interesar.

 
¿Hay algo que quieras anexar o comentar sobre esta entrada?  no dudes en hacerlo.....y si te gustó...... te invito a compartir y Suscribirte ingresando al botón "Participar en este sitio" para darte cuenta de mas entradas como esta ;)

 

 

 

 

1 comentario:

  1. Hi.

    Thank you for sharing this information. This good blog about for sharing this blog with us. Basic components in Android and The graphic components correspond to the elements that will allow the user's interaction with the system.
    Here is sharing some Oracle Project Accounting information may be its helpful to you.

    Oracle Project Accounting Training

    ResponderEliminar

Eres libre de realizar cualquier comentario, desde que pueda ayudar con gusto lo atenderé, y si es un critica, bienvenida sea!!!