Android - Fragments, et App Bars

Transcription

1 Android - Fragments, et App Bars Jérémy S. Cochoy INRIA Paris-Saclay jeremy.cochoy@u-psud.fr Novembre 2015 Android - Fragments, et App Bars Novembre / 46

2 1 Appareille Photo - Correction 2 Tic Tac Toe 3 MVC Vue Modèle Contrôleur Intéret? 4 Fragments Kézako Créer un fragment L utiliser dans une vue UI dynamiques Communication entre fragments 5 App Bar Ajouter une App Bar Configurer son AppBar Réagir aux actions 6 Conclusion Android - Fragments, et App Bars Novembre / 46

3 La documentation Votre nouveau livre de chevet. https ://developer.android.com/guide/index.html Android - Fragments, et App Bars Novembre / 46

4 Appareille Photo - Correction TP Appareille Photo Correction du TP : Appareille Photo érémy S. Cochoy (INRIA Paris-Saclay jeremy.cochoy@u-psud.fr) Android - Fragments, et App Bars Novembre / 46

5 Tic Tac Toe TP : Réalisez un Tic Tac Toe Commencez le TP Tic-Tac-Toe. Android - Fragments, et App Bars Novembre / 46

6 Le pattern MVC MVC Android - Fragments, et App Bars Novembre / 46

7 MVC Vue La vue C est l interface qu affiche votre application. Dans un projet Android, il s agit du XML, ainsi que des composants que vous ajoutez dynamiquement via le code de votre activité. Android - Fragments, et App Bars Novembre / 46

8 MVC Modèle Le modèle Une ou des classes qui gèrent l accès à vos données. Elles peuvent provenir d un accès distant, un serveur ftp, un fichier local, une base de donnée locale(sqlite) ou distante (MySQL)... érémy S. Cochoy (INRIA Paris-Saclay jeremy.cochoy@u-psud.fr) Android - Fragments, et App Bars Novembre / 46

9 MVC Contrôleur Le contrôleur C est essentiellement le code de vos activités : le code formate les données, et les envois dans la vue. Le code gère les actions de l utilisateur et réagis en conséquences (appel d une nouvelle activité pour changer la vue, prise de photo, changement des images affichés...). érémy S. Cochoy (INRIA Paris-Saclay jeremy.cochoy@u-psud.fr) Android - Fragments, et App Bars Novembre / 46

10 Résumé MVC Intéret? Modèle MVC : Modèle (Model) : Ce que l on veut afficher Vue (View) : Comment l afficher Controleur (Controler) : Formate les données pour les afficher, et gère les événements tels que les entrées utilisateur. érémy S. Cochoy (INRIA Paris-Saclay jeremy.cochoy@u-psud.fr) Android - Fragments, et App Bars Novembre / 46

11 Avantages du MVC? MVC Intéret? Indépendance Les 3 blocs sont indépendant et communique via une interface claire et précise. Substitution de modèle Il est possible de remplacer un modèle "fichier locale" par un modèle "base de donnée distante", avec un minimum de modification de code, et sans modification sur la vue. Substitution de vue En modifiant uniquement l XML, on peux revoir le design de l interface. Dark side Attention aux fausses bonnes idées... Android - Fragments, et App Bars Novembre / 46

15 Les fragments Fragments Kézako FragmentActivity Android - Fragments, et App Bars Novembre / 46

16 Fragments Fragments Kézako Qu est-ce qu un fragment? C est une partie modulaire d une activité. Android - Fragments, et App Bars Novembre / 46

17 Fragments Fragments Kézako Pourquoi utiliser des fragments? Pour permettre a nos applications de s adapter aux supports physique. Android - Fragments, et App Bars Novembre / 46

18 Créer un fragment Fragments Créer un fragment Comment faire? Comme une Activité. Une subtilité : C est la méthode oncreateview() que l on redéfinit, et non oncreate(). Android - Fragments, et App Bars Novembre / 46

19 Un fragment vide Fragments Créer un fragment Code pour créer un fragment import a n d r o i d. os. Bundle ; import a n d r o i d. s u p p o r t. v4. app. Fragment ; import a n d r o i d. view. L a y o u t I n f l a t e r ; import a n d r o i d. view. ViewGroup ; p u b l i c c l a s s A r t i c l e F r a g m e n t e x t e n d s Fragment p u b l i c View oncreateview ( L a y o u t I n f l a t e r i n f l a t e r, ViewGroup c o n t a i n e r, Bundle s a v e d I n s t a n c e S t a t e ) { // I n f l a t e the l a y o u t f o r t h i s fragment r e t u r n i n f l a t e r. i n f l a t e (R. l a y o u t. a r t i c l e _ v i e w, c o n t a i n e r, f a l s e ) ; } } Android - Fragments, et App Bars Novembre / 46

20 Fragments Ajouter un fragment à son activité L utiliser dans une vue Ajouter un fragment via XML On peux ajouter du code XML dans layout-large, et un autre dans layout. Ajouter un fragment via l API A l exécution, on peux déterminer la résolution de l écran et dynamiquement remodeler l interface. Android - Fragments, et App Bars Novembre / 46

21 Fragments Ajouter un fragment via XML L utiliser dans une vue Code pour ajouter deux fragments <L i n e a r L a y o u t... > <fragment a ndroid:name="com. example. a n d r o i d. f r a g m e n t s. H e a d l i n e s F r a g m e n t " a n d r o i d : i d="@+i d / h e a d l i n e s _ f r a g m e n t " a n d r o i d : l a y o u t _ w e i g h t="1" a n d r o i d : l a y o u t _ w i d t h="0dp" a n d r o i d : l a y o u t _ h e i g h t=" match_parent " /> <fragment a ndroid:name="com. example. a n d r o i d. f r a g m e n t s. A r t i c l e F r a g m e n t " a n d r o i d : i d="@+i d / a r t i c l e _ f r a g m e n t " a n d r o i d : l a y o u t _ w e i g h t="2" a n d r o i d : l a y o u t _ w i d t h="0dp" a n d r o i d : l a y o u t _ h e i g h t=" match_parent " /> </ L i n e a r L a y o u t> Android - Fragments, et App Bars Novembre / 46

22 Fragments Ajouter un fragment à l exécution UI dynamiques FragmentManager Il nous faut un gestionaire de fragment (FragmentManager) pour construire un FragmentTansaction qui lui pouras ajouter / supprimer / remplacer des fragments dans notre activité. Il faut un containeur Il faut un containeur de type View pour y placer nos fragments. Un simple <FrameLayout x m l n s : a n d r o i d=" h t t p : // schemas. a n d r o i d. com/ apk / r e s / a n d r o i d " a n d r o i d : i d="@+i d / f r a g m e n t _ c o n t a i n e r " a n d r o i d : l a y o u t _ w i d t h=" match_parent " a n d r o i d : l a y o u t _ h e i g h t=" match_parent " /> convient. Android - Fragments, et App Bars Novembre / 46

23 Fragments Ajouter un fragment à l exécution UI dynamiques FragmentManager Il nous faut un gestionaire de fragment (FragmentManager) pour construire un FragmentTansaction qui lui pouras ajouter / supprimer / remplacer des fragments dans notre activité. Il faut un containeur Il faut un containeur de type View pour y placer nos fragments. Un simple <FrameLayout x m l n s : a n d r o i d=" h t t p : // schemas. a n d r o i d. com/ apk / r e s / a n d r o i d " a n d r o i d : i d="@+i d / f r a g m e n t _ c o n t a i n e r " a n d r o i d : l a y o u t _ w i d t h=" match_parent " a n d r o i d : l a y o u t _ h e i g h t=" match_parent " /> convient. Android - Fragments, et App Bars Novembre / 46

24 Fragments Ajouter un fragment à l exécution UI dynamiques Dans oncreate, on ajoute un fragment de la façon suivante : // On v e r i f i e que l on t r o u v e b i e n n o t r e c o n t a i n e r. i f ( f i n d V i e w B y I d (R. i d. f r a g m e n t _ c o n t a i n e r )!= n u l l ) { // On v e r i f i e que c e s t l e p r e m i e r lancement de l a c t i v i t e. i f ( s a v e d I n s t a n c e S t a t e!= n u l l ) { r e t u r n ; } // On c r e e r l e fragment a p l a c e r. H e a d l i n e s F r a g m e n t f i r s t F r a g m e n t = new H e a d l i n e s F r a g m e n t ( ) ; // On t r a n s m e t d e v e n t u e l s arguments. f i r s t F r a g m e n t. setarguments ( g e t I n t e n t ( ). g e t E x t r a s ( ) ) ; // On a j o u t e l e fragment au FrameLayout f r a g m e n t _ c o n t a i n e r. getsupportfragmentmanager ( ). b e g i n T r a n s a c t i o n ( ). add (R. i d. f r a gment_container, f i r s t F r a g m e n t ). commit ( ) ; } Android - Fragments, et App Bars Novembre / 46

25 Fragments Ajouter un fragment à l exécution UI dynamiques Détaille de la transaction : // R e c u p e r a t i o n du manager FragmentManager manager = getsupportfragmentmanager ( ) ; // C r e a t i o n de l a t r a n s a c t i o n F ragmenttransaction t r a n s a c t i o n = manager. b e g i n T r a n s a c t i o n ( ) ; //On a j o u t e un/ des f r a g m e n t s t r a n s a c t i o n. add (R. i d. f r a g m e n t _ c o n t a i n e r, f i r s t F r a g m e n t ) //On commit l e s o p e r a t i o n s t r a n s a c t i o n. commit ( ) ; Parce que son ajout est dynamique, ce fragment pourras être retiré ou remplacé. Android - Fragments, et App Bars Novembre / 46

26 Remplacer un fragment Fragments UI dynamiques Comment remplacer un fragment? Avec la méthode replace() au lieu de add(). Récupérer le fragment remplacé Souvent, on souhaite permettre à l utilisateur "d annuler" la transaction, et récupérer le fragment précédent. Pour ça il suffit d appeler addtobackstack() durant la transaction. Vie d un fragment Si un fragment est poussé sur la pile de retour, alors il est stoppé. Après un retour en arière, il passera dans l état redémarré. Sinon, il est détruit. Android - Fragments, et App Bars Novembre / 46

29 Remplacer un fragment Fragments UI dynamiques Création d un nouveau fragment et de ses arguments : // Le fragment A r t i c l e F r a g m e n t newfragment = new A r t i c l e F r a g m e n t ( ) ; // Les arguments Bundle a r g s = new Bundle ( ) ; a r g s. p u t I n t ( A r t i c l e F r a g m e n t. ARG_POSITION, p o s i t i o n ) ; newfragment. setarguments ( a r g s ) ; Android - Fragments, et App Bars Novembre / 46

30 Remplacer un fragment Fragments UI dynamiques Création d un nouveau fragment //Commence une t r a n s a c t i o n F ragmenttransaction t r a n s a c t i o n = getsupportfragmentmanager ( ). b e g i n T r a n s a c t i o n ( ) ; // Remplace l e fragment t r a n s a c t i o n. r e p l a c e (R. i d. f r a g m e n t _ c o n t a i n e r, newfragment ) ; // Conserve l e fragment p r e c e d a n t t r a n s a c t i o n. addtobackstack ( n u l l ) ; // E f f e c t u e l a t r a n s a c t i o n t r a n s a c t i o n. commit ( ) ; addtobackstack() addtobackstack() prend en argument une chaîne de caractère optionnelle qui permet de donner un identifiant unique à la transaction, pour effectuer des opérations avancées. Android - Fragments, et App Bars Novembre / 46

31 Fragments Communiquer entre fragments Communication entre fragments Comment? La communication se fait vià l activité, en lui imposant d implémenter une interface. On récupère un pointeur vers l activité, que l on downcast vers notre interface. Il y à donc un certains nombre de précautions à prendre. Android - Fragments, et App Bars Novembre / 46

32 Fragments Communiquer entre fragments Communication entre fragments Comment? La communication se fait vià l activité, en lui imposant d implémenter une interface. On récupère un pointeur vers l activité, que l on downcast vers notre interface. Il y à donc un certains nombre de précautions à prendre. Android - Fragments, et App Bars Novembre / 46

33 Fragments Communication entre fragments Disons que notre fragment hérite de ListFragment... Android - Fragments, et App Bars Novembre / 46

34 Fragments Communication entre fragments Forcer une interface pour notre activité On définit notre interface... // Notre fragment p u b l i c c l a s s H e a d l i n e s F r a g m e n t e x t e n d s L i s t F r a g m e n t { // V a r i a b l e g l o b a l q u i c o n t i e n d r a un p o i n t e u r v e r s l A c t i v i t y O n H e a d l i n e S e l e c t e d L i s t e n e r mcallback ; // L A c t i v i t y c o n t e n a n t l e fragment d e v r a s implementer l i n t e r f a c e : p u b l i c i n t e r f a c e O n H e a d l i n e S e l e c t e d L i s t e n e r { p u b l i c v o i d o n A r t i c l e S e l e c t e d ( i n t p o s i t i o n ) ; } }... Android - Fragments, et App Bars Novembre / 46

35 Fragments Communication entre fragments Forcer une interface pour notre activité... puis l on récupère un pointeur vers l activité, et on s assure qu elle implémente bien notre p u b l i c v o i d onattach ( A c t i v i t y a c t i v i t y ) { s u p e r. onattach ( a c t i v i t y ) ; } // Pour e t r e s u r de l a p r e s e n c e d une i m plementation, // on e f f e c t u e une c o n v e r s i o n e x p l i c i t e v e r s O n H e a d l i n e S e l e c t e d L i s t e n e r. t r y { mcallback = ( O n H e a d l i n e S e l e c t e d L i s t e n e r ) a c t i v i t y ; } c a t c h ( C l a s s C a s t E x c e p t i o n e ) { throw new C l a s s C a s t E x c e p t i o n ( a c t i v i t y. t o S t r i n g ( ) + " must implement O n H e a d l i n e S e l e c t e d L i s t e n e r " ) ; } Android - Fragments, et App Bars Novembre / 46

36 Fragments Exemple de communication Communication entre fragments Un example d utilisation de l interface p u b l i c v o i d o n L i s t I t e m C l i c k ( L i s t V i e w l, View v, i n t p o s i t i o n, l o n g i d ) { // Appel l a f o n c t i o n de l A c t i v i t y. mcallback. o n A r t i c l e S e l e c t e d ( p o s i t i o n ) ; } Android - Fragments, et App Bars Novembre / 46

37 Coté activité... Fragments Communication entre fragments Implémentation de l interface p u b l i c s t a t i c c l a s s M a i n A c t i v i t y e x t e n d s A c t i v i t y implements H e a d l i n e s F r a g m e n t. O n H e a d l i n e S e l e c t e d L i s t e n e r {... } p u b l i c v o i d o n A r t i c l e S e l e c t e d ( i n t p o s i t i o n ) { // L u t i l i s a t e u r a c h o i s i t un item dans l a l i s t e // On e f f e c t u e l e n e c e s s a i r e pour a f f i c h e r l a r t i c l e c o r r e s p o n d a n t. } Android - Fragments, et App Bars Novembre / 46

38 Fragments Communication entre fragments Pour gérer un mode tablette et un mode mobile... L activité qui parlais à l oreille des fragments... p u b l i c v o i d o n A r t i c l e S e l e c t e d ( i n t p o s i t i o n ) { //On c h e r c h e n o t r e fragment A r t i c l e F r a g m e n t a r t i c l e F r a g = ( A r t i c l e F r a g m e n t ) getsupportfragmentmanager ( ). f i n d F r a g m e n t B y I d (R. i d. a r t i c l e _ f r a g m e n t ) ; } i f ( a r t i c l e F r a g!= n u l l ) { // On a b i e n n o t r e fragment, donc on change l a f f i c h a g e a r t i c l e F r a g. u p d a t e A r t i c l e V i e w ( p o s i t i o n ) ; } e l s e { // S u i t e au p r o c h a i n s l i d e... } Android - Fragments, et App Bars Novembre / 46

39 Fragments La configuration correspondante Communication entre fragments Android - Fragments, et App Bars Novembre / 46

40 Cas mono-screen... Fragments Communication entre fragments } e l s e { // On e s t en mode un s e u l e c r a n. // On c o n s t r u i t l e nouveau fragment A r t i c l e F r a g m e n t newfragment = new A r t i c l e F r a g m e n t ( ) ; Bundle a r g s = new Bundle ( ) ; a r g s. p u t I n t ( A r t i c l e F r a g m e n t. ARG_POSITION, p o s i t i o n ) ; newfragment. setarguments ( a r g s ) ; // Et l on e f f e c t u e l a t r a n s a c t i o n... F r a g m e nttransaction t r a n s a c t i o n = getsupportfragmentmanager ( ). b e g i n T r a n s a c t i o n ( ) ; t r a n s a c t i o n. r e p l a c e (R. i d. f r a g m e n t _ c o n t a i n e r, newfragment ) ; t r a n s a c t i o n. addtobackstack ( n u l l ) ; } //On r e a l i s e l a t r a n s a c t i o n t r a n s a c t i o n. commit ( ) ; Android - Fragments, et App Bars Novembre / 46

41 Fragments La configuration correspondante Communication entre fragments Android - Fragments, et App Bars Novembre / 46

42 Fragments Cycle de vie d un fragment Communication entre fragments Android - Fragments, et App Bars Novembre / 46

43 App Bar Qu est-ce qu une barre d application? Android - Fragments, et App Bars Novembre / 46

44 App Bar Comment ajouter une ToolBar? Ajouter une App Bar Il faut le support de la fonctionnalité. Pour ça, il vous faut éventuellement installer la bibliothèque v7 appcompat, si ce n est pas déjà fait. Et hériter de la bonne classe Activity. p u b l i c c l a s s M y A c t i v i t y e x t e n d s AppCompatActivity { //... } Android - Fragments, et App Bars Novembre / 46

45 App Bar Comment ajouter une ToolBar? Ajouter une App Bar Il faut le support de la fonctionnalité. Pour ça, il vous faut éventuellement installer la bibliothèque v7 appcompat, si ce n est pas déjà fait. Et hériter de la bonne classe Activity. p u b l i c c l a s s M y A c t i v i t y e x t e n d s AppCompatActivity { //... } Android - Fragments, et App Bars Novembre / 46

46 App Bar Comment ajouter une ToolBar? Ajouter une App Bar Il faut le support de la fonctionnalité. Pour ça, il vous faut éventuellement installer la bibliothèque v7 appcompat, si ce n est pas déjà fait. Et hériter de la bonne classe Activity. p u b l i c c l a s s M y A c t i v i t y e x t e n d s AppCompatActivity { //... } Et choisissez le bon thème. <a p p l i c a t i o n a n d r o i d : t h e m s t y l e /Theme. AppCompat. L i g h t. NoActionBar " /> Android - Fragments, et App Bars Novembre / 46

49 App Bar Comment ajouter une ToolBar? Ajouter une App Bar On ajoute la ToolBar à la vue : <a n d r o i d. s u p p o r t. v7. w i d g e t. Toolbar a n d r o i d : i d="@+i d / my_toolbar " a n d r o i d : l a y o u t _ w i d t h=" match_parent " a n d r o i d : l a y o u t _ h e i g h t="? a t t r / a c t i o n B a r S i z e " a n d r o i d : b a c k g r o u n d="? a t t r / c o l o r P r i m a r y " a n d r o i d : e l e v a t i o n="4dp" a n d r o i d : t h e m s t y l e / ThemeOverlay. AppCompat. ActionBar " s t y l e / ThemeOverlay. AppCompat. L i g h t "/> Comme c est une barre d application, on veux la positionner en haut de l application. Android - Fragments, et App Bars Novembre / 46

50 App Bar Comment ajouter une ToolBar? Ajouter une App Bar On lie la ToolBar au niveau de l activité p r o t e c t e d v o i d oncreate ( Bundle s a v e d I n s t a n c e S t a t e ) { s u p e r. oncreate ( s a v e d I n s t a n c e S t a t e ) ; s e t C o n t e n t V i e w (R. l a y o u t. a c t i v i t y _ m y ) ; Toolbar mytoolbar = ( Toolbar ) f i n d V i e w B y I d (R. i d. my_toolbar ) ; s e t S u p p o r t A c t i o n B a r ( mytoolbar ) ; } Contenue de la barre : Par défaut, on y trouve le titre de l application, et un menu déroulant avec pour seul élément "Settings". Android - Fragments, et App Bars Novembre / 46

51 App Bar Personnalisez votre AppBar Configurer son AppBar Une vue XML Les boutons et autres objets sont stocké dans une vue, dans res/menu. Ajouter un bouton Pour chaque élément à ajouter, on place un élément item. Ce que l on veux : Android - Fragments, et App Bars Novembre / 46

54 App Bar Personnalisez votre AppBar Configurer son AppBar Example d AppBar <menu x m l n s : a n d r o i d=" h t t p : // schemas. a n d r o i d. com/ apk / r e s / a n d r o i d " > <! S i p o s s i b l e, "Mark F a v o r i t e ", d o i t a p p a r a i t r e comme un bouton. > <item a n d r o i d : i d="@+i d / a c t i o n _ f a v o r i t e " a n d r o i d : i c o / i c _ f a v o r i t e _ b l a c k _ 4 8 d p " a n d r o i d : t i t l s t r i n g / a c t i o n _ f a v o r i t e " app:showasaction=" ifroom "/> <! C o n f i g u r a t i o n d o i t T oujours e t r e dans l e menu d e r o u l a n t. > <item a n d r o i d : i d="@+i d / a c t i o n _ s e t t i n g s " a n d r o i d : t i t l s t r i n g / a c t i o n _ s e t t i n g s " app:showasaction=" n e v e r "/> </menu> Android - Fragments, et App Bars Novembre / 46

55 App Bar Comment réagir à un click? Réagir aux actions Au moment où l utilisateur clique : La méthode onoptionsitemselected() est appelé, avec en argument un MenuItem correspondant à l item cliqué. La méthode MenuItem.getItemId() permet de récupérer l ID de l élément. Android - Fragments, et App Bars Novembre / 46

56 App Bar Réagir aux actions Retrouvons notre exemple p u b l i c b o o l e a n o n O p t i o n s I t e m S e l e c t e d ( MenuItem item ) { s w i t c h ( item. g e t I t e m I d ( ) ) { c a s e R. i d. a c t i o n _ s e t t i n g s : // Lancer l A c t i v i t y " c o n f i g u r a t i o n ". r e t u r n t r u e ; c a s e R. i d. a c t i o n _ f a v o r i t e : // A j o u t e r l a r t i c l e c o u r a n t aux f a v o r i s r e t u r n t r u e ; } } d e f a u l t : // A c t i o n non reconnus, dans l e doute on l a i s s e f a i r e l a c l a s s e p a r e n t e. r e t u r n s u p e r. o n O p t i o n s I t e m S e l e c t e d ( item ) ; Android - Fragments, et App Bars Novembre / 46

57 Conclusion Conclusion Avec les fragments et les ToolBar, vous disposez de tous les outils pour réaliser une interface professionnelle, dynamique, et digne d une application du store. Gardez ces idées en tête pour votre projet. Android - Fragments, et App Bars Novembre / 46

58 Conclusion Pour me contacter : jeremy.cochoy@u-psud.fr, merci et à bientôt. Android - Fragments, et App Bars Novembre / 46