Controles Básicos de Android Studio
Tema
: Controles
Básicos de Android Studio
Autores
: Encina lopez Nohelia Cinthia
Ramos Zambora Belisa
Carrera : Ingeniería de Sistemas y Telemática.
Asignatura : Electivo.
Docente
: Ing. Marco Aurelio Porro Chulli.
Periodo académico : Semestre 2018-I.
I.
TEMA: Controles Básicos de
Android Studio
1. Contenido
1.1. Definición
Los controles
básicos de Android nos permitirán diseñar aplicaciones simples de manera
rápida. Este grupo de controles básicos está compuesto por los TextView,
EditText, Button. A continuación, los describiremos brevemente y comentaremos
los parámetros principales más importantes de cada uno.
1.2. Controles
Edith Text, TextView, Button
1.2.1.
Control Edith Text
Es el componente de edición de texto
que proporciona la plataforma Android. Permite la introducción y edición de
texto por parte del usuario, por lo que en tiempo de diseño la propiedad más
interesante a establecer, además de su posición/tamaño y formato, es el texto a
mostrar, atributo android:text. Por supuesto si no queremos que el
cuadro de texto aparezca inicializado con ningún texto, no es necesario incluir
esta propiedad en el layout XML.
Lo que sí deberemos establecer será
la propiedad android:inputType. Esta propiedad indica el tipo de contenido
que se va a introducir en el cuadro de texto, como por ejemplo una dirección de
correo electrónico (textEmailAddress), un número genérico (number), un número
de teléfono (phone), una dirección web (textUri), o un texto genérico (text).
El valor que establezcamos para esta
propiedad tendrá además efecto en el tipo de teclado que mostrará Android para
editar dicho campo.
Así, por
ejemplo, si hemos indicado “text” mostrará el teclado completo alfanumérico, si
hemos indicado “phone” mostrará el teclado numérico del teléfono, etc.
|
1
2
3
4
|
<EditText android:id="@+id/TxtBasico"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
|
Al igual que ocurría con los
botones, donde podíamos indicar una imagen que acompañara al texto del mismo,
con los controles de texto podemos hacer lo mismo. Las
propiedades drawableLeft o drawableRight nos permite
especificar una imagen, a izquierda o derecha, que permanecerá fija en el
cuadro de texto.
Otra opción adicional será indicar un texto de ayuda o
descripción (hint), que aparecerá en el cuadro de texto mientras el
usuario no haya escrito nada (en cuanto se escribe algo este texto desaparece).
Para esto utilizaremos las propiedades android:hint para indicar el
texto y android:textColorHint para indicar su color.
Veamos un ejemplo utilizando las propiedades
anteriores:
|
1
2
3
4
5
6
7
|
<EditText android:id="@+id/TxtImagenHint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_usuario"
android:hint="@string/usuario"
android:textColorHint="#CFCFCF"
android:inputType="text" />
|
Y su aspecto sería el siguiente:
Para recuperar y establecer el desde nuestro
código podemos utilizar los métodos getText() y setText(nuevoTexto) respectivamente:
|
1
2
3
|
EditText
txtTexto = (EditText)findViewById(R.id.TxtBasico);
String
texto = txtTexto.getText().toString();
txtTexto.setText("Hola
mundo!");
|
Un detalle que puede haber pasado
desapercibido. ¿te has fijado en que hemos tenido que hacer
un toString() sobre el resultado de getText()? La explicación
para esto es que el método getText() no devuelve directamente una
cadena de caracteres (String) sino un objeto de tipo Editable, que a su
vez implementa la interfaz Spannable. Y esto nos lleva a la característica
más interesante del control EditText, y es que no sólo nos permite
editar texto plano sino
también texto enriquecido o
con formato. Veamos cómo y qué opciones tenemos disponibles.
Interfaz Spanned
Un objeto de tipo Spanned es
algo así como una cadena de caracteres (de hecho deriva de la
interfaz CharSequence) en la que podemos insertar otros objetos a modo de
marcas o etiquetas(spans) asociados a rangos de caracteres. De esta
interfaz deriva la interfaz Spannable, que permite la modificación de
estas marcas, y a su vez de ésta última deriva la interfaz Editable, que
permite además la modificación del texto.
Aunque en el apartado en el que nos
encontramos nos interesaremos principalmente por las marcas de formato de
texto, en principio podríamos insertar cualquier tipo de objeto.
Existen muchos tipos de spans predefinidos
en la plataforma que podemos utilizar para dar formato al texto, entre ellos:
·
TypefaceSpan. Modifica el tipo de
fuente.
·
StyleSpan. Modifica el estilo del texto
(negrita, cursiva, …).
·
ForegroudColorSpan. Modifica el color
del texto.
·
AbsoluteSizeSpan. Modifica el tamaño de
fuente.
|
1
2
3
4
5
|
//Creamos un nuevo objeto de tipo
Editable
Editable str =
Editable.Factory.getInstance()
.newEditable("Esto es un
simulacro.");
//Marcamos cono fuente negrita la
palabra
"simulacro" (caracteres del 11-19)
str.setSpan(new StyleSpan(android.graphics.Typeface.BOLD),
11, 19,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
|
De esta forma, para crear un nuevo
objeto Editable e insertar una marca de formato podríamos hacer lo
siguiente:
En este ejemplo estamos insertando un span de
tipo StyleSpan para marcar un fragmento de texto con estilo negrita. Para insertarlo utilizamos
el método setSpan(), que recibe como parámetro el objeto Span a
insertar, la posición inicial y final del texto a marcar, y un flag que indica la forma en la
que el span se podrá extender al insertarse nuevo texto.
1.2.2.
TextView
El
control TextView es otro de los clásicos en la programación de GUIs,
las etiquetas de texto, y se utiliza 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,
la naturaleza del control hace que las más interesantes sean las que establecen
el formato del texto mostrado, que al igual que en el caso de los botones son
las siguientes:
ü android:background (color
de fondo)
ü android:textColor (color
del texto)
ü android:textSize (tamaño
de la fuente)
ü android:typeface (estilo
del texto: negrita, cursiva, …).
|
1
2
3
4
5
6
|
<TextView android:id="@+id/LblEtiqueta"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/escribe_algo"
android:background="#ff1ca5ff"
android:typeface="monospace"/>
|
La etiqueta tal cual se ha definido
en el código anterior tendría el siguiente aspecto:
De igual forma,
también podemos manipular estas propiedades desde nuestro código. Como ejemplo,
en el siguiente fragmento recuperamos el texto de una etiqueta con getText(), y posteriormente le concatenamos unos números, actualizamos su contenido
mediante setText() y le cambiamos su color de fondo con setBackgroundColor().
|
1
2
3
4
5
|
final TextView lblEtiqueta =
(TextView)findViewById(R.id.LblEtiqueta);
String
texto = lblEtiqueta.getText().toString();
texto +=
"123";
lblEtiqueta.setText(texto);
lblEtiqueta.setBackgroundColor(Color.BLUE);
|
Texto
con formato en controles TextView y EditText
Hemos visto cómo crear un objeto Editable y añadir
marcas de formato al texto que contiene, pero todo esto no tendría ningún
sentido si no pudiéramos visualizarlo. Como ya podéis imaginar, los
controles TextView y EditText nos van a
permitir hacer esto. Veamos qué ocurre si asignamos a nuestro control EditText el
objeto Editable que hemos creado antes:
|
1
|
txtTexto.setText(str);
|
Tras ejecutar este código, para lo que hemos insertado
un botón “SetText” en la aplicación de ejemplo, veremos como
efectivamente en el cuadro de texto aparece el mensaje con el formato esperado:
En la
aplicación de ejemplo también he incluido un botón adicional “Negrita” que se encargará de
convertir a estilo negrita un fragmento de texto previamente seleccionado en el
cuadro de texto. Mi intención con esto es presentar los métodos disponibles
para determinar el comienzo y el fin de una selección en un control de este
tipo. Para ello utilizaremos los métodos getSelectionStart() y getSelectionEnd(), que nos devolverán el índice del primer y último
carácter seleccionado en el texto. Sabiendo esto, ya sólo nos queda utilizar el
método setSpan() que ya conocemos para convertir la selección a
negrita.
|
1
2
3
4
5
6
7
8
9
|
Spannable
texto = txtTexto.getText();
int ini = txtTexto.getSelectionStart();
int fin = txtTexto.getSelectionEnd();
texto.setSpan(
new StyleSpan(android.graphics.Typeface.BOLD),
ini, fin,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
|
Bien, ya hemos
visto cómo asignar texto con y sin formato a un cuadro de texto, pero ¿qué
ocurre a la hora de recuperar texto con formato desde el control? Ya vimos que
la función getText() devuelve un objeto de tipo Editable y que sobre éste podíamos hacer un toString(). Pero con esta solución estamos perdiendo todo el formato del texto, por
lo que no podríamos por ejemplo salvarlo a una base de datos.
La solución a
esto último pasa obviamente por recuperar directamente el objeto Editable y serializarlo de algún modo, mejor aún si es en un formato estandar. Pues
bien, en Android este trabajo ya nos viene hecho de fábrica a través de la
clase Html [API],
que dispone de métodos para convertir cualquier objeto Spanneden su representación HTML equivalente. Veamos cómo. Recuperemos el texto de
la ventana anterior y utilicemos el método Html.toHtml(Spannable) para convertirlo a formato HTML:
|
1
2
|
//Obtiene
el texto del control con etiquetas de formato HTML
String
aux2 = Html.toHtml(txtTexto.getText());
|
Haciendo esto,
obtendríamos una cadena de texto como la siguiente, que ya podríamos por
ejemplo almacenar en una base de datos o publicar en cualquier web sin perder
el formato de texto establecido:
|
1
|
<p>Esto
es un <b>simulacro</b>.</p>
|
La operación contraria también es posible, es decir,
cargar un cuadro de texto de Android (EditText) o una etiqueta (TextView) a
partir de un fragmento de texto en formato HTML. Para ello podemos utilizar el
método Html.fromHtml(String) de la siguiente forma:
|
1
2
3
4
|
//Asigna
texto con formato HTML
txtTexto.setText(
Html.fromHtml("<p>Esto es un
<b>simulacro</b>.</p>"),
BufferType.SPANNABLE);
|
Desgraciadamente, aunque es de agradecer que este
trabajo venga hecho de casa, hay que decir que tan sólo funciona de forma
completa con las opciones de formato más básicas, como negritas, cursivas,
subrayado o colores de texto, quedando no soportadas otras sorprendentemente
básicas como el tamaño del texto, que aunque sí es correctamente traducido por
el método toHtml(), es descartado por el método contrario fromHtml().
Etiquetas Flotantes (Floating Labels)
Como contenido extra de este capítulo vamos a hablar
de un nuevo control publicado recientemente por Google dentro de la nueva
librería de diseño (Design Support Library) que nos ayuda a implementar uno
de los componentes relacionados con los cuadros de texto que se mencionan en
las especificaciones de Material
Design. Se trata de las etiquetas flotantes, que no es más que un hint (más arriba vimos lo que
era esto) que, en vez de desaparecer, se desplaza automáticamente a la parte
superior del cuadro de texto cuando el usuario pulsa sobre él.
El componente en cuestión se
llama TextInputLayout, y es muy sencillo de utilizar. Lo primero que
haremos será añadir la librería de diseño a nuestro proyecto (en el artículo
anterior sobre botonesexplicamos
con más detalle cómo hacerlo) añadiendo su referencia al fichero build.gradle:
|
1
2
3
4
|
dependencies
{
//...
compile 'com.android.support:design:22.2.0'
}
|
Tras esto, simplemente tendremos que añadir un
nuevo EditText con hint a nuestra interfaz, pero
esta vez dentro de un contenedor de tipo TextInputLayout:
|
1
2
3
4
5
6
7
8
9
10
11
|
<android.support.design.widget.TextInputLayout
android:id="@+id/TiLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText android:id="@+id/TxtInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe un
número par" />
</android.support.design.widget.TextInputLayout>
|
Como podéis ver no hacemos nada especial, ni asignamos
ninguna propiedad nueva, simplemente incluimos el cuadro de texto dentro del
nuevo componente TextInputLayout.
Si ejecutamos en este momento la aplicación podremos
ver cómo aparece la etiqueta flotante con tan sólo pulsar sobre el cuadro de
texto.
Con esto ya tendríamos la funcionalidad básica de las etiquetas
flotantes, pero el control ofrece también la posibilidad de mostrar errores
(muy útiles por ejemplo para mostrar errores de validación) bajo el cuadro de
texto. Para ello podemos utilizar los
métodos setErrorEnabled(true) y setError(). El primero de ellos
reservará espacio debajo del cuadro de texto para mostrar los errores. El
segundo nos servirá para indicar el texto del error o para eliminarlo
(pasando null como parámetro). A modo de ejemplo, he añadido un nuevo
botón a la aplicación (btnComprobar) donde comprobaré si lo introducido por el
usuario es o nó un número par, mostrando el error correpsondiente cuando
aplique:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
txtInputLayout
= (TextInputLayout)findViewById(R.id.TiLayout);
txtInputLayout.setErrorEnabled(true);
txtInput =
(EditText)findViewById(R.id.TxtInput);
btnComprobar
= (Button)findViewById(R.id.BtnInputLayout);
btnComprobar.setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View view) {
String num =
txtInput.getText().toString();
if(num.isEmpty() ||
Integer.parseInt(num)%2 != 0)
txtInputLayout.setError("Error:
No es un número par!");
else
txtInputLayout.setError(null);
}
});
|
Si volvemos a ejecutar ahora la aplicación de ejemplo
e introducimos un número impar, veremos cómo el mensaje de error aparece
correctamente bajo el cuadro de texto:
1.2.3.
Button
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.
Para agregar un botón a la actividad principal de
tu app dirígete a actividad_botones.xml y agrega la
siguiente definición.
<?xml version="1.0" encoding="utf-8"?>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.herprogramacion.botones.ActividadBotones">
<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>
|
ATRIBUTOS
|
DESCRIPCION
|
|
android:text
|
Permite cambiar el texto de un botón
|
|
android:background
|
Se usa para cambiar el fondo del botón. Puedes
usar un recurso del archivo colors.xml o un drawable.
|
|
android:enabled
|
Determinar si el botón está habilitado ante los
eventos del usuario. Usa true (valor por defecto) para habilitarlo y false en caso contrario.
|
|
android:gravity
|
Asigna una posición al texto con respecto a los ejes x o y dependiendo
de la orientación deseada.
Por ejemplo: Si usas top, el texto se alineará hacia el borde superior.
|
|
android:id
|
Representa al identificador del botón para
diferenciar su existencia de otros views.
|
|
android:onClick
|
Almacena la referencia de un método que se
ejecutará al momento de presionar el botón.
|
|
android:textColor
|
Determina el color del texto en el botón
|
|
android:drawable*
|
Determina un drawable que será dibujado en la orientación establecida.
Por ejemplo: Si usas el atributo
|
|
android:drawableBottom
|
el drawable será dibujado debajo del texto Teniendo en cuenta la anterior tabla te invito a
ver los resultados que producen usar algunos de esos atributos.
|
Atributos de un Botón
Si quieres cambiar las propiedades de un botón recurre
a los atributos que la documentación presenta en formato Java o XML.
Debido a que Button extiende
de TextView, puedes usar todos los atributos de esta clase.
Algunos de los más utilizados son:
Teniendo en cuenta la anterior tabla te invito a
ver los resultados que producen usar algunos de esos atributos.
Cambiar texto de un botón
Asigna una cadena directamente al atributo android:text para indicar la acción
del botón.
<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" />
Por defecto el texto del botón estará en
mayúsculas, pero si quieres deshabilitar esta característica usa el valor false
en el atributo android:textAllCaps.
<Button
...
android:textAllCaps="false"/>
Ahora, si se deseas cambiar el texto
programáticamente se usa el método setText().
Para ello se abre ActividadBotones.java.
Obténdremos la instancia del botón con findViewById() y
luego invoca setText() con
una secuencia de caracteres como parámetro.
public class ActividadBotones extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad_botones);
Button boton = (Button) findViewById(R.id.button);
boton.setText("Ordenar");
}
}
Esto
produce el siguiente resultado:
Ahora también es posible asignar un recurso string al
texto del botón desde XML y Java.
En caso de XML usa la notación de recurso @string o @android:string (strings del
sistema) de la siguiente forma:
<Button
...
android:text="@string/texto_agregar"/>
En Java solo usa el operador
punto para llegar al identificador perteneciente a la clase R:
Button boton = (Button) findViewById(R.id.button);
boton.setText(R.string.texto_agregar);
Cambiar
Color de Fondo
Modificar el fondo de un botón implica el cambio
del atributo android:background por
un recurso de color o drawable.
Ejemplo:
Usar el color primario
del proyecto como color de background de un botón
Solución:
Invoca la referencia @color/colorPrimary de
tu archivo values/colors.xml:
<Button
...
android:background="@color/colorPrimary"/>
El resultado es:
Sin embargo, hacer esto hace perder la reacción de superficie que se
tenía antes por el Material Design. La forma redondeada tampoco se hace
presente.
Solo queda la elevación al momento de tocar el botón. Para conservar el
efecto y cambiar el color del botón usa el atributo app:backgrountTint de la siguiente
forma:
<?xml version="1.0" encoding="utf-8"?>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.herprogramacion.botones.ActividadBotones">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:backgroundTint="@color/colorPrimary"
android:text="@string/texto_agregar" />
</RelativeLayout>
Así tendrías:
Botón
con Texto e Imagen
En la sección de atributos viste que existen
atributos con la forma android:drawable* para
alinear una imagen al texto de un botón.
Para demostrar su uso veamos el siguiente ejemplo
sencillo. Alinear a la izquierda del botón
ordenar un icono asociado a pizzas.
Solución
Abre el layout actividad_botones.xml y
agrega un botón centrado en el padre. Cambia el color de texto a blanco (@android:color/white), usa un tinte de
color rojo (#ef9a9a) y alinea a la izquierda el siguiente drawable de pizza:
El código debería quedar de la
siguiente forma:
<?xml version="1.0" encoding="utf-8"?>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.herprogramacion.botones.ActividadBotones">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_pizza"
android:drawablePadding="8dp"
android:id="@+id/boton"
android:textColor="@android:color/white"
app:backgroundTint="#ef9a9a"
android:text="Ordenar"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Y el resultado sería:
Como ves, usé android:drawableLeft para
ubicar la imagen en la izquierda. Si compruebas con las sugerencias de Android
tendrás varias posiciones: derecha, abajo y arriba.
2. Resumen
Edittext: es el componente de edición de texto que
proporciona la plataforma de Android, permite la introducción y edición de
textos por parte del usuario, por lo que en tiempo de diseño la propiedad mas
interesante a establecer además de su posición, tamaño y formato, es el texto a
mostrar.
TextView : Es otro de los
clásicos en la programación de GUIs, las etiquetas de texto y se utiliza para
mostrar un determinado texto al usuario.
Button:
el SDK nos
proporciona tres tipos de botones. El clásico(button) este botón es el mas
basico, el de tipo on/off (tooglebutton) este botón puede definir dos textos
dependiendo de su estado y el que puede contener una imagen (imagebutton).
3. Summary
Edittext: is the text editing component that
provides the Android platform, allows the introduction and editing of texts by
the user, so at design time the most interesting property to establish in
addition to its position, size and format, It is the text to show.
TextView: It is another classic in the
programming of GUIs, text labels and is used to display a certain text to the
user.
Button: The SDK provides us with three types of
buttons. The classic (button) this button is the most basic, the on / off
(tooglebutton) this button can define two texts depending on their status and
which can contain an image (imagebutton).
4. Recomendaciones
Es necesario
tener en cuenta una serie de puntos acerca de la plataforma con el objetivo de
garantizar la seguridad. Android es un sistema operativo para smartphones que
contiene aplicaciones. Por defecto el sistema viene instalado con un conjunto
de aplicaciones básicas.
5. Conclusiones
Los controles textview son usados comúnmente en aplicación
de interfaz de usuario Android para mostrar contenidos de texto en diferentes
maneras. Estos atributos pueden ser mezclados y combinados para permitir mucha
flexibilidad de presentación al texto en la pantalla.
6. Glosario
·
Android: es un sistema
operativo inicialmente pensado para teléfonos móviles.
·
setText : sirve para reemplazar un texto (String)
·
background: se
utiliza para nombrar a todos aquellos procesos o rutinas de
ejecución que se realizan en segundo plano.
7. Bibliografía
o Linkografía
7.1. Lincografias
Comentarios
Publicar un comentario