Android UI

Darío Fernando Chamorro Vela

Junio 2012

ViewGroup

ViewGroup

View

View

View View

View

Activity

setContentView()

Android UI

Propiedades Comunes

Width

Heigth

Padding

Padding

Margin

Contenido

Contenedores

LinearLayout

El contenido es alineado uno en seguida de otro.

Propiedades Padre

Orientation : Vertical - Horizontal

Propiedades Hijo

Layout_Weight : peso o porcentaje que ocupa dicho contenido en el LinearLayout

Gravity : Posición relativa de todo el contenido

FrameLayout

El contenido se superpone uno a otro en orden ascendente.

Propiedades Hijo

Layout_gravity : posición relativa del elemento dentro del padre.

RelativeLayout

Propiedades Hijo

Layout_ParentBottom : Alinea el elemento en la parte baja del padre

El contenido se organiza en relacion al padre y a otros Widgets.

Layout_CenterInParent : ubica el elemento en el centro del padre

Layout_Below: Ubica el elemento debajo del elemento referenciado

Layout_AlignLeft: Alinea el elemento a la izquierda del elemento referenciado

TableLayout

El contenido es ordenado en forma de tabla, utiliza un contenedor interno TableRow.

Propiedades Padre

Layout_span : # de columnas

Propiedades Hijo

Layout_Weight : peso o porcentaje que ocupa dicho contenido en el TableLayout o en el TableRow

StretchColumns : expande una o mas columnas para utilizar el espacio del padre

ShrinkColumns : comprime una o mas columnas para ajustar el espacio del padre

ScrollView

El padre puede desplazar la vista para mostrar o esconder contenido, solo puede tener un hijo

Propiedades Padre

Orientation : Vertical - Horizontal

View Basicos

TextView View para ingresar texto plano

Propiedades

TEXT VIEW TEXT VIEW

TEXT VIEW

Gravity : Posición relativa de todo el contenido

TextColor : Color del Texto

TextStyle : Estilo del texto

TextSize : Tamaño del Texto

Text : Contenido del View

TypeFace : Fuente del Texto

ShadowColor : Color de la Sombra

ShadowDx : Posición de la sombra en X

Shadow Dy : Posición de la sombra en Y

ShadowRadius : Dispersión de sombra

Button

View que efectúa una acción al ser presionado

Propiedades

Text : Texto del Button

Aceptar

Codigo

setOnClickListener : Realiza una acción despues de realizarse un Click

EditText

View que permite el ingreso de texto

Propiedades

Hint: Texto que se despliega cuando el campo esta vacio

MaxLines: Determina el numero máximo de líneas en el EditText

CursorVisible: Determina si el cursor de texto es visible

InputTipe: Determina el tipo de dato del Texto

Texto de una sola línea

Contenido de Texto en forma de párrafo para el EditText

ImageView

View que puede contener imágenes

Propiedades

Src : Fuente de la Imagen

Codigo

setImageResource : Carga una imagen en el ImageView a partir de un Recurso

CheckBox

View que permite realizar una selección de un item.

Propiedades

Cheked: Estado actual del CheckBox

Checkbox Activado !

Checkbox Desactivado !

Codigo

setChecked : Fija el estado del CheckBox

isChecked : Determina el estado del CheckBox

Button: Imagen del icono seleccionable

RadioGroup – RadioButton

View que permite realizar una selección única entre una lista de opciones.

Propiedades Padre

CheckedButton: RadioButton Seleccionado

RadioButton 1

RadioButton 2

RadioButton 3 Orientation: Orientación del contenido, Vertical - Horizontal

Propiedades Hijo Checked: Fijar estado inicial del RadioButton

Button: Imagen del icono seleccionable

View Especiales

Adapters !! Los adaptadores ofrecen una interfaz de datos común para alimentar el contenido de este tipo de Widgets Convierte los datos en datos visibles

Codigo ArrayAdapter<Clase> nombre = new ArrayAdapter<Clase>(Contexto, Recurso, Datos);

Personalizado

public View getView(int position, View convertView, ViewGroup parent) { return convertView; }

ListView

Arreglo de items seleccionables en forma de lista

Propiedades DividerHeight: Distancia entre los items de la lista

ChoiceMode: Fija el tipo de selección a simple o múltiple

GridView

Arreglo de items seleccionables en dos dimensiones

Propiedades NumColumns: Fija el numero de columnas

VerticalSpacing: Fija el espacio vertical entre items

HorizontalSpacing: Fija el espacio horizontal entre items

ColumnWidth: Fija el ancho de las columnas

Spinner

Despliega una lista opciones de seleccionables.

Opciones

Propiedades Entries: Fija el Array de datos a partir de un Recurso

Codigo setDropDownViewResource: Enlaza a un recurso especifico de Datos

AutoCompletEditText

EditText que despliega una lista de opciones según se ingresa el texto.

Da

Darío

Daniel

Danny

Daniela

Propiedades CompletionHint: Define el valor por defecto al desplegar las opciones

CompletionThreshold: Define el numero mínimo de caracteres para generar la recomendación

TabsView

Organiza el contenido por medio de pestañas en una sola pantalla

TAB 1 TAB 2 TAB 3

Componentes TabHost: Contenedor Padre de las pestañas y del contenido

TabWidget: Implementa la fila de TabButtons, debe tener como id @android:id/tabs

FrameLayout: Contiene el contenido de los tabs, debe tener como id @android:id/tabcontent

Menú Contextuales

Options Menu

Acciones relevantes para el Activity Actual, como Buscar, Configuraciones. Agregar …

Codigo

onCreateOptionsMenu : Constructor del Options Menu

Opt 1 Opt 2 Opt 2

onOptionsItemSelected : Se define las acciones a realizar después de seleccionar un Item

Contextual Menu

Acciones especificas para un elemento de la interfaz de usuario.

Codigo Opt 2

Opt 3

Opt 4

Opt 5

onCreateContextMenu : Constructor del Contextual Menu

onContextItemSelected : Se define las acciones a realizar después de seleccionar un Item

Alertas y Mensajes

Toast

Mensaje temporal que sirve para informar al usuario de una eventualidad que no requiera su interacción

Notificación para el Usr

Codigo

Toast.makeText : Construye el Toast con el contexto, mensaje y tiempo

AlertDialog

Alerta para informar al usuario de una eventualidad, esta requiere la interacción del usuario

Titulo

Contenido de la Alerta !

+ Button - Button

Codigo

AlertDialog.Builder : Construye la alarma con las características definidas

Navegación

Intents !! Forma de representar una acción a través de mensajes. La forma de comunicación de en Android funciona alrededor de Intents y receptores de Intents.

URL GET

Contexto Accion

Navegación !!

Codigo - Crear Intent

Intent intent = new Intent(Contexto , NombreDestino.class);

Codigo – Envio de Datos

Intent.putExtra( “Nombre de Etiqueta”, Valor );

Codigo – Iniciar Activity

startActivity(intent);

Información

Sitio Oficial http://www.android.com Android Developer http://developer.android.com/index.html

Gracias !