Vous êtes sur la page 1sur 6

LinearLayout

Dans cette sance, nous allons crer une nouvelle application qui permet dafficher
des donnes dans un conteneur LinearLayout.

Modalits :

Travaillez en binme ou en trinme

Etape 1 : Ajouter une nouvelle Activity


Changer le contenu de lactivit comme suit :

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RadioGroup android:id="@+id/orientation"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip">
<RadioButton
android:id="@+id/horizontal"
android:text="horizontal" />
<RadioButton
android:id="@+id/vertical"
android:text="vertical" />
</RadioGroup>
<RadioGroup android:id="@+id/gravity"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip">
<RadioButton
android:id="@+id/left"
android:text="left" />
<RadioButton
android:id="@+id/center"
android:text="center" />
<RadioButton
android:id="@+id/right"
android:text="right" />
</RadioGroup>
</LinearLayout>
Notez que nous avons un LinearLayout enveloppant deux ensembles de radiogroup. RadioGroup est
une sous-classe de LinearLayout, donc notre exemple montre des botes imbriques comme si elles
taient tous les contenants de LinearLayout.

Le top RadioGroup met en place une range (android: orientation = "horizontal") des widgets
RadioButton. Le RadioGroup a 5dip de rembourrage sur tous les cts, en le sparant de l'autre
RadioGroup o dip signifie densit indpendante pixels. La largeur et la hauteur sont tous deux
wrap_content, de sorte que les boutons radio prendront seulement l'espace dont ils ont besoin.

Le RadioGroup bas est une colonne (android: orientation = "vertical") de trois widgets RadioButton.
Encore une fois, nous avons 5dip de rembourrage sur tous les cts et une hauteur naturelle
(android: layout_height = "wrap_content"). Cependant, nous avons mis android: layout_width
fill_parent, ce qui signifie la colonne de boutons radio revendique la totalit de la largeur de l'cran.

Pour rgler ces paramtres lors de l'excution en fonction des commentaires des utilisateurs, nous
avons besoin d'un peu de code Java:

Etape 2 : Changer la classe Java de lActivity

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.text.TextWatcher;
import android.widget.LinearLayout;
import android.widget.RadioGroup;
import android.widget.EditText;

public class LinearLayoutDemo extends Activity


implements RadioGroup.OnCheckedChangeListener {
RadioGroup orientation;
RadioGroup gravity;

@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);

orientation=(RadioGroup)findViewById(R.id.orientation);
orientation.setOnCheckedChangeListener(this);
gravity=(RadioGroup)findViewById(R.id.gravity);
gravity.setOnCheckedChangeListener(this);
}

public void onCheckedChanged(RadioGroup group, int checkedId) {


switch (checkedId) {
case R.id.horizontal:
orientation.setOrientation(LinearLayout.HORIZONTAL);
break;

case R.id.vertical:
orientation.setOrientation(LinearLayout.VERTICAL);
break;

case R.id.left:
gravity.setGravity(Gravity.LEFT);
break;

case R.id.center:
gravity.setGravity(Gravity.CENTER_HORIZONTAL);
break;

case R.id.right:
gravity.setGravity(Gravity.RIGHT);
break;
}
}
}

Dans onCreate (), nous regardons nos deux conteneurs de radiogroup et enregistrer un couteur sur
chaque, donc nous sommes informs lorsque les boutons radio changent d'tat
(setOnCheckedChangeListener (this)). Puisque l'activit implmente OnCheckedChangeListener,
l'activit elle-mme est l'auditeur.

Dans onCheckedChanged () (le rappel pour l'auditeur), nous voyons que RadioButton a eu un
changement d'tat. Bas sur le cliqu-upon article, nous ajustons soit l'orientation de la premire
LinearLayout ou la gravit de la deuxime LinearLayout.

La figure 1 montre le rsultat lorsque la dmo est d'abord lance dans l'mulateur.
Si l'on bascule sur le bouton radio "vertical", le haut RadioGroup ajuste pour correspondre, comme le
montre la Figure 2

Si nous Actionnons le bouton "droit" radio "centre" ou, le RadioGroup bas ajuste pour correspondre,
comme le montrent les figures 3 et 4.
Etape 3 : The Box Model

Certains cadres de GUI traitent tout comme des botes-ce que appelle Android conteneurs
LinearLayout. Dans Flex et XUL, par exemple, vous crez des botes et d'indiquer la taille qu'ils
devraient tre, en tant que pourcentage de l'espace disponible, puis vous mettez des widgets dans
les cases. Une tendance similaire existe dans Android pour LinearLayout, comme cela est dmontr
dans le projet Containers \ LinearPercent.

Ici, nous avons un fichier XML de mise en page qui contient un LinearLayout vertical enveloppant
trois widgets Button:

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:text="Fifty Percent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="50"
/>
<Button
android:text="Thirty Percent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="30"
/>

<Button
android:text="Twenty Percent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="20"
/>
</LinearLayout>

Chacun des trois widgets prendra un certain pourcentage de l'espace vertical pour le LinearLayout.
tant donn que le LinearLayout est rgl pour remplir l'cran, cela signifie que les trois widgets
diviser l'cran en fonction de leurs pourcentages demands.

Pour demander un pourcentage, chaque bouton effectue les oprations suivantes:

Dfinit son android: layout_height soit 0dip (notez que nous utilisons ici la hauteur, car il est un
LinearLayout vertical nous subdiviser)

Dfinit son android: layout_weight soit le pourcentage souhait (par exemple, android:
layout_weight = "50")

Tant que les poids rsument 100, comme ils le font dans ce cas, vous obtiendrez votre ventilation
dsire en pourcentage, comme le montre la Figure 5.