Deseño de pantallas: Layouts
Ir a la navegación
Ir a la búsqueda
Sumario
Introdución
- Un Layout é un elemento da Interface de Usuario (UI).
- Nel podemos definir os elementos visuais que compoñen a pantalla.
- Pode ser definido en ficheiros xml ou en código Java en tempo de execución. Xa vimos no apartado anterior as vantaxes dos ficheiros xml.
- Cada ficheiro xml asociado a unha pantalla/layout debe conter un elemento raíz e dentro deste poderanse ir engadindo máis layouts e obxectos fillos até construír unha xerarquía de Vistas (Views) que definirán a pantalla/layout.
- No seguinte exemplo a liña 2 indica o inicio do elemento raíz que se pecha na liña 15.
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="fill_parent"
4 android:layout_height="fill_parent"
5 android:orientation="vertical" >
6 <TextView android:id="@+id/text"
7 android:layout_width="wrap_content"
8 android:layout_height="wrap_content"
9 android:text="I am a TextView" />
10 <Button android:id="@+id/button"
11 android:layout_width="wrap_content"
12 android:layout_height="wrap_content"
13 android:onclick="onButtonClick"
14 android:text="I am a Button"/>
15 </LinearLayout>
- Nota: Indicar que nestes apartados podedes ver exemplos empregando a unidade pixel (px). Lembrar que se debe empregar a unidade dp´s como xa vimos anteriormente nesta Wiki.
Cargar recurso XML: layout
- Como xa sabemos, cada vez que se compila, cada ficheiro layout XML é compilado a unha obxecto Vista accesible a través de Java por medio da clase R.
- O layout cargarase cando se chame ao método onCreate() da Activity chamando ao método setContentView() ao que se lle pasa como referencia o recurso do layout a través da Clase R e do nome do layout (o nome do ficheiro xml, neste caso: main_layout.xml)
1 public void onCreate(Bundle savedInstanceState) {
2 super.onCreate(savedInstanceState);
3 setContentView(R.layout.main_layout);
4 }
- Deste xeito cargarase en pantalla o layout con todos os elementos visuais que contén.
- Un layout ten atributos ao igual que calquera View como xa se indicou no apartado anterior.
- Un layout estende a clase ViewGroup como se viu no apartado anterior.
- Referencias:
Parámetros dun layout
- Os atributos xml dun layout, que comezan chamándose layout_algo, definen os atributos que son apropiados para cada ViewGroup onde se atopa a Vista
- A imaxe amosa a como os Views fillos herdan os LayoutParams dos contedores, dos pais.
- Cada View fillo debe definir os seus parámetros apropiados en función do seu pai, aínda que pode definir parámetros para os seus fillos.
- Cada fillo contén propiedades tipo que definen o seu tamaño e posición:
Tamaño
- Definir valores para os atributos: layout_width e layout_height.
- Normalmente usarase estes dous valores:
- wrap_content: axusta o tamaño ao contido.
- match_parent: aumenta de tamaño até o tamaño do contedor pai.
- Outros posible tipos de valores son:
- px, dp, sp, in, mm, pt.
- As unidades px, dp e sp xa se viron nun apartado anterior.
- Normalmente usarase estes dous valores:
- En Java podemos capturar o tamaño dunha View con:
- Para saber o tamaño desexado do View temos getMeasuredWidth() e getMeasuredHeight().
- Para saber o ancho e alto real do View usaremos getWidth() e getHeight().
Posición
- As views son un rectángulo xeometricamente falando.
- Unha view está definida por:
- Unha localización: expresada polo par de coordenadas: esquerda e arriba (left e top)
- Unha dimensión: expresada como ancho e alto (width e height)
- A unidade para medir a localización e a dimensión é o píxel (px).
- En Java para obter a localización temos:
- getLeft() e getTop()
- getRight() e getBottom()
- Devolven o X e Y relativa ao seu pai.
Recheo. Padding
- O Padding é o recheo/espacio que deixa o contido da vista con respecto aos seus lados.
- O tamaño do Padding exprésase en calquera das unidades vistas previamente (px, pt, dp, sp, mm, in) para os lados esquerdo, superior, dereito e inferior (left, top, right, bottom) da vista.
- Por exemplo un paddind de 2px no lado esquerdo indica que o contido da vista vai comezar 2px á dereita do borde esquerdo.
- O tamaño da vista é todo: contido máis recheo o espaciado.
- O tamaño do padding dunha view pode expresarse en XML como:
- android:padding (Neste caso o mesmo recheo para os catro lados)
- android:paddingLeft
- android:paddingTop
- android:paddingRight
- android:paddingBottom
- O tamaño do padding dunha view pode expresarse en Java con:
- setPadding(int, int, int, int)
- O tamaño do padding dunha view pode capturarse en Java con:
- getPaddingLeft(), getPaddingTop(), getPaddingRight() and getPaddingBottom()
Marxes
- android:layout_margin
- android:layout_marginBottom
- android:layout_marginTop
- android:layout_marginLeft
- android:layout_marginRight
- Nota: 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
- A vista PAI ten definida un recheo distinto para cada lado: os elementos que contén o PAI van estar separados do borde do pai pola distancia definida no recheo.
- Cada vista Fillo ten definido un marxe (ou varios) con respecto aos límites que lle marca o PAI.
- Fillo 1: Pola esquerda e por arriba, comeza onde remata o recheo do PAI, pero a maiores este elemento ten definidos uns marxes propios para eses lados.
- Fillo 2: Non ten definido ningún marxe esquerdo.
- ...
- Por exemplo, neste caso temos o seguinte código no layout:
1 <ImageView
2 android:id="@+id/imageView"
3 android:layout_width="wrap_content"
4 android:layout_height="wrap_content"
5 android:paddingLeft="50px"
6 android:layout_marginLeft="100px"
7 android:src="@mipmap/ic_launcher" />
- Que dará este resultado:
Construción dun layout
- Un layout pode ser construído de 2 formas:
- Ficheiro xml
- Cun Adaptador: cando non se coñece o contido do layout ou o seu contido é dinámico podemos usar a clase de Java AdapterView que en tempo de execución creará o layout en engadirá nel as vistas que se indiquen.
- Imos ver nos seguintes apartados como se constrúen layouts.
- Na actualizade o layout recomendado para facer deseños é o ConstraintLayout.
- Outros son FrameLayout, LinearLayout, RelativeLayout,
- 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.
Aspectos xerais dos layouts en AndroidStudio
Xerarquía de compoñentes
- Podemos visualizar a xerarquía dos diferentes views que engadamos na ventá Component tree:
- 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:
Modo deseño
- 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.
Modo orientación
- Podemos indicar como está orientado o dispositivo, o activar o modo noite e outra serie de variantes.
Modo Device
- 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.
Modo API
- Das APIs instaladas, podemos seleccionar unha delas para ver como quedaría o aspecto da aplicación.
Modo Aspecto
- Podemos cambiar o aspecto da activity por un dos predefinidos ou por un dos creados por nos.
Modo Idioma
- Se tivésemos creados os arquivos de idiomas, poderíamos ver o aspecto en diferentes idiomas. O veremos na sección de internacionalización.
Erros ou avisos no deseño
- 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.
Enlace a la página principal de la UD2
Enlace a la página principal del curso
-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).