versions - lifl.frdumoulin/enseign/pje/cours/2.android/5.ateliersavancés.… · events onclick()...

Versions Création : Revision:

20181004 – ajout

Ateliers Quel Layout.xml pour quelle Activity ? Créer une nouvelle Activity Partager des données entre plusieurs activités Ecouter les événements Fragments Personnaliser une ListView ContactProvider Jeu de memory Internationaliser vos applications Android

Question Comment Android connait-il le xxxLayout.xml à

utiliser avec une Activité ? A quel endroit est-ce spécifié ?

Exemple Lorsque l’on crée un projet avec l’exemple de base

Android crée : Une Activity : MainActivity.java Un Layout : activity_main.xml

Comment se fait le lien entre les deux ?

Lien dans la méthode onCreate(…) setContentView(layoutid) permet de spécifier le layout à utiliser Android lit le fichier XML

il crée les objets correspondant aux déclarations XML

res/layout/ activity_main.xml

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }

public final class R { ... public static final class layout { ... public static final int activity_main=0x7f09001b; }

génère

Le problème Une Activity permet à l’utilisateur de faire …

… une activité Une Activity est associé à une UI (un écran) Quand on change d ’écran, on change d’Activity Une application est composée de différentes activités

Comment créer ces activités ?

L’Activity principale Créée au démarrage de l’application Est déclarée dans le fichier AndroidManifest.xml

Créer une nouvelle Activity Peut se faire à la suite d’une action dans la UI

Appuie sur un bouton par exemple Dans l’activity parent :

Créer un ‘Intent’, spécifiant la classe de l’activité à créer Peut passer des paramètres supplémentaires startActivity(intent)

Intent intent = new Intent(this, DisplayMessageActivity.class); intent.putExtra(EXTRA_MESSAGE, ‘A message’); startActivity(intent);

Un ‘intent’ est un message que l’on passe au système. Indique la classe

de l’Activity

Ajoute un objet que l’on pourra

récupérer

Demande la création de

l’Activity

Créer une nouvelle Activity Ne pas oublier d’ajouter la nouvelle Activity au

Manifest

<activity android:name="com.example.myfirstapp.DisplayMessageActivity" android:label="@string/title_activity_display_message" android:parentActivityName="com.example.myfirstapp.MainActivity" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="com.example.myfirstapp.MainActivity" /> </activity>

Récupérer des paramètres La nouvelle Activity peut récupérer les données

passées par le parent

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Get the message from the intent Intent intent = getIntent(); String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); }

Tutoriel - Starting Another Activity

http://developer.android.com/training/basics/firstapp/starting-activity.html

Intent intent = new Intent(this, DisplayMessageActivity.class); intent.putExtra(EXTRA_MESSAGE, ‘A message’); startActivity(intent);

Un ‘intent’ est un message que l’on passe au système. Indique la classe

de l’Activity

Ajoute un objet que l’on pourra

récupérer

Demande la création de

l’Activity

Cycle de vie d’une activité Possibilité de

surcharger les méthodes onCreate(), onStart(), …

Biblio Activities

http://developer.android.com/guide/components/activities.html

Managing the Activity Lifecycle http://developer.android.com/training/basics/activity-

lifecycle/index.html

Problème Plusieurs activités doivent partager les mêmes

données, ou accéder aux mêmes classes. Ces classes sont généralement uniques dans l’application.

Exemples : Une base de donnée Une liste d’objets

Solution Utiliser le pattern singleton La classe commune a une instance unique qui est

accessible par toutes les Activity. Privilégiez la solution avec un accesseur getInstance() plutot qu’une classe static

Attention Si vous devez faire passer des données entre 2 Activity,

utilisez l’Intent !!

pattern singleton

Bibliographie

public class MySharedClass { /** L’instance partagée */ private static MySharedClass instance = new MySharedClass(); /** l’accesseur */ public static MySharedClass getInstance() { return instance; } /** On interdit les autres instances */ private MySharedClass() { } /** Vos méthod */ public void method1() {}; public String method2() {return "" ;} }

Acceder à l’instance MySharedClass obj = MySharedClass.getInstance();

Bibliographie http://stackoverflow.com/questions/4878159/android-

whats-the-best-way-to-share-data-between-activities

Le problème Quand on clique sur un bouton dans un écran, on veut

déclencher une ou plusieurs actions dans le code

Les éléments graphiques envoient des « évenements » onClick, onTouch, …

Comment les exploiter ?

La solution Ecouter les événements venant des éléments

graphiques (ou autres) Utiliser le pattern Observateur/Observé

Votre code observe les éléments graphique

buttonPlus = (Button) findViewById(R.id.buttonPlus); buttonPlus.setOnClickListener(eventListener);

Observateur : Le code qui veut connaitre la survenue de l’évenement Créé un objet « listenner » (instance d’une classe avec

une méthode bien connue) Enregistre le listenner auprès de l’observé

View.OnClickListener listener = new View.OnClickListener() { public void onClick(View v) { plusClick(); } };

Observé : C’est l’élément graphique propose une méthode pour enregistrer un « listenner »

appel la méthode du listener quand l’événement arrive

buttonPlus.setOnClickListener(eventListener);

Deux approches Déclarer les listeners dans le code Déclarer dans le .xml la méthode traitant l’événement View.OnClickListener listener = new View.OnClickListener() { public void onClick(View v) { plusClick(); } }; public void onCreate(…) { buttonPlus = (Button) findViewById(R.id.buttonPlus); buttonPlus.setOnClickListener(listener); } public void plusClick() { // Code a effectuer apres le click }

Deux approches Déclarer dans le layout.xml la méthode traitant

l’événement

public void onCreate(…) { } public void plusClick(View view) { // Code a effectuer apres le click }

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_plus" android:onClick="plusClick" />

Events onClick()

From View.OnClickListener. This is called when the user either touches the item (when in touch mode), or focuses upon the item with the navigation-keys or trackball and presses the suitable "enter" key or presses down on the trackball.

onLongClick() From View.OnLongClickListener. This is called when the user either touches and holds the item (when

in touch mode), or focuses upon the item with the navigation-keys or trackball and presses and holds the suitable "enter" key or presses and holds down on the trackball (for one second).

onFocusChange() From View.OnFocusChangeListener. This is called when the user navigates onto or away from the item,

using the navigation-keys or trackball. onKey() From View.OnKeyListener. This is called when the user is focused on the item and presses or releases a hardware key on the device.

onTouch() From View.OnTouchListener. This is called when the user performs an action qualified as a touch event,

including a press, a release, or any movement gesture on the screen (within the bounds of the item). onCreateContextMenu()

From View.OnCreateContextMenuListener. This is called when a Context Menu is being built (as the result of a sustained "long click"). See the discussion on context menus in the Menus developer guide.

(from Android developers site) http://developer.android.com/guide/topics/ui/ui-events.html

Tutoriel – Calculatrice Faire une application calculatrice

http://a-renouard.developpez.com/tutoriels/android/calculatrice/

Modifier la calculatrice pour spécifier les ‘écouteurs’ (listeners) dans le fichier de

layout. Pour n’avoir qu’une méthode appelé lors de l’appuie sur

l’un des boutons ‘chiffres’ On peut retrouver à quel chiffre correspond le bouton à partir

du texte du bouton

Biblio http://developer.android.com/guide/topics/ui/ui-

events.html Faire une application calculatrice

http://a-renouard.developpez.com/tutoriels/android/calculatrice/

Le problème Comment avoir des parties de UI (d’écran) réutilisable

dans plusieurs écrans ? Ex: tablette : deux parties côte à côte

petit écran : deux écrans

Fragment C’est une partie de UI, associé à des comportements Partie de UI

Déclarée dans un layout.xml Ou dans le code

Comportements Déclarés dans une classe étendant « Fragment »

(Android>3.x) Peut être vue comme une Activity réutilisable

Doit être contenu dans une Activity parent Réutilisable dans différentes Activity

En pratique Le layout de l’activity parent déclare l’emplacement du

fragment, et la class du Fragment <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> <fragment android:name="com.example.android.fragments.ArticleFragment " android:id="@+id/headlines_fragment" android:layout_weight="1" android:layout_width="match_parent " android:layout_height="0dp" /> </LinearLayout>

classe du fragment

Emplacement

En pratique Il faut créer la classe du Fragment

Bien retourner la View du fragment dans onViewCreate()

public class ArticleFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.article_view, container, false); } }

En pratique Il faut créer le layout du Fragment

Comme un layout d’activité

<TextView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/book_detail" style="?android:attr/textAppearanceLarge" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" android:textIsSelectable="true"/>

Atelier Atelier-fragments.pdf

Biblio Building a Dynamic UI with Fragments

http://developer.android.com/training/basics/fragments/index.html Fragments

http://developer.android.com/guide/components/fragments.html Utiliser les Fragments dans une application Android pour diviser l'écran

en plusieurs Activity http://sberfini.developpez.com/tutoriaux/android/fragments/

Un tutorial avec une solution clé en main http://www.vogella.com/tutorials/AndroidFragments/article.html#fragments_t

utorial Supporting Different Screens

http://developer.android.com/training/basics/supporting-devices/screens.html Exemple

Créer une nouvelle application Android, et choisir « master/detail flow »

2017 Montrer une liste avec des elements Montrer la repet de elements

utilise un layout Montrer la liste des ele a afficher

Le problème Comment afficher une liste d’éléments sur un même

écran ? Ex: une liste de personnes avec leur email ?

Solution Utiliser une ListView, un ListAdapter et un layout dédié pour afficher

un élément de la liste

ListView élement graphique indiquant l’endroit dans la UI où doit être affiché la

liste Dans mainLayout.xml (ou en code)

Layout pour un élément Indique comment afficher un élément de la liste

ListView utilisera une instance de ce Layout pour chaque élément Adapter

Classe faisant le lien entre: ListView, le Layout pour un élément, la liste des éléments

Adapter Plusieurs Adapter de base:

Définir l’élément à afficher

public class Book { protected String author; protected String title; protected String isbn; /** * @param author * @param title * @param isbn */ public Book(String author, String title, String isbn) { super(); this.author = author; this.title = title; this.isbn = isbn; }

public String getAuthor() { return author; } public void setAuthor(String author) { this.author = author; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getIsbn() { return isbn; } public void setIsbn(String isbn) { this.isbn = isbn; } }

Définir l’emplacement de la liste (ListView) Dans le layout.xml

<RelativeLayout 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="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <ListView android:id="@+id/booklist" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </RelativeLayout>

Définir le layout d’un élément (res/layout/book_detail.xml) Dans son fichier xml <?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/ apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:contentDescription="@string/book_image" android:padding="10dp" /> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:paddingLeft="10dp" android:layout_weight="1" >

<TextView android:id="@+id/author" android:layout_width="fill_parent" android:layout_height="fill_parent" android:textSize="16sp" android:textStyle="bold" /> <TextView android:id="@+id/title" android:layout_width="fill_parent" android:layout_height="fill_parent" /> <TextView android:id="@+id/isbn" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout> </LinearLayout>

Créer et associer l’adapter (Dans l’activity)

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Recherche la vue affichant la liste ListView bookList = (ListView) findViewById(R.id.booklist); // Crée la liste demandée par SimpleADapter BookCollection books = new BookCollection(); List<Map<String, String>> listOfBook = new ArrayList<Map<String, String>>(); for( Book book : books.getBooks()) { Map<String, String> bookMap = new HashMap<String, String>(); bookMap.put("img", String.valueOf(R.drawable.ic_launcher)); // use available img bookMap.put("author", book.getAuthor()); bookMap.put("title", book.getTitle()); bookMap.put("isbn", book.getIsbn()); listOfBook.add(bookMap); } // Cree un adapter faisant le lien entre la liste d'élément et la ListView servant à l'affichage. SimpleAdapter listAdapter = new SimpleAdapter(this.getBaseContext(), listOfBook, R.layout.book_detail, new String[] {"img", "author", "title", "isbn"}, new int[] {R.id.img, R.id.author, R.id.title, R.id.isbn}); //Associe l’adapter et le ListView bookList.setAdapter(listAdapter); }

Résultat

Atelier Créer une application affichant une liste de livres.

Biblio Personnaliser une ListView

http://a-renouard.developpez.com/tutoriels/android/personnaliser-listview/

Probléme On veut accéder à la liste des contacts existant dans le

smartphone.

Solution Utiliser le « Contact Provider » class ContactsContract

android.provider.ContactsContract

Content Provider Permet de gérer l’accès à des données structurées Exemple

ContactProvider CalendarProvider

Votre application ;

doit demander le ContentProvider

Devient client du ContentProvider

ContentProvider : Structure des données Organisées en table

Une rangée (row) représente les données d’un objet Une colonne représente les données du même attribut

On parcours les rangée à l’aide d’un ‘cursor’ On demande une valeur par le nom de sa colonne

ContentProvider : Parcours des données

Uri CONTENT_URI = ContactsContract.Contacts.CONTENT_URI; String _ID = ContactsContract.Contacts._ID; String DISPLAY_NAME = ContactsContract.Contacts.DISPLAY_NAME; ContentResolver contentResolver = getContentResolver(); Cursor cursor = contentResolver.query(CONTENT_URI, null,null, null, null); […} Cursor.close();

while (cursor.moveToNext()) { String contact_id = cursor.getString(cursor.getColumnIndex( _ID )); String name = cursor.getString(cursor.getColumnIndex( DISPLAY_NAME )); }

Atelier Créer une activité affichant tous les contacts dans un

unique TextView

Voir le tutoriel http://examples.javacodegeeks.com/android/core/provi

der/android-contacts-example/

Biblio Tutorial

http://examples.javacodegeeks.com/android/core/provider/android-contacts-example/

Contact Provider http://developer.android.com/guide/topics/providers/c

ontacts-provider.html

Memory Definitions

http://fr.wikipedia.org/wiki/Memory_%28jeu%29 http://www.linternaute.com/jeu/classique/le-memory/

But du jeu Le but du jeu est de retourner des cartes deux par deux,

et de retrouver les paires. Réalisation Points difficiles

Interface dynamique Générateur aléatoire

Réflexions sur l’architecture MainActivity

avec GridLayout 1x CardFragment

16 instances ? paramétré par ce qui

doit être affiché ?

A A A A

A A A A

A A A A

A A A A score : 0/8

Bibliographie Introduction (Vogella)

http://www.vogella.com/articles/Android/article.html Android developer’s API

http://developer.android.com/guide/components/index.html

http://developer.android.com/training/basics/fragments/creating.html

Android training http://developer.android.com/training/index.html

Internationaliser vos applications Android Voir

http://a-renouard.developpez.com/tutoriels/android/internationalisation/

http://developer.android.com/training/basics/supporting-devices/languages.html

Services Les services sous Android

http://nbenbourahla.developpez.com/tutoriels/android/services-sous-android/

Sites http://android.developpez.com/cours/

Plusieurs tutoriels, du debutant a l’avancé

Debuter Introduction à la programmation sous Android

http://nbenbourahla.developpez.com/tutoriels/android/introduction-programmation-android/

Introduction aux vues sous Android http://nbenbourahla.developpez.com/tutoriels/an

droid/introduction-vues-sous-android/

Applications http://a-

renouard.developpez.com/tutoriels/android/calculatrice/

Créer une soundboard http://jodul.developpez.com/tutoriels/android/creer-

soundboard/

Divers Intégration Google Maps dans Android

http://michel-dirix.developpez.com/tutoriels/android/integration-google-maps-android/

Personnaliser une ListView http://a-

renouard.developpez.com/tutoriels/android/personnaliser-listview/

Internationaliser vos applications Android http://a-

renouard.developpez.com/tutoriels/android/internationalisation/ Construire dynamiquement ses IHM Android

http://mathias-seguy.developpez.com/cours/android/construction-ihm-dynamique/

Notifications Utiliser les notifications pour avertir l'utilisateur

http://a-renouard.developpez.com/tutoriels/android/notifications/

Les notifications sous Android http://nbenbourahla.developpez.com/tutoriels/java/an

droid_notification/

Fragments Building a Dynamic UI with Fragments

http://developer.android.com/training/basics/fragments/index.html

Utiliser les Fragments dans une application Android pour diviser l'écran en plusieurs Activity http://sberfini.developpez.com/tutoriaux/android/frag

ments/ Supporting Different Screens

http://developer.android.com/training/basics/supporting-devices/screens.html

Services Les services sous Android

http://nbenbourahla.developpez.com/tutoriels/android/services-sous-android/

Comment utiliser SQLite sous Android Comment utiliser SQLite sous Android

http://a-renouard.developpez.com/tutoriels/android/sqlite/