Première liste Todo - Partie 1 (XML)

Dans cette partie du tuto, on va mettre en place l'interface de notre première liste Todo : layout, editText, button et listView.

Dans cette partie du tuto, on va mettre en place l'interface de notre première liste Todo : layout, editText, button et listView.

Les paramètres du projet :

• Name : todo
• Package : com.androiddev.todo
• Activity : TodoListActivity

Voici l'application que nous allons réaliser :

Cette application possèdera un champ texte, un bouton et une liste. Lors de l'appui sur le bouton ajouter, on ajoute le texte rentrer dans la liste.

Main.xml

Dans /res/layout

Tout d'abord nous allons metttre en place l'interface.

Linear Layout

Le Layout vertical de base :

<?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"> </LinearLayout>

Nous allons ajouter un autre Linear Layout dans le celui précedemment créé mais en horizontale qui contiendra notre editText et notre bouton :

<LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" > </LinearLayout>

Widget

Maintenant on va placer nos composants utilisateurs (editText, button et Listview) aussi appelé widget.

Les deux composants suivants dans la linear layout horizontale :

EditText

<EditText android:id="@+id/textToDo" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Nouvelle tâche" android:layout_weight="1" > </EditText>

Explication :

• android:id : fixe l'id du composant.

•  android:layout_width="fill_parent" : On fixe la largeur du composant (ici il prendra toute la place disponible)

• android:layout_height="wrap_content" : On fixe la hauteur du composant (ici il prendra seulement la place qu'il a besoin)

• android:text="Nouvelle tâche" : On lui donne une valeur par défaut

• android:layout_weight="1" : On lui donne un "poids" (il sera prioritaire sur la largeur par rapport au bouton (au lieu de faire 50/50 avec le bouton en largeur, le bouton prendra seulement la place nécessaire et le reste sera à l'editText)

Button

<Button android:id="@+id/buttonAdd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/textButton" />

Explication :

• android:id : fixe l'id du composant.

•  android:layout_width="wrap_content" : On fixe la largeur du composant (ici il prendra seulement la place qu'il a besoin)

• android:layout_height="wrap_content" : On fixe la hauteur du composant (ici il prendra seulement la place qu'il a besoin)

• android:text="@string/textButton"  : On lui donne une valeur par défaut qui sera une variable XML que l'on créera plus tard.

Listview

Cette liste ne sera pas dans la linear layout horizontale mais à la suite de celle ci.

<ListView android:id="@+id/listToDo" android:layout_width="fill_parent" android:layout_height="wrap_content" />

Pas de besoin de précision ^^

strings.xml

Dans /res/values

Dans l'onglet strings.xml :

On crée les deux string nécessaires :

<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Liste Todo v1</string> <string name="textButton">Ajouter</string> </resources>

La première est le nom de l'application et la deuxième est le texte du boutton.

On a finit la parti XML, maintenant un petit récapitulatif :

main.xml

<?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"> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" > <EditText android:id="@+id/textToDo" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Nouvelle tâche" android:layout_weight="1" > </EditText> <Button android:id="@+id/buttonAdd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/textButton" /> </LinearLayout> <ListView android:id="@+id/listToDo" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout>

strings.xml

<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Liste Todo v1</string> <string name="textButton">Ajouter</string> </resources>

Pour voir la suite concernant la partie JAVA : Première liste Todo - Partie 2 (JAVA)