Android UI. Darío Fernando Chamorro Vela Junio 2012

Transcripción

1 Android UI Darío Fernando Chamorro Vela Junio 2012

2 Android UI View ViewGroup View Activity ViewGroup View View setcontentview() View

3 Propiedades Comunes Width Padding Margin Heigth Padding Contenido

4 Contenedores

5 LinearLayout El contenido es alineado uno en seguida de otro. Propiedades Padre Orientation : Vertical - Horizontal Gravity : Posición relativa de todo el contenido Propiedades Hijo Layout_Weight : peso o porcentaje que ocupa dicho contenido en el LinearLayout

6 FrameLayout El contenido se superpone uno a otro en orden ascendente. Propiedades Hijo Layout_gravity : posición relativa del elemento dentro del padre.

7 RelativeLayout El contenido se organiza en relacion al padre y a otros Widgets. Propiedades Hijo Layout_ParentBottom : Alinea el elemento en la parte baja del padre 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

8 TableLayout El contenido es ordenado en forma de tabla, utiliza un contenedor interno TableRow. Propiedades Padre Layout_span : # de columnas StretchColumns : expande una o mas columnas para utilizar el espacio del padre ShrinkColumns : comprime una o mas columnas para ajustar el espacio del padre Propiedades Hijo Layout_Weight : peso o porcentaje que ocupa dicho contenido en el TableLayout o en el TableRow

9 ScrollView El padre puede desplazar la vista para mostrar o esconder contenido, solo puede tener un hijo Propiedades Padre Orientation : Vertical - Horizontal

10 View Basicos

11 View para ingresar texto plano Propiedades Gravity : Posición relativa de todo el contenido TextColor : Color del Texto TextStyle : Estilo del texto TextView TEXT VIEW TEXT VIEW TEXT VIEW 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

12 Button View que efectúa una acción al ser presionado Propiedades Text : Texto del Button Codigo setonclicklistener : Realiza una acción despues de realizarse un Click Aceptar

13 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

14 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

15 CheckBox View que permite realizar una selección de un item. Propiedades Cheked: Estado actual del CheckBox Button: Imagen del icono seleccionable Checkbox Activado! Checkbox Desactivado! Codigo setchecked : Fija el estado del CheckBox ischecked : Determina el estado del CheckBox

16 RadioGroup RadioButton View que permite realizar una selección única entre una lista de opciones. Propiedades Padre CheckedButton: RadioButton Seleccionado Orientation: Orientación del contenido, Vertical - Horizontal RadioButton 1 RadioButton 2 RadioButton 3 Propiedades Hijo Checked: Fijar estado inicial del RadioButton Button: Imagen del icono seleccionable

17 View Especiales

18 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;

19 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

20 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

21 Spinner Despliega una lista opciones de seleccionables. Propiedades Entries: Fija el Array de datos a partir de un Recurso Opciones Codigo setdropdownviewresource: Enlaza a un recurso especifico de Datos

22 AutoCompletEditText EditText que despliega una lista de opciones según se ingresa el texto. Propiedades CompletionHint: Define el valor por defecto al desplegar las opciones CompletionThreshold: Define el numero mínimo de caracteres para generar la recomendación Da Darío Daniel Danny Daniela

23 TabsView Organiza el contenido por medio de pestañas en una sola pantalla Componentes TabHost: Contenedor Padre de las pestañas y del contenido TAB 1 TAB 2 TAB 3 TabWidget: Implementa la fila de TabButtons, debe tener como FrameLayout: Contiene el contenido de los tabs, debe tener como

24 Menú Contextuales

25 Options Menu Acciones relevantes para el Activity Actual, como Buscar, Configuraciones. Agregar Codigo oncreateoptionsmenu : Constructor del Options Menu onoptionsitemselected : Se define las acciones a realizar después de seleccionar un Item Opt 1 Opt 2 Opt 2

26 Contextual Menu Acciones especificas para un elemento de la interfaz de usuario. Codigo Opt 2 oncreatecontextmenu : Constructor del Contextual Menu oncontextitemselected : Se define las acciones a realizar después de seleccionar un Item Opt 3 Opt 4 Opt 5

27 Alertas y Mensajes

28 Toast Mensaje temporal que sirve para informar al usuario de una eventualidad que no requiera su interacción Codigo Toast.makeText : Construye el Toast con el contexto, mensaje y tiempo Notificación para el Usr

29 AlertDialog Alerta para informar al usuario de una eventualidad, esta requiere la interacción del usuario Codigo AlertDialog.Builder : Construye la alarma con las características definidas Titulo Contenido de la Alerta! + Button - Button

30 Navegación

31 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

32 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);

33 Información Sitio Oficial Android Developer

34 Gracias!