ANDROID ING IVAN PETRLIK AZABACHE COMPONENTES BASICOS DE
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
COMPONENTES BASICOS DE TIPO VIEW • TRANSITIONS
COMPONENTES BASICOS DE TIPO VIEW • ADVANCED
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) Edit. Text Nombre del componente Ancho del componente Largo del componente
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) Edit. Text
• Nota Importante : • wrap_content : ocupa sólo el espacio necesario para mostrar tu contenido • match_parent : ocupa todo el espacio posible • fill_parent
• 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.
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) Edit. Text
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) Edit. Text
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) Edit. Text
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) Edit. Text
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) Edit. Text
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) Edit. Text
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) Edit. Text Paso 1 : Paso 2 : 2 1
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) Edit. Text Paso 3 : Finalmente aparece así el Edit. Text : 100 dp
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) Edit. Text Si nosotros le colocamos 300 dp al ancho del edit. Text. 300 dp
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) TEXTVIEW Este es el Text. View XML Nombre del componente Texto o etiqueta del textview Ancho del componente Largo del componente
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) BUTTON Nombre del componente Texto del boton Ancho del componente Largo del componente
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) RADIOBUTTON Nombre del componente Texto del radio button Ancho del componente Largo del componente
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) CHECKBOX Nombre del componente Texto del radio button Largo del componente Ancho del componente
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) SPINNER Nombre del componente Largo del componente Ancho del componente
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) PROGRESSBAR Nombre del componente Largo del componente Ancho del componente
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 <Linear. Layout> se alinearán en una columna o en un fila, uno detrás de otro.
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUT Orientación del contenedor Largo del contenedor Ancho del contenedor
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUT
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUT
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUT
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Relative. Layout • 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.
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Relative. Layout • Cuando se crea un proyecto e n el main. xml existe e implementado el Linear. Layout. • Este Linear. Layout se tiene quitar para agregarle el Relative. Layout. • A continuación vamos a seguir los pasos necesario para implementar un Relative. Layout y agregar un componente.
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Relative. Layout 2) Soltar sobre el escenario 1) Seleccionar y arrastrar al escenario
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Relative. Layout 3) Aparece el Relative. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Relative. Layout 4) Seleccionar y arrastrar el Button y soltarlo sobre el escenario
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Relative. Layout 5) Soltar el Button sobre el escenario
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Relative. Layout 6) Otra vez Seleccionar y arrastrar el Button y soltarlo sobre el escenario
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Relative. Layout 7) Soltar el Button sobre el escenario
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout 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. • Table. Row Son un conjunto elementos del Table. Layout , podemos controlar el número de filas que aparecerán en nuestra tabla.
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row Sobre un proyecto nuevo , se realiza el correspondiente diseño, cambiando de Linear. Layout a Table. Layout. 2) Arrastrar y soltar sobre el escenario 1) Seleccionar y arrastrar al escenario
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 3) Aparece el Layout correspondiente sobre el escenario
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 4) Seleccionar y arrastrar el Table. Row al escenario 5) Arrastrar y soltar sobre el escenario, esta operación se va ha repetir cuatro veces
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 6) 4 Filas generadas 7) Allí se observa las 4 filas generadas en el Out. Line
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 8) 4 Seleccionar y arrastrar el Text. View sobre el primer Table. Row 9) Arrastrar y soltar sobre el primer Table. Row
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 10) El Text. View que se ha agregado aparece en el código XML
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 11) Seleccionar y arrastrar el Plain Text sobre el primer Table. Row 12) Arrastrar y soltar sobre el primer Table. Row
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 13) El campo de texto esta finalmente insertado sobre el primer Table. Row
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 14) El campo de texto Edit. Text ( plain text ) se encuentra insertado en el XML, ahora se tiene que modificar algunas propiedades
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 15) Aparece el campo de texto debidamente perfilado
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 16) Seleccionar y arrastrar el Text. View sobre el segundo Table. Row 17) Arrastrar y soltar sobre el segundo Table. Row
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 18) El Text. View que se ha agregado aparece en el código XML
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 19) Seleccionar y arrastrar el Plain Text sobre el segundo Table. Row 20) Arrastrar y soltar sobre el segundo Table. Row
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layou y Table. Row 21) El Edit. Text que se ha agregado aparece en el código XML 14) El campo de texto Edit. Text ( plain text ) se encuentra insertado en el XML, ahora se tiene que modificar algunas propiedades
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 22) Diseño generado hasta el momento
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 23) Seleccionar y arrastrar el Text. View sobre el tercer Table. Row 24) Arrastrar y soltar sobre el tercer Table. Row
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 25) El Text. View ya se encuentra dentro del Table. Rows y se le borra el contenido de la propiedad Text
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 26) Seleccionar y arrastrar el Button sobre el Tercer Table. Row 27) Arrastrar y soltar sobre el tercer Table. Row
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 28) El Button se logro insertar dentro del Table. Row
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 29) Seleccionar y arrastrar el Text. View sobre el cuarto Table. Row 30) Arrastrar y soltar sobre el cuarto Table. Row
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 31) El Text. View se ha agregado en el código XML, además se tiene que modificar sus propiedades 32) Se le agrego estas propiedades
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 33) Diseño generado hasta el momento
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 34) Agregando color de fondo al Table. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Table. Layout y Table. Row 35) Diseño final generado
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout ) Seleccionar y arrastrar el Text. View sobre el Grid. Layout ) Arrastrar y soltar sobre el Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout ) Nuevamente Seleccionar y arrastrar el Text. View sobre el Grid. Layout ) Arrastrar y soltar sobre el Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout ) Nuevamente Seleccionar y arrastrar el Text. View sobre el Grid. Layout ) Arrastrar y soltar sobre el Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout ) Nuevamente Seleccionar y arrastrar el Text. View sobre el Grid. Layout ) Arrastrar y soltar sobre el Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Ejemplo : Desarrollar el siguiente diseño
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Sobre el código XML digitar lo siguiente :
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Sobre el código XML digitar lo siguiente :
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Mostrar el diseño :
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Sobre el código XML digitar lo siguiente :
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Mostrar el diseño :
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Sobre el código XML digitar lo siguiente :
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Mostrar el diseño :
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Sobre el código XML digitar lo siguiente :
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Mostrar el diseño :
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Sobre el código XML digitar lo siguiente :
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Mostrar el diseño :
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Grid. Layout Este proceso se repite hasta que se ha logrado obtener el siguiente diseño:
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Frame. Layout 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.
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Frame. Layout 2) Arrastrar 1)Seleccionar y arrastrar el Frame. Layout sobre el escenario soltar el Frame. Layout sobre el escenario y
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Frame. Layout 3)Aparece el Frame. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Frame. Layout 3)codigo XML generado
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Frame. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Frame. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Frame. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Frame. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Frame. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Frame. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Frame. Layout
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) • Frame. Layout
- Slides: 112