Usuario:ManuelRomero/Android/Interfaz - Historial de revisiones

ManuelRomero en 23:32 28 nov 2012

2012-11-28T23:32:08Z

ManuelRomero en 23:27 28 nov 2012

2012-11-28T23:27:15Z

ManuelRomero: /* GridLayout */

2012-11-28T23:18:20Z

‎GridLayout

ManuelRomero: /* GridLayout */

2012-11-28T23:09:17Z

‎GridLayout

ManuelRomero: /* TableLayout */

2012-11-28T23:03:16Z

‎TableLayout

ManuelRomero: /* TableLayout */

2012-11-28T22:36:12Z

‎TableLayout

ManuelRomero en 22:33 28 nov 2012

2012-11-28T22:33:25Z

ManuelRomero: /* RelativeLayout */

2012-11-28T22:01:26Z

‎RelativeLayout

ManuelRomero en 21:39 28 nov 2012

2012-11-28T21:39:19Z

ManuelRomero en 11:45 28 nov 2012

2012-11-28T11:45:36Z

← Revisión anterior		Revisión de 23:32 28 nov 2012
Línea 22:		Línea 22:
	#layout_width = (match_parent\|wrap_content)		#layout_width = (match_parent\|wrap_content)
	#layout_margin		#layout_margin
−
−	~~===FrameLayout===~~
−	*Es el layout más sencillo de utilizar, y a veces conviene tenerlo en cuenta
−	*Es especialmente útil si sólo queremos mostrar un elemento
−	*Si mostramos varios, los mostrará desde la esquina superior izquierda, pero se solaparán
−	*Esta posición se puede cambiar con la propiedad '''''layout_gravity'''''del '''''FrameLayout'''''
−	*Para distribuirlo por la pantalla de forma que no se solape se puede modificar la propiedad '''''layout_gravity''''' de los objetos '''''View''''' que ubiquemos en el layout
−	*Algunos de sus atributos importantes:
−	~~#'''''foreground''''' Imagen o color de fondo~~
−	~~#'''''foregroundGravity''''' posicion de la imagen de fondo~~
−	~~#'''''measureAllChildern'''''~~
−	~~#'''''layout_gravity'''''ubicación en la pantalla de los elementos que incorporemos~~
−	~~{\| class="wikitable"~~
−	~~\|+ Valores de la propiedad gravity~~
−	~~! Valor !! Posición~~
−	\|-
−	~~\| top \|\| arriba~~
−	\|-
−	~~\| bottom \|\| abajo~~
−	\|-
−	~~\| left \|\| izquierda~~
−	\|-
−	~~\| rigth \|\| derecha~~
−	\|-
−	~~\| center_vertical \|\| centrado verticalmente~~
−	\|-
−	~~\| center_horizontal \|\| centrado_horizontalmente~~
−	\|-
−	~~\| fill_horizontal \|\| arriva~~
−	\|-
−	~~\| center \|\| centrado~~
−	\|-
−	~~\| fill \|\| ocupa todo el espacio~~
−	\|-
−	\|}
−	*Es posible especificar varios valores separados por '''''\|'''''
−	~~{{Actividad\|~~
−	~~Realiza un FrameLayout que tenga una _~~
−	~~#imagen de fondo centrada~~
−	*En cuada una de las esquitas
−	~~#un cuadrado~~
−	~~#un rectángulo~~
−	~~#un botón~~
−	~~#un anillo~~
−	}}
−	~~[[Imagen:FrameLayout.png\|180px]]~~
−	~~;Referencia para las figuras ''shape''~~
−	~~http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape~~
−
−	~~===LinearLayout===~~
−	*Organiza sus componentes View en una sola fila o en una sola comuna
−	*Los atributos se pueden encontrar en ''android.widget.LinearLayout.LayoutParams
−	*Alguno de sus atributos mas importantes
−	~~#'''''orientation'''''=''horizontal\|vertical''~~
−	~~#'''''gravity''''' colocación de los componentes~~
−	~~#'''''weighSum''''' Suma de todos los pesos de los componente por defecto 1~~
−	~~#'''''layout_gravity''''' colocación de un componente~~
−	~~#'''''layout_weight''''' peso de un componente~~
−	~~Es un tipo layout muy sencillo de utilizar a la hora de poner simplemente componentes~~
−	~~{{Actividad\|~~
−	*incluir 9 imágenes alternando flechas, óvalos y rectángulos jugando con las propiedades ''gravity'' y experimentar los resultados }}
−	~~[[Imagen:LinearLayout.png\|180px]]~~
−
−	~~===RelativeLayout===~~
−	*Permite especificar los '''''View''''' en posición relativa o respecto a otro '''''View'''''
−	*También se puede especifivar el control '''''View''''' con respecto a los límites del contenedor padre
−	*Este tipo de distribución de controles View por un contenedor puede resultar a priory un poco complicada, pero controlando los atributos de dicho layout, se pueden hacer diseños muy atractivos sin tener que usar diferentes niveles de layouts.
−	*Este tipo de layout tiene varios atributos importantes que se usan bastante
−	~~#gravity~~
−	~~#layoutCenterInParent~~
−	~~#layoutCenterHorizontal~~
−	~~#layoutCenterVertical~~
−
−	~~{{Actividad\|~~
−	~~Realiza inclyuendo botones y la flecha anterior el diseño que se propone en la imagen siguiente}}~~
−	~~[[Archivo:relativeLayout.png\|180px]]~~
−
−	~~{\| class="wikitable"~~
−	~~\|+Propiedades usadas en Relative Layout~~
−	~~! Propiedad !! Valores!!Significado~~
−	\|-
−	~~\| gravity \|\| descritos antes\|\| Ubicación de los View dentro del diseño~~
−	\|-
−	~~\| layout_centerInParent \|\| True\|False \|\|Centra Horizontal y Verticalmente los View dentro del padre~~
−	\|-
−	~~\| layout_centerHorizontal \|\| True\|False \|\|~~
−	\|-
−	~~\| layout_centerVetical \|\|True\|False \|\|~~
−	\|-
−	~~\| layout_alignParentBottom \|\|True\|False \|\| Alinear el View en el borde inferior del padre~~
−	\|-
−	~~\| layout_alignParentLeft \|\|True\|False \|\|~~
−	\|-
−	~~\| layout_alignParentRight \|\|True\|False \|\|~~
−	\|-
−	~~\| layout_alignRight \|\| Un identificador de View \|\|Alinea el borde derecho de un View con el borde derecho del otro View especificado en el valor de la propiedad~~
−	\|-
−	~~\| layout_alignLeft \|\|Un identificador de View \|\| borde izquierdo con borde izquierdo~~
−	\|-
−	~~\| layout_alignTop \|\|Un identificador de View \|\| Borde superior con borde superior~~
−	\|-
−	~~\| layout_alignBottom \|\|Un identificador de View \|\| Borde inferior con borde inferior~~
−	\|-
−	~~\| layout_above \|\|Un identificador de View \|\| borde inferior de un View encima del otro View especificado~~
−	\|-
−	~~\| layout_below \|\|Un identificador de View \|\| borde superior debajo del otro View especificado~~
−	\|-
−	~~\| layout_toLeftOf \|\|Un identificador de View \|\|Ubica el borde derecho a la izquierda del View especificado~~
−	\|-
−	~~\| layout_to_RightOf \|\|Un identificador de View \|\|Ubica el borde izquierdo a la derecha del View especificado~~
−	\|-
−	\|}
−	~~===TableLayout===~~
−	*El diseño de este layout recuerda un poco al diseño de tablas en html
−	*Organiza sus View en filas
−	*Para añadir componentes dentro de cada fila se utiliza diseños '''''TableRow'''''
−	*Un '''''TableRow''''' se comporta como un '''''LinearLayout''''' con ''orientation=horizontal''
−	*El orden en que se incorpore es el que mantendrá visualmente
−	*Si no queremos usar alguna columna se debe de especificar números y no contabilizar aquellos que correspondan a las columnas que no queremos que aparezcan (ver ejemplo)
−	*El tamaño de las columnas se ajustará a la columna con más tamaño
−	~~;Lista de atributos más significativos~~
−	*La lista completa la tenemos en '''''android.widget.TableLayout.LayoutParams'''''
−	~~{\| class="wikitable"~~
−	~~\|+ Atribulos de TableLayout~~
−	~~! Atributo !! Valor !! Descripción~~
−	\|-
−	~~\| collapseColumns \|\| Cadena o recurso de cadena. p.e."0,1,2" \|\| Lista plegable de indices de columnas~~
−	\|-
−	~~\| shrinkColumns\|\|Lista de números. P.e. "1,2,3"\|\|Columnas que se contrain~~
−	\|-
−	~~\| stretchColumns\|\|Lista de números. P.e. "1,2,3"\|\|Columnas que se extienden~~
−	\|-
−	~~\| layout_column \|\| un número entero\|\| Indice de la columna en la que un ''View'' se debe mostrar~~
−	\|-
−	~~\| layout_span~~
−	\|}
−	~~{{Actividad\|~~
−	*Realiza el diseño que se muestra en la imagen.
−	*Prueba a modificar las propiedades
−	}}
−	~~[[Imagen:tableLayoutejemplo.png\|180px]]~~
−	~~===GridLayout===~~
−	*Introducido en Android 4.0 (API 14)
−	*Organiza los componentes en una cuadrícula
−	*Es parecido al '''''TableLayout''''', pero a direfencia de éste cada ''View'' puede abarcar varios filas y/o columnas.
−	*En este caso la renderización es mucho mejor, ya que son los View contenidos quien indica donde quiere ser ubicado
−	~~;Lista de atributos más significativos~~
−	*La lista completa la tenemos en '''''android.widget.GridLayout.LayoutParams'''''
−	~~{\| class="wikitable"~~
−	~~\|+ Atribulos de GridLayout~~
−	~~! Atributo !! Valor !! Descripción~~
−	\|-
−	~~\| columnCount\|\| valor entero\|\|número de filas de la cuadrícula~~
−	\|-
−	~~\| rowCount\|\| valor entero\|\|número de columnas de la cuadrícula~~
−	\|-
−	~~\| orientation\|\| vertical\|horizontal\|\|Si no se indica valor fila o columna~~
−	\|-
−	~~\| layout_column\|\| valor entero\|\|columna donde ubicar el view~~
−	\|-
−	~~\| layout_columnSpan\|\| valor entero>=1\|\|número de columnas a extender el ''View''~~
−	\|-
−	~~\| layout_row\|\| valor entero\|\|columna donde ubicar el view~~
−	\|-
−	~~\| layout_rowSpan\|\| valor entero>=1\|\|número de filas a extender el ''View''~~
−	\|-
−	~~\| layout_gravity\|\|lista de gravity ( por defecto ''baseline, left\|\|dirección en la que se debe mostrar el View~~
−	\|}
−
−	~~{{Actividad\|~~
−	~~Realiza un diseño como se muestra en la imagen}}~~
−	~~[[Imagen:GridLayoutAndroid.png]]~~

@@ Línea 1: / Línea 1: @@
-{{:Usuario:ManuelRomero/Android/nav}}
+{{:Usuario:ManuelRomero/Android/Interfaz/nav}}
 <br>
 ===Idea general===

@@ Línea 189: / Línea 189: @@
 |-
 | layout_gravity||lista de gravity ( por defecto ''baseline, left||dirección en la que se debe mostrar el View
-}}
+|}
 {{Actividad|
 Realiza un diseño como se muestra en la imagen}}
 [[Imagen:GridLayoutAndroid.png]]

@@ Línea 164: / Línea 164: @@
 [[Imagen:tableLayoutejemplo.png|180px]]
 ===GridLayout===
 *Organiza los componentes en una cuadrícula
 *Es parecido al '''''TableLayout''''', pero a direfencia de éste cada ''View'' puede abarcar varios filas y/o columnas.

@@ Línea 150: / Línea 150: @@
 | collapseColumns || Cadena o recurso de cadena. p.e."0,1,2" || Lista plegable de indices de columnas
 |-
-| shrinkColumns
+| shrinkColumns||Lista de números. P.e. "1,2,3"||Columnas que se contrain
 |-
-| stretchColumns
+| stretchColumns||Lista de números. P.e. "1,2,3"||Columnas que se extienden
 |-
-| layout_column
+| layout_column || un número entero|| Indice de la columna en la que un ''View'' se debe mostrar
 |-
 | layout_span
 |}
 [[Imagen:tableLayoutejemplo.png|180px]]

← Revisión anterior		Revisión de 22:33 28 nov 2012
Línea 134:		Línea 134:
	\|-		\|-
	\|}		\|}
		+	===TableLayout===
		+	*El diseño de este layout recuerda un poco al diseño de tablas en html
		+	*Organiza sus View en filas
		+	*Para añadir componentes dentro de cada fila se utiliza diseños '''''TableRow'''''
		+	*Un '''''TableRow''''' se comporta como un '''''LinearLayout''''' con ''orientation=horizontal''
		+	*El orden en que se incorpore es el que mantendrá visualmente
		+	*Si no queremos usar alguna columna se debe de especificar números y no contabilizar aquellos que correspondan a las columnas que no queremos que aparezcan (ver ejemplo)
		+	*El tamaño de las columnas se ajustará a la columna con más tamaño
		+	;Lista de atributos más significativos
		+	*La lista completa la tenemos en '''''android.widget.TableLayout.LayoutParams'''''
		+	{\| class="wikitable"
		+	\|+ Atribulos de TableLayout
		+	! Atributo !! Valor !! Descripción
		+	\|-
		+	\| collapseColumns \|\| Cadena o recurso de cadena. p.e."0,1,2" \|\| Lista plegable de indices de columnas
		+	\|-
		+	\| shrinkColumns
		+	\|-
		+	\| stretchColumns
		+	\|-
		+	\| layout_column
		+	\|-
		+	\| layout_span
		+	\|}
		+	[[Imagen:tableLayout.png]]

@@ Línea 105: / Línea 105: @@
 | gravity || descritos antes|| Ubicación de los View dentro del diseño
 |-
-| layout_centerInParent || True|False ||Centra H, V los View dentro del padre
+| layout_centerInParent || True|False ||Centra Horizontal y Verticalmente los View dentro del padre
 |-
 | layout_centerHorizontal || True|False ||
@@ Línea 111: / Línea 111: @@
 | layout_centerVetical ||True|False ||
 |-
-| layout_alignParentBottom ||True|False ||
+| layout_alignParentBottom ||True|False || Alinear el View en el borde inferior del padre
 |-
 | layout_alignParentLeft ||True|False ||
@@ Línea 117: / Línea 117: @@
 | layout_alignParentRight ||True|False ||
 |-
-| layout_alignRight || Un identificador de View ||
+| layout_alignRight || Un identificador de View ||Alinea el borde derecho de un View con el borde derecho del otro View especificado en el valor de la propiedad
 |-
-| layout_alignLeft ||Un identificador de View ||
+| layout_alignLeft ||Un identificador de View || borde izquierdo con borde izquierdo
 |-
-| layout_alignTop ||Un identificador de View ||
+| layout_alignTop ||Un identificador de View || Borde superior con borde superior
 |-
-| layout_alignBottom ||Un identificador de View ||
+| layout_above ||Un identificador de View || borde inferior de un View  encima del otro View especificado
 |-
-| layout_above ||Un identificador de View ||
+| layout_below ||Un identificador de View || borde superior debajo del otro View especificado
 |-
-| layout_below ||Un identificador de View ||
+| layout_toLeftOf ||Un identificador de View ||Ubica el borde derecho a la izquierda del View especificado
 |-
-| layout_toLeftOf ||Un identificador de View ||
+| layout_to_RightOf ||Un identificador de View ||Ubica el borde izquierdo a la derecha del View especificado
 |-
 |}

← Revisión anterior		Revisión de 21:39 28 nov 2012
Línea 98:		Línea 98:
	Realiza inclyuendo botones y la flecha anterior el diseño que se propone en la imagen siguiente}}		Realiza inclyuendo botones y la flecha anterior el diseño que se propone en la imagen siguiente}}
	[[Archivo:relativeLayout.png\|180px]]		[[Archivo:relativeLayout.png\|180px]]
		+
		+	{\| class="wikitable"
		+	\|+Propiedades usadas en Relative Layout
		+	! Propiedad !! Valores!!Significado
		+	\|-
		+	\| gravity \|\| descritos antes\|\| Ubicación de los View dentro del diseño
		+	\|-
		+	\| layout_centerInParent \|\| True\|False \|\|Centra H, V los View dentro del padre
		+	\|-
		+	\| layout_centerHorizontal \|\| True\|False \|\|
		+	\|-
		+	\| layout_centerVetical \|\|True\|False \|\|
		+	\|-
		+	\| layout_alignParentBottom \|\|True\|False \|\|
		+	\|-
		+	\| layout_alignParentLeft \|\|True\|False \|\|
		+	\|-
		+	\| layout_alignParentRight \|\|True\|False \|\|
		+	\|-
		+	\| layout_alignRight \|\| Un identificador de View \|\|
		+	\|-
		+	\| layout_alignLeft \|\|Un identificador de View \|\|
		+	\|-
		+	\| layout_alignTop \|\|Un identificador de View \|\|
		+	\|-
		+	\| layout_alignBottom \|\|Un identificador de View \|\|
		+	\|-
		+	\| layout_above \|\|Un identificador de View \|\|
		+	\|-
		+	\| layout_below \|\|Un identificador de View \|\|
		+	\|-
		+	\| layout_toLeftOf \|\|Un identificador de View \|\|
		+	\|-
		+	\| layout_to_RightOf \|\|Un identificador de View \|\|
		+	\|-
		+	\|-
		+
		+	\|}

@@ Línea 67: / Línea 67: @@
 #un anillo
 }}
-[[Imagen:FrameLayout.png|100px]]
+[[Imagen:FrameLayout.png|180px]]
 ;Referencia para las figuras ''shape''
   http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
@@ Línea 83: / Línea 83: @@
 {{Actividad|
 *incluir 9 imágenes alternando flechas, óvalos y rectángulos jugando con las propiedades ''gravity'' y experimentar los resultados }}
-[[Imagen:LinearLayout.png|100px]]
+[[Imagen:LinearLayout.png|180px]]
 ===RelativeLayout===
@@ Línea 89: / Línea 89: @@
 *También se puede especifivar el control '''''View''''' con respecto a los límites del contenedor padre
 *Este tipo de distribución de controles View por un contenedor puede resultar a priory un poco complicada, pero controlando los atributos de dicho layout, se pueden hacer diseños muy atractivos sin tener que usar diferentes niveles de layouts.
 {{Actividad|
 Realiza inclyuendo botones y la flecha anterior el diseño que se propone en la imagen siguiente}}
-[[Archivo:relativeLayout.png]]
+[[Archivo:relativeLayout.png|180px]]