Prog Android Adaptando el diseño - Historial de revisiones

Wiki: Página blanqueada

2018-09-30T13:26:38Z

Página blanqueada

Wiki: /* En función del tamaño */

2018-09-30T09:28:14Z

En función del tamaño

Wiki: /* En función del tamaño */

2018-09-30T09:27:49Z

En función del tamaño

Wiki: /* Introducción */

2018-09-30T09:26:59Z

Introducción

Wiki en 20:06 13 ago 2018

2018-08-13T20:06:37Z

Wiki: Página creada con «=En función de la orientación=
==Introdución== * Algúns dispositivos deixan rotar a pantalla, poñéndoa en posición horizontal-vertical (apaisado-retrato) *Se...»

2018-08-10T12:04:40Z

Página creada con «=En función de la orientación= <br /> ==Introdución== * Algúns dispositivos deixan rotar a pantalla, poñéndoa en posición horizontal-vertical (apaisado-retrato) *Se...»

Página nueva

=En función de la orientación=

<br />
==Introdución==
* Algúns dispositivos deixan rotar a pantalla, poñéndoa en posición horizontal-vertical (apaisado-retrato)
*Se queremos ter un deseño diferente para cada orientación, debemos de crear un cartafol dentro de ‘res’ de nome '''/res/layout-land'''.
*Aquí dentro poñemos os deseños que queiramos ter cunha orientación apaisada do dispositivo, mentres que deixaremos en '''/res/layout''' os deseños para unha orientación vertical.

'''Nota''': no emulador, para cambiar a orientación debemos premer os botóns '''CTRL+F11''' ou '''7''' no teclado numérico, sen estar activado o teclado numérico.

*Antes de continuar abre a calculadora nun AVD ou no dispositivo real e cambia a orientación do dispositivo/AVD. Notas algunha diferencia cando o dispositivo está en Vertical a cando o está en Horizontal?.

Veremos máis adiante, na sección [http://informatica.iessanclemente.net/manuais/index.php/Internacionalizaci%C3%B3n Internacionalización], como podemos xerar estes 'sufixos' de forma automática cando creamos o arquivo de recurso.

*'''Referencias''':
**Diferentes pantallas: http://developer.android.com/training/basics/supporting-devices/screens.html

==Caso práctico==
*Crear o proxecto: '''U2_40_Landscape'''
*Crear en '''/res''' o cartafol '''layout-land'''.
*Definir o XML vertical
*Copiar o XML vertical á nova carpeta e modificalo segundo as necesidades.

<gallery caption="Cambio de orientación" widths="350" heights="300px" perrow="2">
Image:Android_2013_U2_40_Landscape_01.jpg| Os ficheiros dos layouts para cada orientación
Image:Android_2013_U2_40_Landscape_02.jpg| O dispositivo en vertical dispón os elementos de forma distinta
Image:Android_2013_U2_40_Landscape_03.jpg| ... a se está en apaisado
</gallery>

===XML layout vertical===
<syntaxhighlight lang="xml" line enclose="div" highlight="1" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#00F"
android:textSize="18sp"
android:text="O dispositivo está en posición vertical" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="oMeuMetodo"
android:text="Botón 1" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Esta etiqueta só se amosa cando o dipositivo está en vertical" />

</LinearLayout>

</syntaxhighlight>

===XML layout horizontal===
*Observar que falta unha etiqueta, a disposición e distinta, etc.
*Neste caso os botóns en Vertical e en Apaisado chaman ao mesmo método.

<syntaxhighlight lang="xml" line enclose="div" highlight="1" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="oMeuMetodo"
android:text="Botón 1" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="O dispositivo está en posición horizontal"
android:textColor="#F0F"
android:textSize="18sp" />

</LinearLayout>
</syntaxhighlight>

<br />
=En función del tamaño=

* A partir de la versión de Android 3.2 se cambia la forma de indicarle al S.O. que layout tiene que coger en función del tamaño de la pantalla.
: Anteriormente, en el directorio 'res/' se ponía un sufijo (como res/layout-xlarge/) para indicar que se layout fuese cargado para un tamaño de pantalla grande (ver [http://wiki.cifprodolfoucha.es/index.php?title=Activities,_Layouts_e_M%C3%BAltiples_pantallas#Tama.C3.B1os_de_pantalla_e_densidade_.28puntos_por_pulgada:_dpi.29 este enlace] para consultar los diferentes tamaños de pantalla).

: Ahora, el sufijo que se va a añadir va a indicar el espacio necesario en '''pp''' (puntos por pulgada) que se necesita para poder visualizar el layout.
: Esto se implementó para dar una respuesta de diseño a las tablet's de 7' ya que dichas tablet's entraban dentro de la misma categoría que las de 5' pero el espacio es bastante mayor.

: El nombre que debe de tener la carpeta para que cargue el layout que se encuentre definido dentro de ella, debe de ser: '''nombre_carpeta-sw<N>dp''' siendo <N> el número de dp's necesario para que se pueda visualizar. Por ejemplo, 'res/clientes-sw600dp/
: Este formato es independiente de que la pantalla esté en horizontal o vertical.
: Por lo tanto, refleja el tamaño mínimo posible en dp's para que la interface de un determinado layout pueda ser visualizada correctamente.

* Existen otros sufijos referidos solamente al ancho-alto de la pantalla:
:* '''nombre_carpeta-w<N>dp''': Ancho mínimo en dp. Por ejemplo: res/productos-w150dp/
:* '''nombre_carpeta-h<N>dp''': Alto mínimo en dp. Por ejemplo: res/productos-h300dp/

* Estos son algunos valores que puedes utilizar para tamaños de pantallas comunes:

:* 320, para dispositivos con configuraciones de pantalla como las siguientes:
::* 240 x 320 ldpi (teléfono celular QVGA)
::* 320 x 480 mdpi (teléfono celular)
::* 480 x 800 hdpi (teléfono celular de alta densidad)
::* 480, para pantallas de 480 x 800 mdpi (tablet/teléfono celular).
::* 600, para pantallas de 600 x 1024 mdpi (tablet de 7 pulgadas).
::* 720, para pantallas de 720 x 1280 mdpi (tablet de 10 pulgadas).

* Más información [https://developer.android.com/guide/practices/screens_support#DeclaringTabletLayouts en este enlace].

<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2018).

← Revisión anterior		Revisión del 13:26 30 sep 2018
Línea 1:		Línea 1:
−	~~=Introducción=~~

−	* Debemos ter en conta que os dispositivos que 'corren' o S.O. Android son moi variados, en tamaño de pantalla e en puntos por polgada, polo que as resolucións a empregar poden variar considerablemente.
−
−	* Polo tanto, cando deseñamos unha aplicación, debemos poder adaptala aos diferentes tamaños, para que se visualice correctamente e se aproveite o espacio dispoñible.
−
−	* Para facer isto, android implementa un mecanismos de 'sufixos' ás carpetas onde se gardan os layouts.
−	~~: Cada un dos sufixos indica diferentes características físicas da pantalla (tamaño, orientación, dp,...)~~
−	~~: Tódolos layouts definidos en ditos cartafoles serán cargados cando os sufixos coincidan coas características físicas do dispositivo.~~
−
−
−	* Os sufixos 'non son excluintes' e se poden combinar, por exemplo, podemos ter un layout definido cando dispoñamos dunha tablet de 720dp e estea posicionada en apaisado.
−
−
−
−	* Tamén podemos limitar no AndroidManifiest.xml os dispositivos que poidan instalar a nosa aplicación en función da pantalla do mesmo, coa etiqueta 'supports-screens'.
−	~~: Máis información [https://developer.android.com/guide/topics/manifest/supports-screens-element?hl=es-419 neste enlace].~~
−
−
−	~~<br />~~
−
−	~~=En función de la orientación=~~
−
−	~~<br />~~
−	~~==Introdución==~~
−	* Algúns dispositivos deixan rotar a pantalla, poñéndoa en posición horizontal-vertical (apaisado-retrato)
−	*Se queremos ter un deseño diferente para cada orientación, debemos de crear un cartafol dentro de ‘res’ de nome '''/res/layout-land'''.
−	*Aquí dentro poñemos os deseños que queiramos ter cunha orientación apaisada do dispositivo, mentres que deixaremos en '''/res/layout''' os deseños para unha orientación vertical.
−
−	~~'''Nota''': no emulador, para cambiar a orientación debemos premer os botóns '''CTRL+F11''' ou '''7''' no teclado numérico, sen estar activado o teclado numérico.~~
−
−	*Antes de continuar abre a calculadora nun AVD ou no dispositivo real e cambia a orientación do dispositivo/AVD. Notas algunha diferencia cando o dispositivo está en Vertical a cando o está en Horizontal?.
−
−
−	Veremos máis adiante, na sección [http://informatica.iessanclemente.net/manuais/index.php/Internacionalizaci%C3%B3n Internacionalización], como podemos xerar estes 'sufixos' de forma automática cando creamos o arquivo de recurso.
−
−	*'''Referencias''':
−	**Diferentes pantallas: http://developer.android.com/training/basics/supporting-devices/screens.html
−
−	~~==Caso práctico==~~
−	*Crear o proxecto: '''U2_40_Landscape'''
−	*Crear en '''/res''' o cartafol '''layout-land'''.
−	*Definir o XML vertical
−	*Copiar o XML vertical á nova carpeta e modificalo segundo as necesidades.
−
−	~~<gallery caption="Cambio de orientación" widths="350" heights="300px" perrow="2">~~
−	~~Image:Android_2013_U2_40_Landscape_01.jpg\| Os ficheiros dos layouts para cada orientación~~
−	~~Image:Android_2013_U2_40_Landscape_02.jpg\| O dispositivo en vertical dispón os elementos de forma distinta~~
−	~~Image:Android_2013_U2_40_Landscape_03.jpg\| ... a se está en apaisado~~
−	~~</gallery>~~
−
−	~~===XML layout vertical===~~
−	~~<syntaxhighlight lang="xml" line enclose="div" highlight="1" >~~
−	~~<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"~~
−	~~xmlns:tools="http://schemas.android.com/tools"~~
−	~~android:layout_width="match_parent"~~
−	~~android:layout_height="match_parent"~~
−	~~android:orientation="vertical"~~
−	~~android:gravity="center" >~~
−
−	~~<TextView~~
−	~~android:layout_width="wrap_content"~~
−	~~android:layout_height="wrap_content"~~
−	~~android:textColor="#00F"~~
−	~~android:textSize="18sp"~~
−	~~android:text="O dispositivo está en posición vertical" />~~
−
−	~~<Button~~
−	~~android:layout_width="wrap_content"~~
−	~~android:layout_height="wrap_content"~~
−	~~android:onClick="oMeuMetodo"~~
−	~~android:text="Botón 1" />~~
−
−	~~<TextView~~
−	~~android:layout_width="wrap_content"~~
−	~~android:layout_height="wrap_content"~~
−	~~android:gravity="center_horizontal"~~
−	~~android:text="Esta etiqueta só se amosa cando o dipositivo está en vertical" />~~
−
−	~~</LinearLayout>~~
−
−	~~</syntaxhighlight>~~
−
−
−
−	~~===XML layout horizontal===~~
−	*Observar que falta unha etiqueta, a disposición e distinta, etc.
−	*Neste caso os botóns en Vertical e en Apaisado chaman ao mesmo método.
−
−	~~<syntaxhighlight lang="xml" line enclose="div" highlight="1" >~~
−	~~<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"~~
−	~~xmlns:tools="http://schemas.android.com/tools"~~
−	~~android:layout_width="match_parent"~~
−	~~android:layout_height="match_parent"~~
−	~~android:orientation="horizontal" >~~
−
−	~~<Button~~
−	~~android:layout_width="wrap_content"~~
−	~~android:layout_height="wrap_content"~~
−	~~android:onClick="oMeuMetodo"~~
−	~~android:text="Botón 1" />~~
−
−	~~<TextView~~
−	~~android:layout_width="wrap_content"~~
−	~~android:layout_height="wrap_content"~~
−	~~android:text="O dispositivo está en posición horizontal"~~
−	~~android:textColor="#F0F"~~
−	~~android:textSize="18sp" />~~
−
−	~~</LinearLayout>~~
−	~~</syntaxhighlight>~~
−
−
−
−	~~<br />~~
−	~~=En función del tamaño=~~
−
−	* A partir de la versión de Android 3.2 se cambia la forma de indicarle al S.O. que layout tiene que coger en función del tamaño de la pantalla.
−	~~: Máis información [https://developer.android.com/guide/practices/screens_support?hl=es-419#DeclaringTabletLayouts neste enlace].~~
−
−
−	: Anteriormente, en el directorio 'res/' se ponía un sufijo (como res/layout-xlarge/) para indicar que se layout fuese cargado para un tamaño de pantalla grande (ver [http://wiki.cifprodolfoucha.es/index.php?title=Activities,_Layouts_e_M%C3%BAltiples_pantallas#Tama.C3.B1os_de_pantalla_e_densidade_.28puntos_por_pulgada:_dpi.29 este enlace] para consultar los diferentes tamaños de pantalla).
−
−	~~: Ahora, el sufijo que se va a añadir va a indicar el espacio necesario en '''pp''' (puntos por pulgada) que se necesita para poder visualizar el layout.~~
−	~~: Esto se implementó para dar una respuesta de diseño a las tablet's de 7' ya que dichas tablet's entraban dentro de la misma categoría que las de 5' pero el espacio es bastante mayor.~~
−
−	: El nombre que debe de tener la carpeta para que cargue el layout que se encuentre definido dentro de ella, debe de ser: '''nombre_carpeta-sw<N>dp''' siendo <N> el número de dp's necesario para que se pueda visualizar. Por ejemplo, 'res/clientes-sw600dp/
−	~~: Este formato es independiente de que la pantalla esté en horizontal o vertical.~~
−	~~: Por lo tanto, refleja el tamaño mínimo posible en dp para que la interface de un determinado layout pueda ser visualizada correctamente.~~
−
−
−	* Existen otros sufijos referidos solamente al ancho-alto de la pantalla:
−	~~:* '''nombre_carpeta-w<N>dp''': Ancho mínimo en dp. Por ejemplo: res/productos-w150dp/~~
−	~~:* '''nombre_carpeta-h<N>dp''': Alto mínimo en dp. Por ejemplo: res/productos-h300dp/~~
−
−
−	* Estos son algunos valores que puedes utilizar para tamaños de pantallas comunes:
−
−	~~:* 320, para dispositivos con configuraciones de pantalla como las siguientes:~~
−	~~::* 240 x 320 ldpi (teléfono celular QVGA)~~
−	~~::* 320 x 480 mdpi (teléfono celular)~~
−	~~::* 480 x 800 hdpi (teléfono celular de alta densidad)~~
−	~~::* 480, para pantallas de 480 x 800 mdpi (tablet/teléfono celular).~~
−	~~::* 600, para pantallas de 600 x 1024 mdpi (tablet de 7 pulgadas).~~
−	~~::* 720, para pantallas de 720 x 1280 mdpi (tablet de 10 pulgadas).~~
−
−
−
−
−	* Más información [https://developer.android.com/guide/practices/screens_support#DeclaringTabletLayouts en este enlace].
−
−
−
−
−	~~<br> -- [[Usuario:angelfg\|Ángel D. Fernández González]] e [[Usuario:Carrion\|Carlos Carrión Álvarez]] -- (2018).~~

← Revisión anterior		Revisión del 09:27 30 sep 2018
Línea 117:		Línea 117:

	* A partir de la versión de Android 3.2 se cambia la forma de indicarle al S.O. que layout tiene que coger en función del tamaño de la pantalla.		* A partir de la versión de Android 3.2 se cambia la forma de indicarle al S.O. que layout tiene que coger en función del tamaño de la pantalla.
		+	: Máis información [https://developer.android.com/guide/practices/screens_support?hl=es-419#DeclaringTabletLayouts neste enlace].
		+
		+
	: Anteriormente, en el directorio 'res/' se ponía un sufijo (como res/layout-xlarge/) para indicar que se layout fuese cargado para un tamaño de pantalla grande (ver [http://wiki.cifprodolfoucha.es/index.php?title=Activities,_Layouts_e_M%C3%BAltiples_pantallas#Tama.C3.B1os_de_pantalla_e_densidade_.28puntos_por_pulgada:_dpi.29 este enlace] para consultar los diferentes tamaños de pantalla).		: Anteriormente, en el directorio 'res/' se ponía un sufijo (como res/layout-xlarge/) para indicar que se layout fuese cargado para un tamaño de pantalla grande (ver [http://wiki.cifprodolfoucha.es/index.php?title=Activities,_Layouts_e_M%C3%BAltiples_pantallas#Tama.C3.B1os_de_pantalla_e_densidade_.28puntos_por_pulgada:_dpi.29 este enlace] para consultar los diferentes tamaños de pantalla).

@@ Línea 1: / Línea 1: @@
 =Introducción=
-* Debemos de tener en cuenta que los dispositivos que 'corren' el S.O. Android son muy variados, en tamaño de pantalla y en puntos por pulgada, por lo que las resoluciones a emplear pueden variar considerablemente.
+* Debemos ter en conta que os dispositivos que 'corren' o S.O. Android son moi variados, en tamaño de pantalla e en puntos por polgada, polo que as resolucións a empregar poden variar considerablemente.
-* Por lo tanto, cuando diseñamos una aplicación, debemos de poder adaptarla a los diferentes tamaños, para que se visualice correctamente y se aproveche el espacio disponible.
+* Polo tanto, cando deseñamos unha aplicación, debemos poder adaptala aos diferentes tamaños, para que se visualice correctamente e se aproveite o espacio dispoñible.
-* Para hacer esto, android implementa un mecanismos de 'sufijos' a las carpetas donde se guardan los layouts.
+* Para facer isto, android implementa un mecanismos de 'sufixos' ás carpetas onde se gardan os layouts.
-: Cada uno de los sufijos indica diferentes características físicas de la pantalla (tamaño, orientación, dp,...)
+: Cada un dos sufixos indica diferentes características físicas da pantalla (tamaño, orientación, dp,...)
-: Todos los layouts definidos en dichas carpetas serán cargados cuando los sufijos coincidan con las características físicas del dispositivo.
+: Tódolos layouts definidos en ditos cartafoles serán cargados cando os sufixos coincidan coas características físicas do dispositivo.
-* Los sufijos 'non se excluyentes' y se pueden combinar, por ejemplo, podemos tener un layout definido cuando dispongamos de una tablet de 720dp y esté posicionada en apaisado.
+* Os sufixos 'non son excluintes' e se poden combinar, por exemplo, podemos ter un layout definido cando dispoñamos dunha tablet de 720dp e estea posicionada en apaisado.
 <br />
 =En función de la orientación=

← Revisión anterior		Revisión del 20:06 13 ago 2018
Línea 1:		Línea 1:
		+	=Introducción=
		+
		+	* Debemos de tener en cuenta que los dispositivos que 'corren' el S.O. Android son muy variados, en tamaño de pantalla y en puntos por pulgada, por lo que las resoluciones a emplear pueden variar considerablemente.
		+
		+	* Por lo tanto, cuando diseñamos una aplicación, debemos de poder adaptarla a los diferentes tamaños, para que se visualice correctamente y se aproveche el espacio disponible.
		+
		+	* Para hacer esto, android implementa un mecanismos de 'sufijos' a las carpetas donde se guardan los layouts.
		+	: Cada uno de los sufijos indica diferentes características físicas de la pantalla (tamaño, orientación, dp,...)
		+	: Todos los layouts definidos en dichas carpetas serán cargados cuando los sufijos coincidan con las características físicas del dispositivo.
		+
		+
		+	* Los sufijos 'non se excluyentes' y se pueden combinar, por ejemplo, podemos tener un layout definido cuando dispongamos de una tablet de 720dp y esté posicionada en apaisado.
		+
		+
		+	<br />
	=En función de la orientación=		=En función de la orientación=

@@ Línea 127: / Línea 127: @@
 : El nombre que debe de tener la carpeta para que cargue el layout que se encuentre definido dentro de ella, debe de ser: '''nombre_carpeta-sw<N>dp''' siendo <N> el número de dp's necesario para que se pueda visualizar. Por ejemplo, 'res/clientes-sw600dp/
 : Este formato es independiente de que la pantalla esté en horizontal o vertical.
-: Por lo tanto, refleja el tamaño mínimo posible en dp's para que la interface de un determinado layout pueda ser visualizada correctamente.
+: Por lo tanto, refleja el tamaño mínimo posible en dp para que la interface de un determinado layout pueda ser visualizada correctamente.

Prog Android Adaptando el diseño - Historial de revisiones

Wiki: Página blanqueada

Wiki: /* En función del tamaño */

Wiki: /* En función del tamaño */

Wiki: /* Introducción */

Wiki en 20:06 13 ago 2018

Wiki: Página creada con «=En función de la orientación= ==Introdución== * Algúns dispositivos deixan rotar a pantalla, poñéndoa en posición horizontal-vertical (apaisado-retrato) *Se...»

Wiki: Página creada con «=En función de la orientación=
==Introdución== * Algúns dispositivos deixan rotar a pantalla, poñéndoa en posición horizontal-vertical (apaisado-retrato) *Se...»