Controles bsicos en ANDROID Parte I

Ing. Edgar Lizrraga Ugarte

Controles bsicos en Android

El SDK de Android nos proporciona tres tipos de botones: el clsico (Button), el de tipo on/off (ToggleButton), y el que puede contener una imagen (ImageButton). En la imagen siguiente vemos el aspecto por defecto de estos tres controles.

Control Button
Un control de tipo Button es el botn ms bsico que podemos utilizar. En el ejemplo siguiente definimos un botn con el texto Plsame asignando su propiedad android:text. Adems de esta propiedad podramos utilizar muchas otras como el color de fondo (android:background), estilo de fuente (android:typeface), color de fuente (android:textcolor), tamao de fuente (android:textSize), etc.

Control Button

Control ToggleButton
Un control de tipo ToggleButton es un tipo de botn que puede permanecer en dos posibles estados, pulsado/no_pulsado. En este caso, en vez de definir un slo texto para el control definiremos dos, dependiendo de su estado. As, podremos asignar las propiedadesandroid:textOn y android:textoOff pa ra definir ambos textos. Veamos un ejemplo a continuacin.

Control ToggleButton

Control ImageButton
En un control de tipo ImageButton podremos definir una imagen a mostrar en vez de un texto, para lo que deberemos asignar la propiedad android:src. Normalmente asignaremos esta propiedad con el descriptor de algn recurso que hayamos incluido en la carpeta /res/drawable. As, por ejemplo, en nuestro caso hemos incluido una imagen llamada ok.png por lo que haremos referencia al recurso @drawable/ok. Adicionalmente, al tratarse de un control de tipo imagen tambin deberamos acostumbrarnos a asignar la propiedadandroid:contentDescription con una descripcin textual de la imagen, de forma que nuestra aplicacin sea lo ms accesible posible.

Control ImageButton

Control ImageButton
Cabe decir adems, que aunque existe este tipo especfico de botn para imgenes, tambin es posible aadir una imagen a un botn normal de tipo Button, a modo de elemento suplementario al texto. Por ejemplo, si quisiramos aadir un icono a la izquierda del texto de un botn utilizaramos la propiedad android:drawableLeft indicando como valor el descriptor (ID) de la imagen que queremos mostrar:

Control ImageButton

Eventos de un botn
El ms comn de todos ellos y el que querremos capturar en la mayora de las ocasiones es el evento onClick.

Eventos de un botn

Eventos de un botn

Control ImageView
El control ImageView permite mostrar imgenes en la aplicacin. La propiedad ms interesante es android:src, que permite indicar la imagen a mostrar. Nuevamente, lo normal ser indicar como origen de la imagen el identificador de un recurso de nuestra carpeta /res/drawable, por ejemplo android:src=@drawable/unaimagen. Adems de esta propiedad, existen algunas otras tiles en algunas ocasiones como las destinadas a establecer el tamao mximo que puede ocupar la imagen, android:maxWidth y android:maxHeight, o para indicar cmo debe adaptarse la imagen al tamao del control, android:scaleType (5=CENTER, 6=CENTER_CROP, 7=CENTER_INSIDE, ). Adems, como ya comentamos para el caso de los controles ImageButton, al tratarse de un control de tipo imagen deberamos establecer siempre la propiedad android:contentDescription para ofrecer una breve descripcin textual de la imagen, algo que har nuestra aplicacin mucho ms accesible.

Control ImageView

Si en vez de establecer la imagen a mostrar en el propio layout XML de la actividad quisiramos establecerla mediante cdigo utilizaramos el mtodo setImageResorce(), pasndole el ID del recurso a utilizar como contenido de la imagen.

Control ImageView

Control TextView
El control TextView es otro de los clsicos en la programacin 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 ms 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 (tamao de la fuente) y android:typeface (estilo del texto: negrita, cursiva, ).

Control TextView

Control TextView
De igual forma, tambin podemos manipular estas propiedades desde nuestro cdigo. Como ejemplo, en el siguiente fragmento recuperamos el texto de una etiqueta con getText(), y posteriormente le concatenamos unos nmeros, actualizamos su contenido mediantesetText() y le cambiamos su color de fondo con setBackgroundColor().

Control TextView

Control EditText
El control EditText es el componente de edicin de texto que proporciona la plataforma Android. Permite la introduccin y edicin de texto por parte del usuario, por lo que en tiempo de diseo la propiedad ms interesante a establecer, adems de su posicin/tamao y formato, es el texto a mostrar, atributo android:text. Por supuesto si no queremos que el cuadro de texto aparezca inicializado con ningn texto, no es necesario incluir esta propiedad en el layout XML.

Control EditText
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 direccin de correo (textEmailAddress) un nmero genrico (number) un nmero de telfono (phone) una direccin web (textUri) o un texto genrico (text). electrnico

Control EditText
El valor que establezcamos para esta propiedad tendr adems efecto en el tipo de teclado que mostrar Android para editar dicho campo. As, por ejemplo, si hemos indicado text mostrar el teclado completo alfanumrico, si hemos indicado phone mostrar el teclado numrico del telfono, etc.

Control EditText

Control EditText

Control EditText

Control EditText
De igual forma, desde nuestro cdigo podremos recuperar y establecer este texto mediante los mtodos getText() y setText(nuevoTexto) respecti vamente:

Control EditText

Control EditText

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 marcaso etiquetas(spans) asociados a rangos de caracteres. De esta interfaz deriva la interfazSpannable, que permite la modificacin de estas marcas, y a su vez de sta ltima deriva la interfaz Editable, que permite adems la modificacin del texto

Interfaz Spanned
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 tamao de fuente.

Interfaz Spanned
De esta forma, para crear un nuevo objeto Editable e insertar una marca de formato podramos hacer lo siguiente: