Android UI
-
Upload
fabio-hernan-realpe-martinez -
Category
Documents
-
view
211 -
download
2
description
Transcript of Android UI
![Page 1: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/1.jpg)
Android UI
Darío Fernando Chamorro Vela
Junio 2012
![Page 2: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/2.jpg)
ViewGroup
ViewGroup
View
View
View View
View
Activity
setContentView()
Android UI
![Page 3: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/3.jpg)
Propiedades Comunes
Width
Heigth
Padding
Padding
Margin
Contenido
![Page 4: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/4.jpg)
Contenedores
![Page 5: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/5.jpg)
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
![Page 6: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/6.jpg)
FrameLayout
El contenido se superpone uno a otro en orden ascendente.
Propiedades Hijo
Layout_gravity : posición relativa del elemento dentro del padre.
![Page 7: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/7.jpg)
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
![Page 8: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/8.jpg)
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
![Page 9: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/9.jpg)
ScrollView
El padre puede desplazar la vista para mostrar o esconder contenido, solo puede tener un hijo
Propiedades Padre
Orientation : Vertical - Horizontal
![Page 10: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/10.jpg)
View Basicos
![Page 11: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/11.jpg)
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
![Page 12: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/12.jpg)
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
![Page 13: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/13.jpg)
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
![Page 14: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/14.jpg)
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
![Page 15: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/15.jpg)
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
![Page 16: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/16.jpg)
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
![Page 17: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/17.jpg)
View Especiales
![Page 18: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/18.jpg)
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; }
![Page 19: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/19.jpg)
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
![Page 20: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/20.jpg)
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
![Page 21: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/21.jpg)
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
![Page 22: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/22.jpg)
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
![Page 23: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/23.jpg)
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
![Page 24: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/24.jpg)
Menú Contextuales
![Page 25: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/25.jpg)
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
![Page 26: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/26.jpg)
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
![Page 27: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/27.jpg)
Alertas y Mensajes
![Page 28: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/28.jpg)
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
![Page 29: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/29.jpg)
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
![Page 30: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/30.jpg)
Navegación
![Page 31: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/31.jpg)
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
![Page 32: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/32.jpg)
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);
![Page 33: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/33.jpg)
Información
Sitio Oficial http://www.android.com Android Developer http://developer.android.com/index.html
![Page 34: Android UI](https://reader033.fdocuments.us/reader033/viewer/2022050921/557202b34979599169a3f630/html5/thumbnails/34.jpg)
Gracias !