Deseños diferentes en función da orientación do dispositivo

De Manuais Informática - IES San Clemente.
Ir a la navegación Ir a la búsqueda

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 Internacionalización, como podemos xerar estes 'sufixos' de forma automática cando creamos o arquivo de recurso.

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.

XML layout vertical

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     android:gravity="center" >
 7 
 8     <TextView
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:textColor="#00F"
12         android:textSize="18sp"
13         android:text="O dispositivo está en posición vertical" />
14     
15     <Button 
16         android:layout_width="wrap_content"
17         android:layout_height="wrap_content"
18         android:onClick="oMeuMetodo"
19         android:text="Botón 1" />
20     
21       <TextView
22         android:layout_width="wrap_content"
23         android:layout_height="wrap_content"
24         android:gravity="center_horizontal"
25         android:text="Esta etiqueta só se amosa cando o dipositivo está en vertical" />
26     
27 </LinearLayout>


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.
 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="horizontal" >
 6 
 7     <Button
 8         android:layout_width="wrap_content"
 9         android:layout_height="wrap_content"
10         android:onClick="oMeuMetodo"
11         android:text="Botón 1" />
12 
13     <TextView
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:text="O dispositivo está en posición horizontal"
17         android:textColor="#F0F"
18         android:textSize="18sp" />
19 
20 </LinearLayout>




-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).