Descargar la presentación
La descarga está en progreso. Por favor, espere
Publicada porReina Ayo Modificado hace 9 años
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 Largo del componente Ancho del componente Nombre 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 : 1 2 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 Nombre del componente Ancho del componente Largo del componente Texto o etiqueta del textview Este es el TextView
23
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) BUTTON Nombre del componente Ancho del componente Largo del componente Texto del boton
24
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) RADIOBUTTON Nombre del componente Ancho del componente Largo del componente Texto del radio button
25
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) CHECKBOX Ancho del componente Texto del radio button Nombre del componente Largo del componente
26
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) SPINNER Largo del componente Ancho del componente Nombre 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 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 1) Seleccionar y arrastrar al escenario 2) Soltar sobre el 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. 1) Seleccionar y arrastrar al escenario 2) Arrastrar y soltar sobre el 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 Plain Text 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 ( 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 segundo TableRow 20) Arrastrar y soltar sobre el segundo TableRow
55
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) TableLayou y TableRow 14) El campo de texto EditText ( plain text ) se encuentra insertado en el XML, ahora se tiene que modificar algunas propiedades 21) El EditText que se ha agregado aparece en el código XML
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 Tercer TableRow 27) Arrastrar y soltar sobre el 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 el GridLayout ) Arrastrar y 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 1) Seleccionar y arrastrar el FrameLayout sobre el escenario 2) Arrastrar y soltar el 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
Presentaciones similares
© 2024 SlidePlayer.es Inc.
All rights reserved.