Curso de introducción a Android



Documentos relacionados
MICROSOFT WORD 2007 AVANZADO. Unidad Didáctica Nº 1

Trabajar con diapositivas

... Formas alternativas de escribir un texto. Columnas. anfora CAPÍTULO 4

Programa diseñado y creado por Art-Tronic Promotora Audiovisual, S.L.

Operación Microsoft Access 97

Android Creación de una aplicación sencilla: Forwarding - Página 1 -

TEMA 20 EXP. WINDOWS PROC. DE TEXTOS (1ª PARTE)

Creando una webquests

Desarrollo de apps para móviles Android. Conceptos básicos de las aplicaciones Android

Crear una Activity en Android. Paso por paso

BASES DE DATOS - Microsoft ACCESS 2007-

CATÁLOGO CATÁLOGO CATÁLOGO CATÁLOGO CATÁLOGO

Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas.

MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007

MANUAL BASICO DE WEBEX

Roberto Quejido Cañamero

Manual de operación Tausend Monitor

MANUAL DE AYUDA MODULO TALLAS Y COLORES

La ventana de Microsoft Excel

Adaptación al NPGC. Introducción. NPGC.doc. Qué cambios hay en el NPGC? Telf.: Fax.:

Paso 1 de 13. Paso 2 de 13. Guía de aprendizaje de Flash CS5 Tutorial 3. Creación de un logotipo textual.

TEMA 5: HOJAS DE CÁLCULO. Edición de hojas de cálculo con OpenOffice Calc

Ministerio de Educación. Diseño de Presentaciones en la Enseñanza. Módulo 9: Imprimir

Interfaz de usuario Layout Vistas Adaptadores Eventos de interacción Estilos y temas

En términos generales, un foro es un espacio de debate donde pueden expresarse ideas o comentarios sobre uno o varios temas.

MANUAL BÁSICO DE WRITER

OPERACIONES EN MOSTRADOR

Herramientas CONTENIDOS. MiAulario


Race Manager by Master Timing Guía del usuario GUIA RACE MANAGER. Eventronic, SL

Gestión de Retales WhitePaper Noviembre de 2009

2_trabajar con calc I

DISEÑADOR DE ESCALERAS

Diseño de páginas web

Actividades con GeoGebra

Kaldeera Advanced Forms 2009 Guía del usuario

Accesibilidad web GUÍA FUNCIONAL

Manual CMS Mobincube

CURSOS PRÁCTICOS SEDEN. Maquetación de un trabajo en Word SEDEN

Manual de NVU Capítulo 4: Los enlaces

PLANTILLAS DE DOCUMENTOS EN WORD 2007

Manual del Usuario de NOVIT GPS. Le llegará un como éste. Nombre completo;

Formas de Pago y Efectos en Facturas de Venta WhitePaper Febrero de 2007

Draw: objetos en 3D, diagramas de flujo y exportación

V Manual de Portafirmas V.2.3.1

Cómo creo las bandejas del Registro de Entrada /Salida y de Gestión de Expedientes?

MANUAL PARA GESTIÓN DE INCIDENCIAS INFORMÁTICAS

Implementación de widgets Avaibook en Blogger

Gimp - Segunda parte. En qué formatos puede grabar GIMP mi imagen? Guardar una imagen

Ejercicios - Persistencia en Android: proveedores de contenidos y SharedPreferences

HOOTSUITE: GESTOR DE CUENTAS EN REDES SOCIALES

/05/2009

AGREGAR UN EQUIPO A UNA RED Y COMPARTIR ARCHIVOS CON WINDOWS 7

CÓMO CREAR NUESTRO CATÁLOGO

MANUAL SERVICIOS TELEFONIA FIJA

9. Composer: Bugs y consejos.

Manual para la utilización de PrestaShop

MANUAL DE USO PROGRAMA DE GESTIÓN AGENCIAS DE VIAJES

ESTÁNDAR DESEMPEÑO BÁSICO Recopila información, la organiza y la procesa de forma adecuada, utilizando herramientas tecnológicas.

Curso Internet Básico - Aularagon

Presentaciones. Con el estudio de esta Unidad pretendemos alcanzar los siguientes objetivos:

Android UI. Darío Fernando Chamorro Vela Junio 2012

En este tutorial aprenderemos las técnicas básicas de tratamiento de imágenes vectoriales con Flash.

INDICE. 1. Introducción El panel Entities view El panel grafico Barra de botones Botones de Behavior...

Editor de textos para Drupal: TinyMCE

Creado dentro de la línea de sistemas operativos producida por Microsoft Corporation.

Páginas multimedia Pizarra

Tutorial para hacer una base de datos sencilla con openoffice Base

10. El entorno de publicación web (Publiweb)

Diagrama de Gantt en Excel

La pestaña Inicio contiene las operaciones más comunes sobre copiar, cortar y pegar, además de las operaciones de Fuente, Párrafo, Estilo y Edición.

Tutorial PowerPoint. Crear una nueva presentación

Manual hosting acens

Introducción a Google Calendar Breve guía sobre algunas de sus funcionalidades destacables.

MANUAL CAMBIO DE CLAVE WIFI

MANUAL DE FACTURACIÓN TOUCH SCREEN

MS ACCESS BÁSICO 6 LOS INFORMES

Tutorial de manejo de los portafolios de objetivonatural.com. Bienvenidos a Portafolios.objetivonatural.com

Novedades PhotoGestion 5

01 Índice. GESTOR DE CONTENIDOS Manual de uso 01 ÍNDICE OBJETO DEL DOCUMENTO ESTRUCTURA GRÁFICA DEL SISTEMA... 3

MANUAL DE PRACTICUM12 PARA CENTROS EDUCATIVOS ÁMBITO MÁSTER

MANUAL APLICACIÓN. SOFTWARE GESTIÓN DE CLÍNICAS DENTALES

CONCEPTOS BASICOS. Febrero 2003 Página - 1/10

Mejoras introducidas MARKETING GIO

MANEJANDO FICHEROS Y CARPETAS

NORMA 34.14(SEPA) 05/11/2013

Páginas multimedia Dashboard

COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER

6.1. Conoce la papelera

13.3. Personalización avanzada

Guía para el tratamiento en Allegro de recibos para centros no pertenecientes a la Generalitat Valenciana.

Vamos a ver las dos formas básicas de arrancar PowerPoint.

Programación Gráfica 2D ( IV ) Tilemapping.

TUTORIAL ENVIO SMS MASIVOS. 1. Segmentación de la base de datos de clientes

CURSO RÁPIDO DE PHOTOSHOP APLICADO AL SLOT

Bases de datos en Excel

F O R M U L A R I O S FORMULARIOS

Es el listado de los productos que están ofertados en la página.

Transcripción:

Curso de introducción a Android Sesión 4: Interfaces de Usuario (UI) Índice Introducción a las interfaces de usuario Layouts FrameLayout LinearLayout RelativeLayout ScrollView ListView GridView Input Controls Toasts Buttons TextViews EditText CheckBoxes RadioButtons Toggle Buttons Spinners ProgressBars SeekBars Pickers Introducción a las interfaces de usuario En sesiones anteriores se han creado Activities y Fragments, que suelen ir acompañados de una serie de elementos visuales que el dispositivo muestra y con los que el usuario puede interactuar. Estos elementos se conocen como Interfaces de Usuario o UI de la aplicación. En Android, estas interfaces de usuario pueden crearse de dos formas distintas: Creando los componentes en código y añadiéndolos a Activities y Fragments. Declarando los componentes en XML e inflándolos y añadiéndolos después. 1

Aunque la primera forma es viable, también es poco aconsejable, ya que el crear componentes se hace largo y difícil, mientras que la declaración en XML tiene ventajas: Al estar en un formato etiquetado XML es fácil ver la jerarquía de componentes y declarar sus propiedades. Android Studio permite poder ver en tiempo real cómo quedaría esa UI en distintos dispositivos e incluso distintas versiones del sistema operativo Android. Permite tener declarados de forma más o menos inmutable distintas UI para distintas configuraciones, como pueden ser el tamaño de pantalla, la densidad de píxeles, la rotación de la pantalla o la versión del S.O. Los componentes visuales se pueden agrupar a su vez en dos grupos: Views o vistas, componentes simples que no pueden contener a otras. ViewGroups o layouts, componentes que pueden, además de tener su propia funcionalidad, alojar en su interior a otros componentes, que se consideran hijos del componente padre que los agrupa. Todo View en su XML tiene que tener unas propiedades android:layout_width y android:layout_height que establecen su ancho y su alto respectivamente. Estas propiedades pueden recibir los siguientes valores: match_parent o fill_parent: como su nombre indica, significa igual que el padre o llenando el padre, ocupan todo el espacio disponible. wrap_content: el nombre significa envuelve al contenido y crea el View con el tamaño mínimo necesario para que se vea de forma completa, es decir, lo más pequeño posible y que siga siendo utilizable. Valor numérico: un valor numérico en cualquiera de las unidades soportadas. En Android, además, aunque es posible usar píxeles para dar medidas es aconsejable no hacerlo por la gran cantidad de tamaños y densidades de pantallas. Para esto, se aconseja el uso de Density Independent Pixels (dip o dp), que permiten crear interfaces de usuario que se verán igual en pantallas del mismo tamaño pero distinta densidad de píxeles. Para solucionar el problema de los tamaños de pantalla veremos distintas formas más adelante. 2

Layouts Se considera layout o ViewGroup a todo aquel objeto que herede de la clase ViewGroup, que a su vez hereda de View y que por tanto tiene la funcionalidad extra de contener otros componentes. Algunos tipos de layouts son: FrameLayout Los FrameLayout (antiguamente AbsoluteLayout) son los tipos de layouts más simples que existen. Permiten únicamente alinear los elementos que los contienen a uno de sus lados o esquinas y poner una posición absoluta en su interior mediante coordenadas. Por ejemplo, podríamos tener el siguiente código: <FrameLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_weight="1"> <!-- Para este primer elemento no habría que poner nada, porque por defecto está alinado arriba a la izquierda --> <TextView android:text="topleft" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <!-- Este elemento lo alineamos arriba a la derecha con la propiedad layout_gravity. El " " permite combinar varios valores --> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="topright" android:layout_gravity="top right" /> <!-- Este componente estará pegado a arriba del layout pero estará centrado de forma horizontal --> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="topcentre" android:layout_gravity="top center_horizontal" /> <!-- Este componente estará a la izquierda centrado verticalmente pero además estará situado a 40dp del margen izquierdo --> <TextView android:text="left" android:layout_gravity="left center_vertical" 3

android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginleft="40dp" /> </FrameLayout> Aquí podemos ver un ejemplo de las distintas posiciones base que podemos conseguir si sólo hacemos uso de la propiedad android:layout_gravity y no de los márgenes: Ahora la pregunta que puede surgir es: Si tengo varias vistas que se solapan, cuál se verá encima de cuál? Hasta Android 5.0, el orden es: cuanto más abajo, más alto. Es decir, el último elemento en procesarse es el que se dibuja encima del resto. En Android 5.0 hay una propiedad android:elevation que permite ajustar manualmente la superposición de componentes. Referencia: FrameLayout.html http:// developer.android.com/ reference/ android/ widget/ LinearLayout Los LinearLayout permiten añadir elementos uno detrás de otro, ya sea de forma horizontal o vertical. Esto se controla con el parámetro android:orientation. La imagen anterior muestra un par de LinearLayout, el primero con android:orientation="horizontal" y el segundo con android:orientation="vertical". 4

Una propiedad importante de los LinearLayout es que los elementos solo se apilan en la dirección indicada. Es decir, si tenemos que es horizontal y se llega al final de la pantalla añadiendo elementos, el siguiente elemento se añadirá fuera de la pantalla pero sin crear una fila nueva. Otro punto interesante de los LinearLayout es que es posible que cada elemento ocupe un porcentaje de espacio en su interior. Para esto se usan las propiedades android:layout_weight y android:weightsum: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:weightsum="10"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:text="2/10" android:padding="4dp" android:gravity="center_horizontal" android:background="@android:color/holo_red_dark" android:layout_weight="2"/> <TextView 5

android:layout_width="0dp" android:layout_height="wrap_content" android:text="4/10" android:padding="4dp" android:gravity="center_horizontal" android:background="@android:color/holo_blue_light" android:layout_weight="4"/> </LinearLayout> Le hemos dicho al layout que tendrá un total de 10 partes con weightsum y que el primer TextView ocupará 2 de esas partes con android:layout_weight="2" y el segundo 4 con android:layout_weight="4", con lo cual quedarían otros 4/10 libres. El resultado sería: Si no especificamos un weightsum, por defecto se toma la suma de los weights de todos sus hijos, con lo cual, quedaría tal que así: Seguramente os habréis dado cuenta de que en el código anterior, android:layout_width vale 0dp. Esto es así porque de haber puesto match_parent el weight no habría tenido efecto y de haber puesto wrap_content el cálculo estaría viciado ya que este valor les da un ancho mínimo que se añade al tamaño calculado, quedando así: En el TextView azul no se nota mucho la diferencia, pero en el rojo sí es fácilmente apreciable, ya que la versión con wrap_content es casi 1/3 más grande que la de 0dp. Referencia: LinearLayout.html http:// developer.android.com/ reference/ android/ widget/ RelativeLayout Funciona de forma muy similar al FrameLayout, pero permite posicionar los elementos de forma relativa, es decir, según la posición de otros elementos. En este layout android:layout_gravity no sirve para nada, no da error pero no hace nada. Para posicionar los elementos más cerca o más lejos de cada borde del RelativeLayout usaremos las propiedades: android:layout_alignparenttop android:layout_alignparentleft android:layout_alignparentright android:layout_alignparentbottom android:layout_alignparentright android:layout_centerhorizontal android:layout_centervertical android:layout_centerinparent 6

7

8

Todos ellos pueden tener valores verdaderos o falsos, true o false y pueden combinarse entre ellos para posicionar objetos. Para dar la distancia volveremos a usar layout_marginxxxx. Algo muy interesante que podremos hacer es usar las siguientes propiedades para posicionar los elementos según la posición de otros: // Estas permiten poner elementos al lado, encima o debajo de otro elemento android:layout_above android:layout_below android:layout_toleftof android:layout_torightof // Estas permiten ponerlo al principio o al final de otro elemento ya sea // por arriba, por debajo o por los lados android:layout_aligntop android:layout_alignbottom android:layout_alignright android:layout_alignleft Para referenciar a otros elementos se usan las ids. 9

Un ejemplo podría ser: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="60dp" android:text="abajo a la derecha" android:padding="4dp" android:gravity="center" android:layout_alignparentright="true" android:layout_alignparentbottom="true" android:background="@android:color/holo_red_dark"/> <TextView android:id="@+id/view_central" android:layout_width="wrap_content" android:layout_height="60dp" android:text="centrado" android:padding="4dp" android:gravity="center" android:layout_centerinparent="true" android:background="@android:color/holo_blue_light"/> <TextView android:layout_width="wrap_content" android:layout_height="60dp" android:text="debajo de Centrado" android:padding="4dp" android:gravity="center" android:layout_below="@+id/view_central" android:layout_alignleft="@+id/view_central" android:background="@android:color/holo_green_light"/> </RelativeLayout> Que se vería así: RelativeLayout es un layout muy flexible y recomendado en la mayoría de los casos, ya que no hace cálculos muy complejos para posicionar las views como sí ocurre con LinearLayout, por ejemplo. Referencia: http:// developer.android.com/ reference/ android/ widget/ RelativeLayout.html 10

11

ScrollView Un ScrollView no es más que un layout que permite que si su hijo, ya que solo puede tener un hijo, ocupa más del ancho o el alto de la pantalla se pueda ver el resto haciendo scroll. Una forma de hacer una lista sería crear un ScrollView con un LinearLayout con una serie de views dentro, de forma que si el LinearLayout ocupa más del alto o el ancho de la pantalla, se pueda arrastrar para ver el resto de sus elementos. Sin embargo, esta forma sólo es recomendable para cantidades pequeñas de elementos, ya que en caso contrario habría que hacer cálculos sobre la posición de un número muy grande de elementos y esto repercutiría en el rendimiento de la aplicación. Una solución mucho más elegante es usar un ListView. Referencia: ScrollView.html http:// developer.android.com/ reference/ android/ widget/ ListView Un ListView de cara al usuario funcionaría de forma muy similar al ejemplo anterior, pero su funcionamiento interno es muy distinto, ya que lo que hace es reciclar views. Si tenemos por ejemplo 400 elementos pero en la pantalla sólo caben 8 a la vez (o 7 y parte de otro), lo que hará será crear sólo 8 elementos y según salen de la pantalla reciclarlos para cambiar su información por la de el nuevo elemento que esté por aparecer (si un elemento sale otro entra normalmente). En la imagen vemos cómo se recicla el Item 1 según sale de la pantalla y tras reciclarlo se convierte en el Item 8, que se añade al final de la lista. Este método es mucho más eficiente porque sólo se crea el número de elementos necesarios para la pantalla del dispositivo y se hace una única vez, haciendo que la parte más costosa del proceso sea mucho más liviana. Los ListView funcionan con Adapters, que son unas clases implementan la interfaz Adapter o heredan de alguna clase que lo hace, y con 2 objetivos princpiales: Convertir datos de cierto tipo a views que muestren dichos datos. Gestionar el reciclado de views. Para esto se hace uso del método getview() de estos adapters: 12

public class MyAdapter extends ArrayAdapter<String> {... @Override public View getview(int position, View convertview, ViewGroup parent) { // Si aún no hemos creado el view, lo hacemos, si no, lo reciclamos if(convertview = null) { convertview = View.inflate(getContext(), R.layout.layout_de_fila, null); } // Modificamos los views para mostrar los datos TextView mitextview = (TextView) convertview.findviewbyid(r.id.mi_textview); mitextview.settext(getitem(position)); } } // Por último devolvemos el view ya creado o reciclado para mostrarlo return convertview; Sin embargo, aunque en las últimas versiones de Android el findviewbyid es un proceso relativamente rápido, en versiones antiguas y móviles de baja capacidad sigue siendo algo costoso y al hacer scroll en la lista podríamos encontrarnos con mini-tirones. Una forma de solucionar esto es con el patrón ViewHolder. Todo ser haría parecido, salvo por la inclusión de una clase ViewHolder y su uso: 13

public class MyAdapter extends ArrayAdapter<String> {... } @Override public View getview(int position, View convertview, ViewGroup parent) { ViewHolder holder = null; // Si aún no hemos creado el view, lo hacemos, si no, lo reciclamos if(convertview = null) { convertview = View.inflate(getContext(), R.layout.layout_de_fila, null); // Inicializamos "holder" y lo añadimos como "tag" a convertview // Este "tag" es un hueco para poner cualquier objeto y se guarde en la vista holder = new ViewHolder(); convertview.settag(holder); } // También inicializamos sus propiedades holder.mitextview = (TextView) convertview.findviewbyid(r.id.mi_textview); } else { // Si ya tenemos el view inicializado y vamos a reciclar, cargamos el holder del tag holder = (ViewHolder) convertview.gettag(); } // Modificamos los views para mostrar los datos, pero los del holder holder.mitextview.settext(getitem(position)); // Por último devolvemos el view ya creado o reciclado para mostrarlo return convertview; private static class ViewHolder { public TextView mitextview; } Con esto hacemos que además de crear una sóla vez cada uno de los items que se mostrarán por pantalla y luego reciclarlos, también tenemos que buscar una única vez cada view que queramos modificar, haciendo el reciclado mucho más rápido. Algunas propiedades XML interesantes de los ListView son: android:divider // Permite cambiar el borde que hay entre un item y otro android:dividerheight // Permite cambiar el tamaño de este borde android:entries // Nos deja cargar los items de la lista desde un array android:choicemode // Si debes poder seleccionar solo un item, varios o ninguno Además, los ListView pueden tener un Header y un Footer, 2 views adicionales que se añaden mediante: 14

milistview.addheader(miheaderview); milistview.addfooter(mifooterview); Es importante añadirlos antes de usar milistview.setadapter(miadapter) para cargar los items. Para saber qué item acabamos de pulsar usamos la interfaz OnItemClickListener: private OnItemClickListener onitemclick = new OnItemClickListener() { @Override public void onitemclick(adapterview<?> adapter, View v, int position, long id) { // Aquí podemos hacer reaccionar al click } }... milistview.seronitemclicklistener(onitemclick); Referencias: http://developer.android.com/reference/android/widget/listview.html http://developer.android.com/reference/android/widget/listadapter. html GridView Los GridView son muy similares a los ListView, pero permiten tener items distribuidos en filas y columnas: También hacen uso de Adapters y se comportan en casi todo momento como un ListView, salvo por las siguiente propiedades: android:columnwidth // Ancho de cada columna android:horizontalspacing // Espacio entre columna y columna android:verticalspacing // Espacio entre fila y fila android:numcolumns // Número de columnas por fila android:stretchmode // Cómo rellenar el espacio vacío si lo hay Además, los GridView no tienen posibilidad de añadirles un Header o Footer. Referencia: http:// developer.android.com/ reference/ android/ widget/ GridView. html 15

16

Input Controls Los Input Controls o elementos de entrada de datos son Views que permiten al usuario darle información a la aplicación. Algunos de ellos son: Buttons Los Button o botones son uno de los elementos más elementales. Son un View que tiene distintos estados para cuando están: normal: sin ningún estado. pressed: el botón está siendo pulsado en ese momento. focused: si estamos usando un cursor, sabríamos que el botón reacciona al click. disabled: el botón está desactivado y no hará nada si hacemos click. (En realidad todos los Views tienen estas propiedades, pero no todos los muestran de cara al usuario). Se crean tal que así: <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Púlsame!" /> Y para saber cuándo lo hemos pulsado haríamos uso de la interfaz OnClickListener: OnClickListener onclicklistener = new OnClickListener() { @Override public void onclick(view v) { // Aquí reaccionamos al click del botón } } mibutton.setonclicklistener(onclicklistener); 17

Esta interfaz es también aplicable a cualquier otro View, pero en botones es especialmente utilizada. Podríamos tener un ListView con un OnClickListener, pero no nos interesaría normalmente porque queremos saber cuándo se pulsa en los items de la lista, no en la lista en sí. Referencia: http:// developer.android.com/ reference/ android/ widget/ Button. html TextViews Un TextView no sirve para que el usuario dé información sino para que lo haga la aplicación de cara al usuario. En otras librerías gráficas se los suele conocer como Labels. Cualquier texto que se lea en una app está dentro de un TextView: En este caso, Hello World estaría escrito en un TextView. Si bien un TextView puede estirarse todo lo que se quiera, el texto de su interior se mantendrá sin cambios. Es decir, el texto no se redimensiona automáticamente al tamaño del TextView. 18

19

Algunas propiedades de los TextView son: android:text // Texto a mostrar android:textsize // Tamaño del texto en "sp" android:textcolor android:textstyle // bold, italic, normal... android:gravity // Si el texto estará centrado, a la izquierda... android:textallcaps // Escribir todo el texto en mayúsculas android:drawablexxxx // Poner una imagen a la izquierda, derecha, encima... android:lines // Número de líneas máximas del texto android:singleline // Si sólo debe tener una línea android:ellipsize // Si al quedarse sin espacio debe cortar el texto, poner "...", etc. Referencia: http:// developer.android.com/ reference/ android/ widget/ TextView. html EditText Una versión editable de los TextView, donde el usuario puede escribir: Mantiene las mismas propiedades que los TextView pero además son útiles: android:editable // Si el EditText podrá ser editado con un teclado o no android:hint // Texto a mostrar cuando aún no está relleno android:hintcolor // Color del hint android:inputtype // Dice qué tipo de teclado necesita el EditText android:capitalize // Si el teclado pondrá automáticamente la primera letra en mayúscula También existen ciertas propiedades que nos permiten elegir si queremos o no que se puedan escribir ciertos caracteres. 20

android:digits // Solo se podrán escribir los caracteres que digamos android:numeric // Solo se podrán escribir números android:phonenumber // Solo caracteres de números de teléfono android:password // Se esconderán automáticamente los caracteres escritos Si quisiéramos escribir un error, como en la imagen, lo haríamos con: miedittext.seterror(" Algo ha salido mal!"); Y si quisiéramos que se nos avisara cada vez que se escribe algo en el EditText, podríamos hacerlo con la interfaz TextWatcher: public interface TextWatcher { // Cuando se selecciona o deselecciona el EditText public void onfocuschange(view v, boolean hasfocus); // Una vez que se ha modificado el texto public void aftertextchanged(editable s); // Justo antes de que se modifique el texto public void beforetextchanged(charsequence s, int start, int count, int after); // Con cada modificación del texto (después de aftertextchanged) public void ontextchanged(charsequence s, int start, int before, int count); } Referencia: http:// developer.android.com/ reference/ android/ widget/ EditText. html CheckBoxes Un CheckBox es un TextView con una imagen, que puede estar checked o no. Por lo tanto, puede tener un texto o no y además tiene la propiedad: android:checked // true o false Para que se nos notifique cuando el CheckBox cambie de estado usaremos la interfaz CompoundButton.OnCheckedChangedListener: public interface OnCheckedChangedListener { public void oncheckedchanged(compoundbutton buttonview, boolean ischecked); } Referencia: http:// developer.android.com/ reference/ android/ widget/ CheckBox. html 21

22

RadioButtons Mientras que un CheckBox puede seleccionarse y deseleccionarse al pulsarlo, un RadioButton sólo puede seleccionarse, de forma que para quitar la selección de uno haya que pulsar en otro. Para hacer esta tarea más fácil los RadioButton se agrupan en RadioGroup: <RadioGroup android:id="@+id/radiogroup1" android:layout_width="wrap_content" android:layout_height="wrap_content" > <RadioButton android:id="@+id/radiogroupbutton0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="primera opción" /> <RadioButton android:id="@+id/radiogroupbutton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="segunda opción" /> <RadioButton android:id="@+id/radiogroupbutton3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="tercera opción" /> </RadioGroup> Usaremos la interfaz RadioGroup.OnCheckedChangedListener para saber qué RadioButton del RadioGroup se ha cambiado: miradiogroup.setoncheckedchangedlistener(new RadioGroup.OnCheckedChangedListener() { // Nos dice qué RadioGroup contiene al RadioButton y la id del RadioButton public void oncheckedchanged(radiogroup group, int checkedid); }); Referencias: http://developer.android.com/reference/android/widget/radiobutton. html http://developer.android.com/reference/android/widget/radiogroup. html 23

Toggle Buttons Mientras que hasta Android 2.3 solo estaban los ToggleButton, desde Android 4.0 en adelante existen los Switch, que cumplen una función similar. Un ToggleButton no es otra cosa que un Button con un CheckBox en el propio botón: Funcionan igual que un CheckBox. Igual ocurre con los Switch, solo que estos presentan otra forma: Referencias: http://developer.android.com/reference/android/widget/togglebutton. html http://developer.android.com/reference/android/widget/switch.html Spinners Un Spinner es un selector que crea una lista para poder seleccionar elementos cuando se hace click en él. Funciona con un Adapter, al igual que los ListView y en lugar del OnItemClickListener usa OnItemSelectedListener: public interface OnItemSelectedListener { public void onitemselected(adapterview<?> adapterview, View v, int position, long id); public void onnothingselected(adapterview<?> adapterview); } Un Spinner puede abrir el listado en forma de dropdown (como en la imagen) o como un Dialog aparte. Esto se controla con: android:spinnermode // "dialog" o "dropdown" Una forma rápida de llenar los spinners sin tener que usar un adapter (siempre que tengamos un string-array) es con: 24

25

android:entries="@arrays/opciones" Referencia: http:// developer.android.com/ reference/ android/ widget/ Spinner. html ProgressBars Las barras de progreso o ProgressBar permiten mostrar un porcentaje de progreso en forma de barra o de círculo de carga: En la imagen vemos un círculo de carga o ProgressBar indeterminado y un ProgressBar normal con un cierto porcentaje alcanzado. Algunas propiedades de los ProgressBar son: android:indeterminate // Si el ProgressBar es indeterminado o no android:max // Valor máximo del ProgressBar (el mínimo siempre es 0) android:progress // Porcentaje del ProgressBar alcanzado android:secondaryprogress // Porcentaje secundario El uso del secondaryprogress no parece muy claro sin un ejemplo. En este caso cuadra muy bien la barra de carga de Youtube: En la imagen podemos ver que la parte roja sería el progress (porcentaje del vídeo visto) y la blanca el secondaryprogress (porcentaje del vídeo cargado). Referencia: ProgressBar.html http:// developer.android.com/ reference/ android/ widget/ 26

27

SeekBars Un SeekBar es un ProgressBar que puede modificar su progress por acción del usuario moviendo un thumb (en este caso, el círculo azul): Para ser notificados cuando el usuario haya modificado el valor del SeekBar, tenemos la interfaz OnSeekBarChangeListener: public interface OnSeekBarChangeListener { // Cuando el valor se modifica (mientras se mueve) public void onprogresschanged(seekbar seekbar, int progress, boolean fromuser); // Cuando el usuario acaba de pinchar en el thumb public void onstarttrackingtouch(seekbar seekbar); // Cuando el usuario suelta el thumb public void onstoptrackingtouch(seekbar seekbar); } Referencia: http:// developer.android.com/ reference/ android/ widget/ SeekBar. html Pickers Los pickers son controles especiales que permiten elegir valores complejos como una hora o una fecha. Se añaden como componentes XML normales. Principalmente se usan: TimePicker Este componente no puede ser configurado por XML, sino que debe de hacerse cuando se ha cargado ya en código Java: 28

29

// Son las 12:43 mitimepicker.setcurrenthour(12); mitimepicker.setcurrentminute(43); // Queremos verlo en formato 24 horas mitimepicker.setis24hourview(true); Para recoger los datos: mitimepicker.getcurrenthour(); mitimepicker.getcurrentminute(); mitimepicker.is24hourview(); Referencia: TimePicker.html http:// developer.android.com/ reference/ android/ widget/ DatePicker Similar al TimePicker, DatePicker permite recoger fechas: Este elemento sí es configurable mediante XML: android:startyear android:endyear android:maxdate // Fecha máxima en formato "mm/dd/yyyy" android:mindate // Fecha mínima android:calendarviewshown // Si se muestra en formato calendario android:spinnersshown // Si se muestra como varios spinners Referencia: DatePicker.html http:// developer.android.com/ reference/ android/ widget/ Toasts Los Toast son popups que nos permiten mostrar información al usuario durante un pequeño espacio de tiempo: Se crean dinámicamente con código Java de la siguiente forma: Toast.makeText(context, "Mensaje del Toast", Toast.LENGTH_SHORT).show(); Con Toast.makeText(Context, String, int) creamos un Toast y con.show() lo mostramos por pantalla. El tiempo que dure monstrándose depende del último parámetro int, que puede ser: 30

31

Toast.LENGTH_SHORT // Mostrar durante un par de segundos Toast.LENGTH_LONG // Mostrar durante más tiempo, unos 5 aproximadamente Referencia: http:// developer.android.com/ reference/ android/ widget/ Toast.html 32