Paris Android User Group

2 450 vues

Publié le

Présentation UI guidelines et mise en place des Quick Actions Popups

0 commentaire
5 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 450
Sur SlideShare
0
Issues des intégrations
0
Intégrations
72
Actions
Partages
0
Téléchargements
29
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Paris Android User Group

  1. 1. Paris Android User Group Mise en place des Quick Actions Popups Nicolas Chambrier 23/11/2010
  2. 2. 2 Qui suis-je ? ● Consultant/Architecte Clever Age ● Une société où il fait bon travailler :) ● Pôle expertise ● Bande de geeks ! @naholyr
  3. 3. 3 Parole, parole, parole... ● Twitter for Android → Modèle d'UI ● Open-source ? On attend toujours… ● Mais les conseils doivent être suivis ● Comment on se démerde nous ?
  4. 4. 4 Nouvelles UI guidelines (1/3) Action Bar ● Actions courantes et globales ● Et la touche menu ? → Actions avancées ● Et la touche search ? → Bouton physique optionnel ● Window.FEATURE_NO_TITLE
  5. 5. 5 Nouvelles UI guidelines (2/3) Quick Actions Popup ● Actions contextuelles ● Pourquoi pas un context menu ? → plus joli → moins encombrant → mais plus complexe
  6. 6. 6 Nouvelles UI guidelines (3/3) Home ● Voir toutes les « zones » de l'appli ● Pas de données affichées immédiatement ? → performance ● Chemin simple pour aller partout (retour home + clic)
  7. 7. 7 UI et UX sont sur un bateau... ● Joli ≠ ergonomique ● Twitter for Android ≠ votre application ● Les utilisateurs de Twitter ≠ vos utilisateurs ● USE YOUR BRAIN !!
  8. 8. 8 Histoires d'une refonte graphique (Horaires TER SNCF)
  9. 9. 9 Gros plan : Quick Actions  ● Remplace la notion de menu contextuel → Donc commencez par un ContextMenu :) ● Est-ce vraiment approprié à mon application ? → Pas vraiment plus ergonomique → Sexy : certes, mais si l'appli est moche ? 
  10. 10. 10 Dieu nous a abandonné ! ● Google ne nous aide pas sur ce coup... Est-on seuls au monde ? ● Des initiatives personnelles : ● WHSFinder https://github.com/ruqqq/WorldHeritageSite/tree/master/src/sg/ruqqq/WHSFinder ● Simple QuickActions http://code.google.com/p/simple-quickactions/ Lorenz http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/ ● DevoTeam http://code.google.com/p/devoquickaction/ (inspiré de WHSFinder) ● Horaires TER SNCF http://code.google.com/p/horaires-ter-sncf/wiki/QuickActionWindow
  11. 11. 11 Pourquoi réinventer la roue ? ● Facile à faire ● Besoins spécifiques : ● Intégration intents → système de plugins ● Contraintes : ● Compétences limitées en graphisme ● Layout limité à 1 background (9-patch)
  12. 12. 12 Utilisation QuickActionWindow (1/4) ● Intégrer la librairie .jar ● Créez vos layouts <?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="wrap_content" android:background="@drawable/quick_actions_background_below"> <HorizontalScrollView android:layout_width="fill_parent" android:layout_height="wrap_content" android:fadingEdgeLength="15dip" android:fadeScrollbars="true"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/quick_actions" android:orientation="horizontal" android:gravity="center_horizontal" /> </HorizontalScrollView> </LinearLayout>
  13. 13. 13 Utilisation QuickActionWindow (2/4) ● Créer la popup final Intent pluginIntent = new Intent(Intent.ACTION_VIEW); pluginIntent.setType(Gare.CONTENT_TYPE); final Context context = this; QuickActionWindow window = QuickActionWindow.getWindow(this, Common.QUICK_ACTION_WINDOW_CONFIGURATION, new QuickActionWindow.Initializer() { @Override public void setItems(QuickActionWindow window) { // ici ajouter les items } }, POPUP_ID); // Complete intent items, adding station ID Bundle extras = new Bundle(); extras.putLong(Gare._ID, id); window.dispatchIntentExtras(extras, pluginIntent); window.show(view);
  14. 14. 14 Utilisation QuickActionWindow (3/4) ● Ajouter item fixe ● Ajouter des « pubs » // Add item "add/remove to favorites", always here int favIconId; if (Gare.getFavorites(context).has(id)) { favIconId = R.drawable.quick_action_remove_favorite; } else { favIconId = R.drawable.quick_action_add_favorite; } window.addItem(getString(favStringId), getResources().getDrawable(favIconId), new QuickActionWindow.Item.Callback() { public void onClick(QuickActionWindow.Item item, View anchor) { anchor.findViewById(R.id.favicon).performClick(); } }); // Advertisement items for not found plugins (GMap & Itineraires) QuickActionWindow.Advertisement[] ads = new QuickActionWindow.Advertisement[] { new Common.PluginMarketAdvertisement(context, "gmap", "MapActivity", R.drawable.quick_action_gmap, "Localiser sur une carte"), new Common.PluginMarketAdvertisement(context, "itineraire", "ItineraireFromActivity", R.drawable.quick_action_itineraire_from, "Itinéraire depuis cette gare..."), new Common.PluginMarketAdvertisement(context, "itineraire", "ItineraireToActivity", R.drawable.quick_action_itineraire_to, "Itinéraire vers cette gare..."), };
  15. 15. 15 Utilisation QuickActionWindow (4/4) ● Ajoutez des « plugins » par intent // Plugins window.addItemsForIntent(context, pluginIntent, new QuickActionWindow.IntentItem.ErrorCallback() { @Override public void onError(ActivityNotFoundException e, IntentItem item) { Toast.makeText(item.getContext(), "Erreur : Application introuvable", Toast.LENGTH_LONG).show(); ErrorReporter.getInstance().handleSilentException(e); } }, ads);
  16. 16. 16 Et moi dans tout ça ? ● Réinventer la roue n'est pas forcément le mal ● Librairies open-source ● Attendre que Google nous livre des composants graphiques dans son SDK ?
  17. 17. 17 Android = liberté ● Restez flexible ! ● Guidelines ≠ marbre ● Twitter a évolué (vers une UI à la iPhone...) ● Être suiveur ou innovateur ?
  18. 18. 18 D'autres ressources ● GreenDroid → ActionBar et autres joyeusetés :) android.cyrilmottier.com ● Sûrement plein d'autres → Google's your friend :P
  19. 19. 19 Des questions ? http://www.slideshare.net/naholyr/paris-android-user-group

×