Componentes Basicos de Tipo View
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Componentes Basicos de Tipo View

  • 1,287 views
Uploaded on

Algunos componentes basicos de tipo View de aplicaciones Android

Algunos componentes basicos de tipo View de aplicaciones Android

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,287
On Slideshare
1,099
From Embeds
188
Number of Embeds
2

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 188

http://blog.ecerpa.com 187
http://www.onlydoo.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ANDROIDCORIGLIANO ZEGARRA DANIEL
  • 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 2 1
  • 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)EditTextSi nosotros le colocamos 300dp al ancho del editText. 300 dp
  • 22. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)TEXTVIEW Este es el TextView Nombre del componente XML 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)LINEARLAYOUTEs un contenedor que utiliza el modelo de caja para desplegarlos elementos que están dentro de él. Los widgets ycontenedores secundarios que se declaren dentro de unelemento <LinearLayout> se alinearán en una columna o enun 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 arrastraral 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 9) Arrastrar y TableRow 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 12) Arrastrar y Plain Text soltar sobre el sobre el primer primer TableRow 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 ( plain text ) se encuentra insertado en el XML, ahora se tiene que modificar algunas propiedades
  • 51. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 15) Aparece el campo de texto debidamente perfilado
  • 52. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 16) Seleccionar y arrastrar el TextView sobre el segundo TableRow 17) Arrastrar y soltar sobre el segundo TableRow
  • 53. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 18) El TextView que se ha agregado aparece en el código XML
  • 54. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 19) Seleccionar y arrastrar el Plain Text sobre el 20) Arrastrar y segundo soltar sobre el TableRow segundo TableRow
  • 55. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayou y TableRow 21) El EditText que se ha agregado aparece en el código XML 14) El campo de texto EditText ( plain text ) se encuentra insertado en el XML, ahora se tiene que modificar algunas propiedades
  • 56. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 22) Diseño generado hasta el momento
  • 57. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 23) Seleccionar y arrastrar el TextView sobre el tercer TableRow 24) Arrastrar y soltar sobre el tercer TableRow
  • 58. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 25) El TextView ya se encuentra dentro del TableRows y se le borra el contenido de la propiedad Text
  • 59. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 26) Seleccionar y arrastrar el Button sobre el 27) Arrastrar y Tercer soltar sobre el TableRow tercer TableRow
  • 60. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 28) El Button se logro insertar dentro del TableRow
  • 61. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 29) Seleccionar y arrastrar el TextView sobre el cuarto TableRow 30) Arrastrar y soltar sobre el cuarto TableRow
  • 62. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 31) El TextView se ha agregado en el código XML, además se tiene que modificar sus propiedades 32) Se le agrego estas propiedades
  • 63. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 33) Diseño generado hasta el momento
  • 64. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 34) Agregando color de fondo al TableLayout
  • 65. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 35) Diseño final generado
  • 66. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 67. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 68. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 69. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 70. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 71. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 72. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 73. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 74. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 75. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 76. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout ) Seleccionar y arrastrar el TextView sobre el GridLayout ) Arrastrar y soltar sobre el GridLayout
  • 77. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 78. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 79. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout ) Nuevamente Seleccionar y arrastrar el TextView sobre ) Arrastrar y el GridLayout soltar sobre el GridLayout
  • 80. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 81. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 82. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout ) Nuevamente Seleccionar y arrastrar el TextView sobre el GridLayout ) Arrastrar y soltar sobre el GridLayout
  • 83. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 84. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 85. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout ) Nuevamente Seleccionar y arrastrar el TextView sobre el GridLayout ) Arrastrar y soltar sobre el GridLayout
  • 86. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 87. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  • 88. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Ejemplo : Desarrollar el siguiente diseño
  • 89. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Sobre el código XML digitar lo siguiente :
  • 90. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Sobre el código XML digitar lo siguiente :
  • 91. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
  • 92. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Sobre el código XML digitar lo siguiente :
  • 93. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
  • 94. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Sobre el código XML digitar lo siguiente :
  • 95. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
  • 96. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Sobre el código XML digitar lo siguiente :
  • 97. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
  • 98. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Sobre el código XML digitar lo siguiente :
  • 99. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
  • 100. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Este proceso se repite hasta que se ha logrado obtener el siguiente diseño:
  • 101. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout Este layout consiste en un marco que ocupa toda la pantalla, y donde los controles se dispondrán a partir de la esquina superior izquierda, por lo que es probable que haya elementos que se queden ocultos detrás de otros.
  • 102. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout 2) Arrastrar y soltar el 1)Seleccionar y FrameLayout sobre el arrastrar el escenario FrameLayout sobre el escenario
  • 103. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout 3)Aparece el FrameLayout
  • 104. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout 3)codigo XML generado
  • 105. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  • 106. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  • 107. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  • 108. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  • 109. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  • 110. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  • 111. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  • 112. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout