LinearLayout

De MediaWiki
Saltar a: navegación, buscar

Introdución

  • É un dos Layouts máis comúns e máis usados.
  • Dispón os as vistas (os elementos fillos) nunha sola orientación: ou en vertical ou en horizontal. Un a continuación do outro.
  • Para iso ten o atributo: android:orientation

00 linearlayout.png


  • Este layout ten a propiedade android:layout_weight para as vistas.
  • Esta propiedade indica canto debe ocupar ese view do espazo restante do seu contenedor, de forma proporcional ao weight (peso) que se lle asine.
  • Así, se temos dúas caixas de texto e asinamos un weight (peso) de 2 e 1 respectivamente, estaremos establecendo un ancho o dobre de grande na primeira caixa.
  • Se temos 3 caixas e a unha delas lle poñemos peso e as outras non, a que ten o peso asinado ocupará todo o espazo que poida do seu contedor pai, quedando as outras dúas axustadas o tamaño indicado no arquivo xml.
  • Se asignamos un layout_weight, normalmente ponse un layout_width=”0dp” ou layout_height=”0dp”.


Casos prácticos

  • Comezamos creando un novo proxecto: U2_04_Linear.


A propiedade android:orientation

  • Comezamos cambiando o xml do layout por este outro:
  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:text="Preme 1"/>
  11.  
  12.     <Button
  13.         android:layout_width="wrap_content"
  14.         android:layout_height="wrap_content"
  15.         android:text="Preme 2" />
  16.  
  17.     <Button
  18.         android:layout_width="wrap_content"
  19.         android:layout_height="wrap_content"
  20.         android:text="Preme 3" />
  21.  
  22. </LinearLayout>
  • Observar como se van orientar os elementos fillos (vistas) no layout. Neste caso en horizontal.
  • Neste exemplo os elementos fillos (vistas) son botóns.

Android 2013 U2 04 Linear 01.jpg


  • Agora cambiamos a orientación a 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.  
  7.     <Button
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:text="Preme 1"/>
  11.  
  12.     <Button
  13.         android:layout_width="wrap_content"
  14.         android:layout_height="wrap_content"
  15.         android:text="Preme 2" />
  16.  
  17.     <Button
  18.         android:layout_width="wrap_content"
  19.         android:layout_height="wrap_content"
  20.         android:text="Preme 3" />
  21.  
  22. </LinearLayout>


Android 2013 U2 04 Linear 02.jpg


A propiedade android:layout_weight

  • Engadimos/modificamos as propiedades marcadas no seguinte ficheiro XML.
  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.  
  7.     <Button
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="0dp"
  10.         android:layout_weight="1"
  11.         android:text="Preme 1"/>
  12.  
  13.     <Button
  14.         android:layout_width="wrap_content"
  15.         android:layout_height="0dp"
  16.         android:layout_weight="3"
  17.         android:text="Preme 2" />
  18.  
  19.     <Button
  20.         android:layout_width="wrap_content"
  21.         android:layout_height="wrap_content"
  22.         android:layout_weight="2"
  23.         android:text="Preme 3" />
  24.  
  25. </LinearLayout>
  • Preténdese que se o espazo sobrante no layout en vertical se pode dividir en 6 anacos (a suma dos pesos), pois que a primeira view ocupe 1 anaco, a segunda view 3 anacos e a terceira view o restante, 2 anacos.
  • Observar como dá igual o alto que se indique en calquera das tres vistas android:height.

Android 2013 U2 04 Linear 03.jpg

As propiedades android:gravity e android:margin

  • Modificamos o layout anterior para deixalo como:
  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.  
  7.     <Button
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:layout_margin="70dp"
  11.         android:text="Preme 1"/>
  12.  
  13.     <Button
  14.         android:layout_width="wrap_content"
  15.         android:layout_height="wrap_content"
  16.         android:layout_gravity="center"
  17.         android:text="Preme 2" />
  18.  
  19.     <Button
  20.         android:layout_width="wrap_content"
  21.         android:layout_height="wrap_content"
  22.         android:layout_gravity="right"
  23.         android:text="Preme 3" />
  24.  
  25. </LinearLayout>
  • Observar na seguinte imaxe a ubicación dos botóns.


Android 2013 U2 04 Linear 04.jpg

Padding

  • Vaise realizar recheo no Layout e logo nalgún dos botóns.
  • No seguinte XML realízase padding no propio Layout.
  • Co cal, cada elemento do interior estará a 20dp do borde do layout.
  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:paddingBottom="20dp"
  6.     android:paddingLeft="20dp"
  7.     android:paddingRight="20dp"
  8.     android:paddingTop="20dp"
  9.     android:orientation="vertical" >
  10.  
  11.     <Button
  12.         android:layout_width="wrap_content"
  13.         android:layout_height="wrap_content"
  14.         android:text="Preme 1"/>
  15.  
  16.     <Button
  17.         android:layout_width="wrap_content"
  18.         android:layout_height="wrap_content"
  19.         android:text="Preme 2" />
  20.  
  21.      <Button
  22.         android:layout_width="wrap_content"
  23.         android:layout_height="wrap_content"
  24.         android:text="Preme 3" />
  25.  
  26. </LinearLayout>
  • A que saberías como substituír as liñas marcadas por unha soa propiedade?
  • Observar como os botóns están separados dos bordes da esquerda e superior.

Android 2013 U2 04 Linear 05.jpg



  • Finalmente imos facer padding nunha vista.
  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:padding="20dp"
  6.     android:orientation="vertical" >
  7.  
  8.     <Button
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:padding="20dp"
  12.         android:text="Preme 1"/>
  13.  
  14.     <Button
  15.         android:layout_width="wrap_content"
  16.         android:layout_height="wrap_content"
  17.         android:paddingLeft="50dp"
  18.         android:text="Preme 2" />
  19.  
  20.     <Button
  21.         android:layout_width="wrap_content"
  22.         android:layout_height="wrap_content"
  23.         android:layout_marginLeft="50dp"
  24.         android:text="Preme 3" />
  25.  
  26. </LinearLayout>
  • Observar as liñas marcadas e o seu efecto no contido das vistas na seguinte imaxe. Apreciar a diferenza entre marxe e recheo, entre os Botóns Preme 2 e Preme 3.

Android 2013 U2 04 Linear 06.jpg




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