Beruflich Dokumente
Kultur Dokumente
Definición
Distribuir los controles de la interfaz por la pantalla del dispositivo. En los próximos
capítulos vamos a hacer un repaso de los diferentes controles que pone a nuestra
disposición la plataforma de desarrollo de este sistema operativo. Empezaremos con
los controles más básicos y seguiremos posteriormente con algunos algo más
elaborados.
En este primer post sobre el tema nos vamos a centrar en los diferentes tipos de
botones y cómo podemos personalizarlos. El SDK de Android nos proporciona tres
tipos de botones: los clásicos de texto (Button), los que pueden contener una imagen
(ImageButton), y los de tipo on/off (ToggleButton y Switch).
No vamos a comentar mucho sobre ellos dado que son controles de sobra conocidos
por todos, ni vamos a enumerar todas sus propiedades porque existen decenas. A
modo de referencia, a medida que los vayamos comentando iré poniendo enlaces a su
página de la documentación oficial de Android para poder consultar todas sus
propiedades en caso de necesidad.
Controles comunes
Aquí te ofrecemos una lista con algunos de los controles comunes que puedes
usar en tu app. Sigue los vínculos para obtener más información acerca de
cómo usar cada uno.
1. Control Button [API]
1 <Button android:id="@+id/BtnBotonSimple"
2 android:text="@string/click"
3 android:layout_width="wrap_content"
4 android:layout_height="wrap_content" />
1 <ToggleButton android:id="@+id/BtnToggle"
2 android:textOn="@string/on"
3 android:textOff="@string/off"
4 android:layout_width="wrap_content"
android:layout_height="wrap_content" />
5
El botón se mostraría de alguna de las dos formas siguientes, dependiendo de su
estado:
Un control Switch es muy similar al ToggleButton anterior, donde tan sólo cambia su
aspecto visual, que en vez de mostrar un estado u otro sobre el mismo espacio, se
muestra en forma de deslizador o interruptor. Su uso sería completamente análogo
al ya comentado:
1 <Switch android:id="@+id/BtnSwitch"
2 android:textOn="@string/on"
3 android:textOff="@string/off"
4 android:layout_width="wrap_content"
android:layout_height="wrap_content" />
5
Y su aspecto sería el siguiente:
Eventos de un botón
Como podéis imaginar, aunque estos controles pueden lanzar muchos otros
eventos, el más común de todos ellos y el que querremos capturar en la
mayoría de las ocasiones es el evento onClick, que se lanza cada vez que el
usuario pulsa el botón. Para definir la lógica de este evento tendremos que
implementarla definiendo un nuevo objeto View.OnClickListener() y
asociándolo al botón mediante el método setOnClickListener(). La forma
más habitual de hacer esto es la siguiente:
1
btnBotonSimple = (Button)findViewById(R.id.BtnBotonSimple);
2
3 btnBotonSimple.setOnClickListener(new View.OnClickListener() {
4 public void onClick(View arg0)
5 {
6 lblMensaje.setText("Botón Simple pulsado!");
}
7 });
8
1
2 btnToggle = (ToggleButton)findViewById(R.id.BtnToggle);
3
btnToggle.setOnClickListener(new View.OnClickListener() {
4 public void onClick(View arg0)
5 {
6 if(btnToggle.isChecked())
7 lblMensaje.setText("Botón Toggle: ON");
8 else
lblMensaje.setText("Botón Toggle: OFF");
9 }
10 });
11
Personalizar el aspecto un botón (y otros controles)
En las imágenes mostradas durante este apartado hemos visto el aspecto que
presentan por defecto los diferentes tipos de botones disponibles. Pero, ¿y si
quisiéramos personalizar su aspecto más allá de cambiar un poco el tipo o el color de
la letra o el fondo?
La solución perfecta pasaría por tanto por definir diferentes imágenes de fondo
dependiendo del estado del botón. Pues bien, Android nos da total libertad para
hacer esto mediante el uso de selectores. Un selector se define mediante un fichero
XML localizado en la carpeta /res/drawable, y en él se pueden establecer los
diferentes valores de una propiedad determinada de un control dependiendo de su
estado.
1 <selector xmlns:android="http://schemas.android.com/apk/res/android">
2 <item android:state_checked="false" android:drawable="@drawable/toggle_off" />
3 <item android:state_checked="true" android:drawable="@drawable/toggle_on" />
4 </selector>
En el código anterior vemos cómo se asigna a cada posible estado del botón una
imagen (un elemento drawable) determinada. Así, por ejemplo, para el estado
“pulsado” (state_checked=”true”) se asigna la imagen toggle_on.
Como contenido extra de este capítulo voy a hacer mención a un nuevo “tipo de
botón” aparecido a raiz de la nueva filosofía de diseño Android llamada Material
Design. Me refiero a los botones de acción flotantes que están incorporando muchas
aplicaciones, sobre todo tras su actualización a Android 5 Lollipop.
Con la reciente publicación por parte de Google de la librería Design Support Library,
añadir este tipo de botones a nuestras aplicaciones es algo de lo más sencillo, y
además aseguramos su compatibilidad no sólo con Android 5.x sino también con
versiones anteriores. En esta librería se incluye un nuevo componente
llamado FloatingActionButton con la funcionalidad y aspecto deseados.
Lo primero que tendremos que hacer para utilizarlo será añadir la librería indicada a
nuestro proyecto. Una vez añadida la librería al proyecto como se describe en la nota
anterior, podremos añadir un botón flotante a nuestra interfaz añadiendo un nuevo
elemento a nuestro layout principal activity_main.xml de la siguiente forma:
<android.support.design.widget.FloatingActionButton
1 android:id="@+id/fab"
2 android:layout_width="wrap_content"
3 android:layout_height="wrap_content"
4 android:src="@drawable/ic_add"
app:fabSize="normal"
5 app:borderWidth="0dp" />
6
7
La propiedad más relevante, al igual que en el caso de un ImageButton,
es android:src, con la que podemos asignar al control la imagen/icono a mostrar. En
mi caso de ejemplo he utilizado un nuevo icono (ic_add) añadido al proyecto de la
misma forma que explicamos al principio del artículo.
Vemos también la propiedad app:fabSize. Esta propiedad puede recibir los valores
“normal” y “mini“, que determinan el tamaño del control dentro de los dos tamaños
estandar definidos en las especificaciones de Material Design. La última propiedad
asignada, app:borderWidth=”0dp”, es necesaria temporalmente (en el momento de
actualizar este artículo la versión actual de la librería es la 22.2) para evitar que el
botón flotante aparezca sin sombra o con aspecto no estandar en algunas versiones
de Android (por ejemplo APIs 16 o 22). Previsiblemente, este error lo corregirán en
la siguiente versión de la librería, por lo que puede que en un futuro muy próximo ya
no sea necesario asignar esta propiedad.
¿Y como seleccionamos el color del botón? Pues bien, si no indicamos nada, el botón
flotante tomará por defecto el accent color si lo hemos definido en el tema de la
aplicación (más información en el artículo sobre la Action Bar) o el color de selección
actual. Si queremos utilizar otro color debemos hacerlo desde el código java de la
aplicación, por ejemplo en el onCreate() de la actividad principal, llamando al
método setBackgroundTintList() del control FloatingActionButton.
1 fabButton = (FloatingActionButton)findViewById(R.id.fab);
2
3 fabButton.setBackgroundTintList(
4 getResources().getColorStateList(R.color.fab_color));
1 <selector xmlns:android="http://schemas.android.com/apk/res/android">
2 <item android:state_pressed="true" android:color="#B90000" />
3 <item android:color="#FF0000"/>
4 </selector>
Como podemos ver, en el selector hemos definido el color normal del botón y su color
cuando está pulsado.Para terminar, en la imagen siguiente se muestra la aplicación
de ejemplo completa, donde se puede comprobar el aspecto de cada uno de los tipos
de botón comentados:
4. TextView Android
Como dije antes, el control TextView es un clásico en la programación de GUIs. Los
TextView (etiquetas de texto) se utilizan como medio de salida, es decir, para
mostrar un determinado texto al usuario. Al igual que en el caso de los botones, el
texto del control se establece mediante la propiedad android:text. A parte de esta
propiedad, las etiquetas que definen su tamaño son las mínimas que debemos definir
(es muy parecido a los botones que ya vimos antes) yo destaco las siguientes:
Arriba vemos el resultado de la pantalla con el código xml que hemos programado
voy a intentar explicar cada propiedad lo que hace para que poco a poco vallamos
entendiendo cada línea ahora expliquemos cada elemento:
Bueno, hasta aquí con el XML del TextView, muchos de los parámetros que hemos
visto son comunes con el siguiente control, asique no lo voy a repetir ;P. Recuerda
que en cualquier momento, puedes usar las combinaciones de
teclas Control+Espacio (no me cansare de recordarlo) no tienes que conocer todas
las propiedades, eclipse nos ayuda a esto, usaloooooo.
5. EditText Android
El control EditText (caja de edición de texto) es otro componente indispensable de
casi toda aplicación Android. Es uno de los medios que tiene el usuario para introducir
datos a la aplicación. Poco mas os puedo decir de este control... os pongo un ejemplo:
Aparte de los atributos que comparte con el TextView, para este control tenemos
algunos parámetros que son exclusivos, los mas utilizados son estos dos:
Ejemplos
- Button
Un botón es un control con texto o imagen que realiza una acción cuando el usuario
lo presiona. La clase Java que lo represente es Button y puedes referirte a él dentro
de un layout con la etiqueta <Button> respectivamente.
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="AGREGAR" />
</RelativeLayout>
Con ello centramos el botón en el relative layout.
El texto que especifica su acción especifícalo en el atributo android:text. En el
ejemplo anterior se usó la palabra "AGREGAR".
Este código debería mostrar en la ventana Preview la siguiente imagen:
1 <ImageButton android:id="@+id/BtnSinBorde"
2 android:layout_width="wrap_content"
3 android:layout_height="wrap_content"
4 android:contentDescription="@string/icono_ok"
5 android:src="@drawable/ic_estrella"
style="?android:borderlessButtonStyle"/>
6
1
<LinearLayout
2 android:id="@+id/BarraBtnSinBorde"
3 android:layout_width="match_parent"
4 android:layout_height="wrap_content"
5 android:orientation="horizontal"
6 android:showDividers="middle"
android:divider="?android:dividerVertical"
7 android:dividerPadding="6dp" >
8
Otro lugar muy habitual donde encontrar botones sin borde es en las llamadas barras
de botones (button bar) que muestran muchas aplicaciones. Para definir una barra
de botones, utilizaremos normalmente como contenedor un LinearLayout horizontal
e incluiremos dentro de éste los botones (Button) necesarios, asignando a cada
elelemento su estilo correspondiente, en este caso buttonBarStyle para el
contenedor, y buttonBarButtonStyle para los botones. En nuetro ejemplo crearemos
una barra con dos botones, Aceptary Cancelar, que quedaría así:
1 <LinearLayout
android:id="@+id/BarraBotones"
2 android:layout_width="match_parent"
3 android:layout_height="wrap_content"
4 android:orientation="horizontal"
5 android:layout_alignParentBottom="true"
6 style="?android:attr/buttonBarStyle">
7
<Button android:id="@+id/BtnAceptar"
8 android:layout_width="wrap_content"
9 android:layout_height="wrap_content"
10 android:layout_weight="1"
11 android:text="@string/Aceptar"
style="?android:attr/buttonBarButtonStyle" />
12
13 <Button android:id="@+id/BtnCancelar"
14 android:layout_width="wrap_content"
15 android:layout_height="wrap_content"
16 android:layout_weight="1"
17 android:text="@string/Cancelar"
style="?android:attr/buttonBarButtonStyle" />
18
19 </LinearLayout>
20
- TextView
Código Fuente:
package com.androiya.proyecto004;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.TextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
et1=(EditText)findViewById(R.id.et1);
et2=(EditText)findViewById(R.id.et2);
tv3=(TextView)findViewById(R.id.tv3);
checkBox1=(CheckBox)findViewById(R.id.checkBox1);
checkBox2=(CheckBox)findViewById(R.id.checkBox2);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it
is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
2. Resumen
No vamos a comentar mucho sobre ellos dado que son controles de sobra conocidos
por todos, ni vamos a enumerar todas sus propiedades porque existen decenas. A
modo de referencia, a medida que los vayamos comentando iré poniendo enlaces a su
página de la documentación oficial de Android para poder consultar todas sus
propiedades en caso de necesidad.
cualquier aplicación Android, como son los botones y los cuadros de texto, en este
artículo vamos a ver cómo utilizar otros dos tipos de controles básicos en muchas
aplicaciones, los checkboxes y los radio buttons
Android SDK incluye un control de texto static sencillo para usar dentro de sus
layouts: TextView (android.widget.TextView). Un buen ejemplo del uso de los
controles TextView sería mostrar etiquetas textuales para otros controles como:
"Enter a Date:", o "Enter a Password:".
3. Summary
are not going to comment much on them since they are controls that are well known
by all, nor are we going to list all their properties because there are dozens. As a
reference, as we go on commenting I will be putting links to your official Android
documentation page to be able to check all your properties in case of need.
any Android application, such as buttons and text boxes, in this article we will see
how to use two other types of basic controls in many applications, checkboxes and
radio buttons
Android SDK includes a simple static text control to use within your layouts:
TextView (android.widget.TextView). A good example of the use of TextView
controls would be to display textual labels for other controls such as: "Enter a
Date:", or "Enter a Password:".
4. Recomendaciones
Empezaremos con los controles más básicos y seguiremos posteriormente con
algunos algo más elaborados.
5. Conclusiones
podremos definir una imagen a mostrar en vez de un texto, para lo que deberemos
asignar la propiedad android.
esta utilidad haciendo por ejemplo click derecho sobre la carpeta /main/res del
proyecto y seleccionando la opción New / Image Asset
el tema de nuestra aplicación (lo que afectará al color de fondo y primer plano de
los iconos seleccionados
7. Glosario de Términos:
control es un conjunto de dispositivos encargados de administrar, ordenar, dirigir
o regular el comportamiento de otro sistema, con el fin de reducir las
probabilidades de fallo y obtener los resultados teóricamente verdaderos.
8. Bibliografía o Linkografía
https://aplicacionesmoviles.weebly.com/controles-baacutesicos.html
https://developer.android.com/guide/topics/ui/controls?hl=ES
https://aplicacionesmoviles.weebly.com/controles-baacutesicos.html
http://www.it-docs.net/ddata/18.pdf
http://cursoslared.com/recursoslibre/TutorialAndroidPrincipiantes.pdf