1 / 112

ANDROID

ANDROID. ING.IVAN PETRLIK AZABACHE. COMPONENTES BASICOS DE TIPO VIEW. FORM WIDGETS. COMPONENTES BASICOS DE TIPO VIEW. LAYOUTS. COMPONENTES BASICOS DE TIPO VIEW. COMPOSITE. COMPONENTES BASICOS DE TIPO VIEW. IMAGES & MEDIA. COMPONENTES BASICOS DE TIPO VIEW. TIME & DATE.

Download Presentation

ANDROID

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. ANDROID ING.IVAN PETRLIK AZABACHE

  2. COMPONENTES BASICOS DE TIPO VIEW • FORM WIDGETS

  3. COMPONENTES BASICOS DE TIPO VIEW • LAYOUTS

  4. COMPONENTES BASICOS DE TIPO VIEW • COMPOSITE

  5. COMPONENTES BASICOS DE TIPO VIEW • IMAGES & MEDIA

  6. COMPONENTES BASICOS DE TIPO VIEW • TIME & DATE

  7. COMPONENTES BASICOS DE TIPO VIEW • TRANSITIONS

  8. COMPONENTES BASICOS DE TIPO VIEW • ADVANCED

  9. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) EditText Nombre del componente Ancho del componente Largo del componente

  10. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) EditText

  11. Nota Importante : • wrap_content : ocupa sólo el espacio necesario para mostrar tu contenido • match_parent : ocupa todo el espacio posible • fill_parent

  12. Observación : • Nótese que anteriormente “match_parent" era conocido como “fill_parent“, luego es muy común encontrar este valor en lugar del anterior. • A efectos prácticos son lo mismo, sin embargo la evolución de Android favorece este nuevo nombre.

  13. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) EditText

  14. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) EditText

  15. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) EditText

  16. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) EditText

  17. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) EditText

  18. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) EditText

  19. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) EditText Paso 1 : Paso 2 : 2 1 1 2

  20. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) EditText Paso 3 : Finalmente aparece así el EditText : 100 dp

  21. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) EditText Si nosotros le colocamos 300dp al ancho del editText. 300 dp

  22. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) TEXTVIEW XML Este es el TextView Nombre del componente Texto o etiqueta del textview Ancho del componente Largo del componente

  23. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) BUTTON Nombre del componente Texto del boton Ancho del componente Largo del componente

  24. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) RADIOBUTTON Nombre del componente Texto del radio button Ancho del componente Largo del componente

  25. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) CHECKBOX Nombre del componente Texto del radio button Largo del componente Ancho del componente

  26. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) SPINNER Nombre del componente Largo del componente Ancho del componente

  27. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) PROGRESSBAR Nombre del componente Largo del componente Ancho del componente

  28. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUT Es un contenedor que utiliza el modelo de caja para desplegar los elementos que están dentro de él. Los widgets y contenedores secundarios que se declaren dentro de un elemento <LinearLayout> se alinearán en una columna o en un fila, uno detrás de otro.

  29. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUT Orientación del contenedor Largo del contenedor Ancho del contenedor

  30. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUT

  31. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUT

  32. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUT

  33. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • RelativeLayout • Su principal característica es que los widgets que estén dentro de este contenedor basarán su posición en relación con los otros elementos. De esta forma, podemos definir que el widget X quede debajo del widget Y y que éste a su vez se alinie verticalmente con el widget Z.

  34. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • RelativeLayout • Cuando se crea un proyecto e n el main.xml existe e implementado el LinearLayout . • Este LinearLayout se tiene que quitar para agregarle el RelativeLayout. • A continuación vamos a seguir los pasos necesario para implementar un RelativeLayout y agregar un componente.

  35. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • RelativeLayout 2) Soltar sobre el escenario 1) Seleccionar y arrastrar al escenario

  36. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • RelativeLayout 3) Aparece el RelativeLayout

  37. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • RelativeLayout 4) Seleccionar y arrastrar el Button y soltarlo sobre el escenario

  38. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • RelativeLayout 5) Soltar el Button sobre el escenario

  39. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • RelativeLayout 6) Otra vez Seleccionar y arrastrar el Button y soltarlo sobre el escenario

  40. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • RelativeLayout 7) Soltar el Button sobre el escenario

  41. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • TableLayout Te ayudará a posicionar tus widgets con la ayuda de celdas. Nosotros controlamos el número de columnas y filas, las primeras pueden adaptarse al contenido que le queramos asignar mostrándose más estrechas o más amplias según sea el caso. • TableRow Son un conjunto elementos del TableLayout ,podemos controlar el número de filas que aparecerán en nuestra tabla.

  42. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • TableLayout y TableRow Sobre un proyecto nuevo , se realiza el correspondiente diseño, cambiando de LinearLayout a TableLayout. 2) Arrastrar y soltar sobre el escenario 1) Seleccionar y arrastrar al escenario

  43. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • TableLayout y TableRow 3) Aparece el Layout correspondiente sobre el escenario

  44. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • TableLayout y TableRow 4) Seleccionar y arrastrar el TableRow al escenario 5) Arrastrar y soltar sobre el escenario, esta operación se va ha repetir cuatro veces

  45. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • TableLayout y TableRow 6) 4 Filas generadas 7) Allí se observa las 4 filas generadas en el OutLine

  46. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • TableLayout y TableRow 8) 4Seleccionar y arrastrar el TextView sobre el primer TableRow 9) Arrastrar y soltar sobre el primer TableRow

  47. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • TableLayout y TableRow 10) El TextView que se ha agregado aparece en el código XML

  48. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • TableLayout y TableRow 11) Seleccionar y arrastrar el PlainText sobre el primer TableRow 12) Arrastrar y soltar sobre el primer TableRow

  49. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • TableLayout y TableRow 13) El campo de texto esta finalmente insertado sobre el primer TableRow

  50. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • TableLayout y TableRow 14) El campo de texto EditText ( plaintext ) se encuentra insertado en el XML, ahora se tiene que modificar algunas propiedades

More Related