LinearLayout

La versión para imprimir ya no se admite y puede contener errores de representación. Actualiza los marcadores del navegador y utiliza en su lugar la función de impresión predeterminada del navegador.

Introdución

É un dos Layouts máis comúns e máis usados.
Dispón 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

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”.

Referencias:
- LinearLayout: http://developer.android.com/guide/topics/ui/layout/linear.html

Casos prácticos

Comezamos creando un novo proxecto: U2_04_Linear.

A propiedade android:orientation

Comezamos cambiando o xml do layout por este outro:

<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:text="Preme 1"/>
		
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Preme 2" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Preme 3" />
  
</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.

Agora cambiamos a orientación a vertical

<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" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Preme 1"/>
		
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Preme 2" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Preme 3" />
  
</LinearLayout>

A propiedade android:layout_weight

Engadimos/modificamos as propiedades marcadas no seguinte ficheiro XML.

<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" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Preme 1"/>
		
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:text="Preme 2" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Preme 3" />
  
</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.

As propiedades android:gravity e android:margin

Modificamos o layout anterior para deixalo como:

<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" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="70dp"
        android:text="Preme 1"/>
		
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Preme 2" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="Preme 3" />
  
</LinearLayout>

Observar na seguinte imaxe a ubicación dos botóns.

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.

<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:paddingBottom="20dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="20dp"
    android:orientation="vertical" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Preme 1"/>
	
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Preme 2" />
  
     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Preme 3" />
  
</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.

Finalmente imos facer padding nunha vista.

<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:padding="20dp"
    android:orientation="vertical" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:text="Preme 1"/>
		
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="50dp"
        android:text="Preme 2" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:text="Preme 3" />
  
</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.

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

LinearLayout

Sumario

Introdución

Casos prácticos

A propiedade android:orientation

A propiedade android:layout_weight

As propiedades android:gravity e android:margin

Padding

Menú de navegación

Buscar