Deseño de pantallas: Layouts - Historial de revisiones

Angelfg: /* Erros ou avisos no deseño */

2020-11-21T13:00:46Z

Erros ou avisos no deseño

Wiki: /* Introdución */

2019-10-03T15:44:48Z

Introdución

Wiki: /* Marxes */

2019-10-03T15:42:48Z

Marxes

Wiki: /* Erros ou avisos no deseño */

2018-09-30T14:12:31Z

Erros ou avisos no deseño

Wiki: /* Erros ou avisos no deseño */

2018-09-30T14:12:20Z

Erros ou avisos no deseño

Wiki: /* Modo Idioma */

2018-09-30T14:12:11Z

Modo Idioma

Wiki: /* Xerarquía de compoñentes */

2018-09-30T14:09:47Z

Xerarquía de compoñentes

Wiki: /* Construción dun layout */

2018-09-30T13:51:30Z

Construción dun layout

Wiki: /* Explicación Gráfica */

2018-09-30T11:37:04Z

Explicación Gráfica

Wiki: /* Construción dun layout */

2018-09-30T11:29:30Z

Construción dun layout

← Revisión anterior	Revisión del 13:00 21 nov 2020
Línea 241:	Línea 241:


	+
	+
	+
	+
	+
	+	<br />
	+	'''[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3biles#UNIDADE_2:_A_interface_de_usuario. Enlace a la página principal de la UD2]'''
	+	<br />
	+	<br />
	+	'''[https://wiki.cifprodolfoucha.es/index.php?title=Programación_de_dispositivos_móbiles Enlace a la página principal del curso]'''
	+	<br />

@@ Línea 23: / Línea 23: @@
 </LinearLayout>
 </syntaxhighlight>
 ==Cargar recurso XML: layout==

← Revisión anterior		Revisión del 15:42 3 oct 2019
Línea 106:		Línea 106:
	*android:layout_marginRight		*android:layout_marginRight

		+
		+
		+	* '''<u>Nota:</u>''' A partires da API 17 (Android 4.2) este soporta ter as activities en formato RTL (Right to Left).
		+	: Neste formato, o texto se comeza a ler pola dereita (fronte ao formato LTR que é o que empregamos nos).
		+	: Por iso aparecen as propiedades:
		+	:*android:layout_marginEnd
		+	:*android:layout_marginStart
		+	: É máis adecuado empregar estas opcións en vez de android:layout_marginRight(=android:layout_marginEnd) e de android:layout_marginLeft(=android:layout_marginStart)

	===Explicación Gráfica===		===Explicación Gráfica===

@@ Línea 223: / Línea 223: @@
 ===Erros ou avisos no deseño===
-[[Imagen:PDM_UI_21.jpg|600px|center]]
+[[Imagen:PDM_UI_21.jpg|800px|center]]
 * Se temos mal o deseño (atributos mal postos, valores incorrectos,...) aparecerá un aviso no puntos indicados na imaxe.

@@ Línea 223: / Línea 223: @@
 ===Erros ou avisos no deseño===
-[[Imagen:PDM_UI_21.jpg|400px|center]]
+[[Imagen:PDM_UI_21.jpg|600px|center]]
 * Se temos mal o deseño (atributos mal postos, valores incorrectos,...) aparecerá un aviso no puntos indicados na imaxe.

← Revisión anterior	Revisión del 14:12 30 sep 2018
Línea 220:	Línea 220:


	+	<br />
	+	===Erros ou avisos no deseño===
	+
	+	[[Imagen:PDM_UI_21.jpg\|400px\|center]]
	+
	+	* Se temos mal o deseño (atributos mal postos, valores incorrectos,...) aparecerá un aviso no puntos indicados na imaxe.
	+	: Premendo sobre a icona aparecerá a descrición do erro.

← Revisión anterior		Revisión del 14:09 30 sep 2018
Línea 165:		Línea 165:
	Image:PDM_UI_14.jpg\| Temos acceso a unha vista en árbore de todos os compoñentes gráficos e as súas propiedades en execución.		Image:PDM_UI_14.jpg\| Temos acceso a unha vista en árbore de todos os compoñentes gráficos e as súas propiedades en execución.
	</gallery>		</gallery>
		+
		+
		+	<br />
		+	===Modo deseño===
		+
		+	[[Imagen:PDM_UI_15.jpg\|400px\|center]]
		+
		+
		+	* Podemos ver o deseño da nosa activity de dúas formas diferentes:
		+	:* Design: A forma tradicional, vese graficamente como quedan as compoñentes.
		+	:* Blueprint: Vese o esqueleto do noso deseño. Os view amosan os seus límites, pero non o contido gráfico.
		+
		+
		+	<br />
		+	===Modo orientación===
		+
		+	[[Imagen:PDM_UI_16.jpg\|400px\|center]]
		+
		+
		+	* Podemos indicar como está orientado o dispositivo, o activar o modo noite e outra serie de variantes.
		+
		+
		+	<br />
		+	===Modo Device===
		+
		+	[[Imagen:PDM_UI_17.jpg\|400px\|center]]
		+
		+	* Podemos visualizar como quedaría o noso deseño cunha resolución determinada.
		+	: Podemos seleccionar unha das xa preconfiguradas, elixir algunha das emuladores creados ou crear unha nova.
		+
		+
		+	<br />
		+	===Modo API===
		+
		+	[[Imagen:PDM_UI_18.jpg\|400px\|center]]
		+
		+	* Das APIs instaladas, podemos seleccionar unha delas para ver como quedaría o aspecto da aplicación.
		+
		+
		+	<br />
		+	===Modo Aspecto===
		+
		+	[[Imagen:PDM_UI_19.jpg\|400px\|center]]
		+
		+	* Podemos cambiar o aspecto da activity por un dos predefinidos ou por un dos creados por nos.
		+
		+
		+	<br />
		+	===Modo Idioma===
		+
		+	[[Imagen:PDM_UI_20.jpg\|400px\|center]]
		+
		+	* Se tivésemos creados os arquivos de idiomas, poderíamos ver o aspecto en diferentes idiomas. O veremos na sección de internacionalización.
		+
		+
		+
		+

← Revisión anterior		Revisión del 13:51 30 sep 2018
Línea 143:		Línea 143:
	*Cada un deles dispón os elementos visuais no seu interior de distintas formas.		*Cada un deles dispón os elementos visuais no seu interior de distintas formas.
	*Cada un deles pode conter layouts do mesmo ou distinto tipo e así sucesivamente.		*Cada un deles pode conter layouts do mesmo ou distinto tipo e así sucesivamente.
		+
		+
		+	<br />
		+	==Aspectos xerais dos layouts en AndroidStudio==
		+
		+	[[Imagen:PDM_UI_10.jpg\|500px\|center]]
		+
		+
		+	<br />
		+	===Xerarquía de compoñentes===
		+
		+	* Podemos visualizar a xerarquía dos diferentes views que engadamos na ventá '''Component tree''':
		+
		+	[[Imagen:PDM_UI_11.jpg\|400px\|center]]
		+
		+	: Con a aplicación '''en execución''' no emulador, podemos acceder á mesma xerarquía, pero dunha forma máis completa, permitindo acceder a todas as propiedades de todos os compoñentes gráficos da aplicación:
		+
		+	<gallery caption="Layout Inspector" widths="350" heights="300px" perrow="2">
		+	Image:PDM_UI_12.jpg\| Coa aplicación en funcionamento, accedemos a opción de menú '''Tools''' => '''Layout inspector'''.
		+	Image:PDM_UI_13.jpg\| Seleccionamos a aplicación que queremos inspeccionar.
		+	Image:PDM_UI_14.jpg\| Temos acceso a unha vista en árbore de todos os compoñentes gráficos e as súas propiedades en execución.
		+	</gallery>
		+
		+
		+
		+

@@ Línea 114: / Línea 114: @@
 **'''Fillo 2''': Non ten definido ningún marxe esquerdo.
 **...
 ==Construción dun layout==

@@ Línea 122: / Línea 122: @@
 *Imos ver nos seguintes apartados como se constrúen layouts.
-*Entre os máis comúns están FrameLayout, LinearLayout, RelativeLayout,
+*Na actualizade o layout recomendado para facer deseños é o '''ConstraintLayout'''.
 *Cada un deles dispón os elementos visuais no seu interior de distintas formas.
 *Cada un deles pode conter layouts do mesmo ou distinto tipo e así sucesivamente.