Diferencia entre revisiones de «Usuario:ManuelRomero/Android/Interfaz/elementos»

Última revisión de 04:44 16 dic 2012

DESARROLLO DE APLICACIONES CON ANDROID SDK

Contenido

• 1 Diseño de interfaz de usuario
  • 1.1 Introducción
  • 1.2 android.view.View
  • 1.3 android.widget
  • 1.4 acceder a un componente en código
  • 1.5 TextView
  • 1.6 Atributos especiales de TextView
  • 1.7 Unidades de medida de los atributos
  • 1.8 EditText
  • 1.9 Spinner
  • 1.10 Button
  • 1.11 Checkbox
  • 1.12 ToggleButton
  • 1.13 Switch
  • 1.14 RadioButton
  • 1.15 Fechas y horas
  • 1.16 ProgressBar
  • 1.17 SeekBar
  • 1.18 RatingBar
  • 1.19 Chronometer

Diseño de interfaz de usuario

Elementos básicos | Intent |  Layout | Contenedores | Menú | practica

Introducción

• Si hablamos de aplicaciones android para móviles y tablets, casi inevitablemente estamos hablando de aplicaciones de interfaz gráfica.
• Es una parte muy importante y muy trabajada para enfocar el desarrollo.

android.view.View

• La clase base para construir elementos gráficos es android.view.View
• Representa un área rectangular en la pantalla
• Es la clase base para la mayoría de los controles y diseños de interfaz de usuario dentro de Android SDK

android.widget

• Referencia

http://developer.android.com/reference/android/widget/package-summary.html

• Es un paquete que contiene la mayoría de los los controles gráficos para usar en nuestro interfaz gráfico
• Todos estos controles normalmente derivan de la clase android.view.View
• Algunas clases de este paquete que deberíamos conocer

Button, CheckBox,RadioButton. Spinner, ImageButton, TextView, EditText, AnalogClock, DigitalClock, CalendarView, DatePiker, Filter, Gallery,VideoView AbsoluteLayout, FrameLayout, GridLayout, TableLayout, RelativeLayout ProgressBar, TabHost, Toast

acceder a un componente en código

1. identificaarlo en el diseño android:id
2. podremos acceder a él por el método findViewById()

• Ejemplo quiere acceder a un texto

1. En el fichero xml

<TextView
 android:id="tNombre">
</TextView>

1. En el código

TextView nombre = (TextView)findViewById(R.id.tNombre);

TextView

• Referenica

http://developer.android.com/reference/android/widget/TextView.html 

• Representa un texto escrito en pantalla; sería un típico label o etiqueta
• Deriva de la clase View
• Definido en el paquete android.widget

Atributos especiales de TextView

text

• Texto que se muestra en la pantalla

android:text={cadena raw o referencia a un recurso cadena}

typeFace

Es el tipo de letra y tiene definidos los siguientes valores

android:typeface={normal|sans|serif|monospace}

textStyle

Es el tipo de letra y los valores definidos son los siguientes

android:textStyle={normal|bold|italic}

• Siempre que especificamos una lista de valores representan enumeraciones por lo que el primer elemento corresponde al valor cero.
• es decir las siguientes definiciones serías homólogas

android:textStyle ="normal"
android:textStyle ="0"
android:typeFace="monospace"
android:typeFace="3"

ems, maxEms, minEms lines, maxLines, minLines, ellipsize

• Son atributos para especificar la anchura y número de líneas que puede ocupar el texto
• Si no se especifica nada el texto se alargará en una línea al máximo del dispositivo para visualizarse

los atributos ems son una buena forma de especificar el ancho de un texto independientemenete del tamaño del tipo de letra. la propiedad android:layout_width="wrap_content", en otro caso no tiene efecto.

• ems especifica el ancho de la letra M
• Si el texto no cabe en el ancho especificado se corta, para que el usuario perciba que falta texto, debemos especificar la propiedad ellipsize para que sustituya los dos últimos caracteres por

ellipsize ={"none","start","middle","end","marquee"}

AutoLink, linkClickable

• autoLink permite especificar que el texto que tiene un significado especial (número de teléfono, dirección de correo, url, dirección según map), se visualice como texto sensible, es decir con otro color y con posibilidad de interactuar con él.
• Los valores posibles son

android:autoLink={"none"|"web"|"email"|"phone"|"map"|"all"}

• linkClickable permite o no que el usuario interactue con el texto.
• Sus valores por lo tanto son booleanos:

linkClickable={"true"|"false"}

• Con esta propiedad a true (valor por defecto) el usuario puede interactuar con el texto, lo que provocará que se ejecute la aplicación correspondiente (Dial del teléfono, navegador web para url, cliente de correo para email y map para la dirección de una ubiación).

Unidades de medida de los atributos

• Son muchas las unidades de medida para especificar tamaños, anchuras, etc.
• Iremos analizando las diferentes unidades que podemos usar

1. dp densidad de píxeles independientes, es una unidad abstracta (no corresponde a tamaño físico) y se basa en la densidad física de la pantalla. Es una medida proporcional y usarla proporciona compatibilidad con las diferentes pantallas sean de móvil o tablet. Es recomendado su uso.
2. px Píxeles,son los píxeles reales de la pantalla. Su valor real variará según la resolución de la pantalla que tengamos.
3. en centímetros o Cm es un tamaño físico de la pantalla.
4. mm milímetros, igual que el caso de en son tamaños físico de la pantalla.
5. pt puntos la medida es representada por 1/72 de una pulgada en función del tamaño físico de la pantalla.
6. sp escala de píxeles independientes es como la unidad dp, pero también es escalado por la preferencia del usuario tamaño de la fuente. Se recomienda utilizar esta unidad al especificar tamaños de fuente, por lo que se ajusta tanto para la densidad de pantalla y preferencias del usuario.

• Los

EditText

• Deriva de la clase TextView
• en la caja de texto se puede usar el menú contextual para copiar y pegar texto. no hay que hacer nada para poder usarlo
• Propiedades principales

hint

• texto que aparece en el EditText por defecto, y cuando escribes desaparece
• Se utiliza como ayuda al usuario pasa saber que se espera que escriba

lines

• Número de líneas que se deja que escriba. Si no se especifica alargará el EditText según lo necesite.

Establecer filtros de entrada

InputType y InputFilter

http://developer.android.com/reference/android/widget/TextView.html#attr_android:inputType

• Algunos de los valores más utilizados

text textUri textEmailAddress textPassword number phone date, ...

• InputFilter, no es una propiedad es una interfaz

http://developer.android.com/reference/android/text/InputFilter.html

• La manera de usarlo es en tres pasos

1. Identifico el TextField al que se lo quiero asignar
2. Defino el filtro como un array de filtros
3. Establezco cada filtro que me interese
4. Lo vinculo al EditText con el método setFilteres

• Ejemplo limitar una caja de texto a 5 caracteres y en mayúsculas

EditText nombre = (EditText) findViewById(R.id.nombre))
InputFilter[] FilterArray = new InputFilter[2]; 
FilterArray[0] = new InputFilter.LengthFilter(5); 
FilterArray[1]=new InputFilter.AllCaps();
et.setFilters(FilterArray);

Para realizar filtros mas especializados hay que sobreescribir el método filter() de la interfaz InputFilter

Spinner

• Es un tipo de TextEdit donde le valor que vamos a tomar sale de una lista de valores
• Existen diferentes maneras de asignar la lista de valores al Spinner
• Una manera de hacerlo es con la propiedad entries

android:entries = @array/lista_valores
android:prompt="Selecciona una ciudad"

• Para recuperar el valor seleccionado y pasarlo a un TextView

Spinner ciduad = (Spinner) findViewById(R.id.mi_ciudad)
TextView miCiudd = (TextView)ciudad.getSelectedView()

Button

Checkbox

ToggleButton

Switch

RadioButton

Fechas y horas

ProgressBar

SeekBar

RatingBar

Chronometer