LinearLayout

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

• 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:

 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.

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

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.

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.

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.

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

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