Los componentes gráficos corresponden a los elementos que permitirán al usuario interactuar con el sistema, cuando hablamos de GUI nos referimos a las interfaces gráficas de usuario, por lo tanto estas interfaces se construyen a través de elementos gráficos como botones, menús, iconos, campos de texto, etiquetas, etc texto entre otros, una GUI combina el diseño visual y los eventos asociados con ese diseño, por lo que si agregamos un botón, debemos programar el evento asociado con ese botón cuando es presionado por un usuario.
Como se mencionó, enfoquémonos en los componentes gráficos que se usan de los archivos XML, veamos algunas de las propiedades mencionadas anteriormente.
Propiedades básicas.
Veamos algunas propiedades básicas que se utilizan en los componentes gráficos, estas se pueden aplicar a cualquier componente sin importar su tipo, ya que como se mencionó todos los componentes son Vistas por lo que comparten las mismas propiedades, algunas de las más utilizadas son:
Android: identificación.
Propriedade muito importante porque permite definir um identificador para o controle, esta propriedade é atribuída a qualquer visão, por exemplo se for atribuída a um campo de entrada de dados, então isso será usado para capturar informações do usuário, por isso devemos usar um nome diferenciador claro que sí.
La forma correcta de generar un identificador es la siguiente:
android:id="@+id/miTextField"
El símbolo @+id/ significa que se está generando un nuevo identificador, esto hará que la clase r del paquete gen del proyecto, cree una referencia a este objeto para que luego pueda ser manipulado por código.
En el ejemplo, el identificador “micampo de texto” para el componente.
Android: diseño_ancho.
Define el ancho asociado a la vista, es una propiedad obligatoria y su valor se puede definir en valores absolutos o indicando uno de los dos valores siguientes:
-
resumir contenido (Ocupa el espacio según su contenido)
-
partido_padre (Ocupa todo el espacio disponible)
Ejemplo:
android:layout_width="match_parent"cualquierandroid:layout_width="290dp"
android:layout_height.
Define la altura asociada a la vista, es una propiedad obligatoria y su valor se puede definir en valores absolutos o indicando uno de los dos valores siguientes:
-
resumir contenido (Ocupa el espacio según su contenido)
-
partido_padre (Ocupa todo el espacio disponible)
Ejemplo:
android:layout_height="wrap_content"cualquierandroid:layout_height="58dp"
Android: diseño_margen.
Define un margen para el componente, permitiendo establecer un espacio arriba, abajo y a sus lados, como variantes en caso de querer dar espacios independientes, se puede hacer usando las propiedades marginLeft, marginRight, marginTop o marginBottom (o todas)
Ejemplo: android:layout_margin="20dp" | android:layout_marginTop="20dp" | android:layout_marginLeft="20dp" | android:layout_marginRight="20dp" | android:layout_marginBottom="20dp"
androide: propina.
Esta propiedad permite mostrar texto en el control como ayuda mientras el usuario aún no ha ingresado información. (Preferible sobre la propiedad de texto)
Ejemplo: android:hint="Ingrese el nombre"
android: tipo de entrada.
Determina qué tipo de entrada se permitirá para el cuadro de texto, esto permite algún tipo de validación de datos y también le dice al sistema operativo qué tipo de teclado (virtual) usar.
Entre las opciones que podemos asociar a esta propiedad se encuentran algunas como:
- Texto
- número
- textura
- contraseña de texto
- teléfono
- reunión
- Dirección de correo electrónico de texto
Hay muchas otras opciones que se pueden utilizar dependiendo de la necesidad.
Ejemplo: Android: tipo de entrada = "número" | Android: tipo de entrada = "dirección de correo electrónico de texto"
Android: tamaño de texto.
Define un tamaño para el texto a mostrar en pantalla, se deben tener en cuenta las unidades de medida donde se usa sp para los textos
Ejemplo: android:textSize="25sp"
Android: texto de estilo.
Define un estilo para el texto, pudiendo definir el texto como normal, negrita, cursiva (o ambos).
Ejemplo: android:textStyle="negrita" | android:textStyle="cursiva" | android:textStyle="negrita|cursiva"
Android: color de texto.
Define un color para el texto, pudiendo añadir un color del archivo de propiedades “colores” o un valor hexadecimal
Ejemplo: android:textColor="@color/verde azulado_700" | android:textColor="#9C27B0"
android:tinte de fondo.
Define un color de fondo para el componente, también puede obtener el color de las propiedades de "colores" o un valor hexadecimal
Ejemplo: android:backgroundTint="@color/verde azulado_200" | android:backgroundTint="#FF5722"
androide: texto.
Define el contenido textual asociado con la vista. Aunque su valor se puede asignar directamente, se recomienda encarecidamente utilizar el archivo de cadenas disponible en la carpeta de recursos.
Ejemplo: android:text="Bienvenidos" | android:text="@cadena/título"
Esta propiedad es común en las vistas que muestran texto en la interfaz del dispositivo. La siguiente pantalla muestra el archivo de recursos strings.xml donde se agregan diferentes valores para los textos
y posteriormente se accede a estos valores desde las vistas
Después de borrar las propiedades anteriores, veamos cuáles son los componentes gráficos básicos.
Botón.
Estos corresponden a los botones básicos que conocemos, solo muestra un botón con su texto interno y un margen definido.
El botón cumpliría la función básica de esperar un evento al ser presionado.
botón de activación
El tipo ToggleButton corresponde a un tipo de botón que se puede mantener en 2 estados posibles, presionado o no presionado, para esto no solo se define una sola propiedad de texto, sino 2 dependiendo del estado que tenga en ese momento, utilizando las propiedades de Android: textOn y Android: textOff.
Al igual que los botones tradicionales, el ToggleButton se puede programar para responder al evento de clic, pero probablemente solo necesite saber en qué estado se encuentra. Esto se puede hacer consultando el método isChecked(), que devuelve el valor verdadero en caso de que se presione y falso en caso contrario.
desplazarse
Este control puede simular un interruptor muy similar a cómo funciona ToggleButton, pero con una apariencia visual diferente.
Recuerda que dependiendo de la versión de Android que estemos usando, la apariencia visual de nuestros componentes puede cambiar, en este caso el controlador Switch para Android versiones 5.0 y superiores quedaría así:
Botón de imagen
Este tipo de botón permite vincular una imagen al mismo para mostrarla al usuario en lugar de un texto como es habitual, para ello podemos tomar la imagen de las carpetas /res/drawable y cargarla mediante la propiedad android:src, en este caso usaremos una imagen directamente de los recursos de Android.
Vista de texto
Estas corresponden a las etiquetas de texto básicas que se muestran a los usuarios, estas en otros lenguajes se conocen como etiquetas y permiten mostrar un texto asociado a la propiedad android:text, estas etiquetas tienen otras propiedades que permiten manipular su tamaño, fondo color, color y tipo de letra, estilo, etc.
editar texto
La vista Android EditText es equivalente a ASP y C# Textbox o JAVA JTextField, es un control que permite capturar el texto tecleado por el usuario en tiempo de ejecución.
cuadro de selección
El control de casilla de verificación se utiliza para marcar o desmarcar opciones en una aplicación. La forma de definirlo en la interfaz 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 mencionadas para este control también son válidas para el checkBox.
En el código de la aplicación se puede comprobar si este control está seleccionado o no a través del método isChecked() que devuelve el valor de VERDADERO si fuiste seleccionado o FALSO de lo contrario, también puede usar el método setChecked(value) para establecer un estado específico para el control, donde value VERDADERO sería para seleccionados y FALSO por no seleccionado.
El evento que normalmente se programa para este control y que se ejecuta cada vez que cambia su estado (seleccionado/no seleccionado) es onCheckedChanged.
boton de radio
Al igual que el control CheckBox, el RadioButton sirve para marcar o desmarcar una determinada opción, la diferencia está en el tipo de selección que se desea realizar. Los RadioButtons normalmente se usan en grupos para definir un conjunto de opciones de las cuales solo puede seleccionar una, es decir, cada opción es mutuamente excluyente, por lo que al seleccionar una opción, la que se seleccionó previamente se desmarcará automáticamente. Estos grupos están definidos por el elemento RadioGroup, que a su vez contendrá todos los elementos RadioButton que representan las opciones.
RadioGroups puede establecer la propiedad android:orientation en "Vertical" u "Horizontal" para determinar cómo se ordenarán los RadioButtons que contiene.
El RadioButton, a su vez, además de ancho y alto, debe definir la propiedad android:text para asociar el texto de la opción representada 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 pueden utilizar diferentes métodos, entre los que encontramos check(Yo iría) que se usa para establecer el botón de opción identificado con la identificación que se pasa como parámetro como seleccionado, el método clearCheck() se usa para desmarcar todos los botones de opción en el grupo y el método getCheckedRadioButtonId() se usa para obtener la identificación del botón de radio que está dentro del grupo seleccionado o el valor de -1 si no se selecciona ningún elemento.
El evento más importante de este control es también el onCheckedChanged, que se dispara cuando se selecciona un elemento del grupo (recordar que la selección de un elemento del grupo indica la deselección de otro).
Y listo, estos son algunos de los componentes gráficos básicos que utilizaremos a lo largo del curso, en próximos posts seguiremos con otros componentes o maquetaciones.
También te puede interesar.
¿Hay algo que quieras añadir o comentar sobre esta entrada? siéntete libre de hacer….Y si te ha gustado... te invito a compartir y Suscríbase haciendo clic en el botón "Unirse a este sitio" para escuchar más publicaciones como esta 😉