Glissière Android de style Facebook

La nouvelle application Facebook et sa navigation sont tellement cool. J’essayais juste de voir comment cela peut être émulé dans mon application.

Quelqu’un at-il une idée de comment y parvenir?

entrer la description de l'image ici

En cliquant sur le bouton en haut à gauche, la diapositive de la page et l’écran suivant s’affiche:

entrer la description de l'image ici

Vidéo Youtube

Je me suis amusé avec ça, et le meilleur moyen que j’ai trouvé était d’utiliser un FrameLayout et de placer un HorizontalScrollView (HSV) personnalisé en haut du menu. À l’intérieur du HSV se trouvent les vues de votre application, mais il existe une vue transparente en tant que premier enfant. Cela signifie que lorsque le HSV a zéro décalage de défilement, le menu apparaîtra (et sera toujours cliquable de manière surprenante).

Lorsque l’application démarre, nous faisons défiler le HSV jusqu’au décalage de la première vue d’application visible, et lorsque nous voulons afficher le menu, nous revenons en arrière pour révéler le menu dans la vue transparente.

Le code est ici, et les deux boutons du bas (appelés HorzScrollWithListMenu et HorzScrollWithImageMenu) dans l’activité Lancement montrent les meilleurs menus que je pourrais proposer:

Démo du menu coulissant Android

Capture d’écran de l’émulateur (mid-scroll):

Capture d'écran de l'émulateur (mid-scroll)

Capture d’écran de l’appareil (défilement complet). Notez que mon icône n’est pas aussi large que l’icône du menu Facebook, donc la vue du menu et la vue «app» ne sont pas alignées.

Capture d'écran de l'appareil (défilement complet)

J’ai implémenté une navigation par glissement de type facebook dans ce projet de bibliothèque .

Vous pouvez facilement l’intégrer dans votre application, votre interface utilisateur et votre navigation. Vous devrez implémenter une seule activité et un seul fragment, informer la bibliothèque – et la bibliothèque fournira toutes les animations et la navigation voulues.

À l’intérieur du repository, vous pouvez trouver un projet de démonstration, avec la façon d’utiliser la lib pour implémenter une navigation de type facebook. Voici une courte vidéo avec enregistrement du projet de démonstration .

De plus, cette lib devrait être compatible avec ce modèle ActionBar, car elle est basée sur les transactions Activités et TranslateAnimations (pas les transactions Fragments et les vues personnalisées).

À l’heure actuelle, le plus gros problème est de le faire fonctionner correctement pour les applications, qui prennent en charge les modes portrait et paysage. Si vous avez des commentaires, veuillez les fournir via github.

Bonne chance,
Alex

Voici une autre lib et semble être la meilleure à mon avis. Je ne l’ai pas écrit ..

METTRE À JOUR:

Ce code semble fonctionner le mieux pour moi et déplace l’ensemble de l’Actionbar similaire à l’application G +.

Comment Google a-t-il réussi à faire cela? Slide ActionBar dans l’application Android

Je pense que l’application facebook n’est pas écrite en code natif (par code natif je veux dire, en utilisant des mises en page dans Android) mais ils ont utilisé webview pour cela et ont utilisé des bibliothèques ui javascript comme sencha . Cela peut être facilement réalisé en utilisant le framework sencha.

entrer la description de l'image ici

Voici encore une autre bibliothèque open source (très sympa)!

La bonne caractéristique de celui-ci est qu’il est facilement intégré à ActionBarSherlock.

Voici le lien du projet github

Voici le lien de téléchargement de Google Play

Je viens de mettre en place une vue similaire pour mon propre projet. Vous pouvez le vérifier ici

Voici l’écran de l’application basée sur la bibliothèque que j’ai écrit: ActionsContentView Exemple

Il est facile d’utiliser cette vue personnalisée en tant qu’élément de présentation XML. Voici l’exemple:

   

Si vous avez des questions sur l’utilisation de la bibliothèque ActionsContentView, je peux écrire un petit article sur les projets Wiki.

Quelques avantages de cette bibliothèque:

  • possibilité de faire glisser l’affichage au toucher
  • il est facile d’ajuster la taille de la barre d’actions en XML
  • prise en charge de toutes les versions du SDK Android à partir de la version 2.0

Il y a une limite:

  • toutes les vues défilantes horizontales ne fonctionneront pas aux limites de cette vue

Cordialement, Steven

Avec la révision du paquet de support Android 13 (mai 2013), il y a DrawerLayout pour créer un tiroir de navigation qui peut être extrait du bord d’une fenêtre. Et, tiroir de navigation est maintenant un modèle de conception.

bibliothèque de support v4

modèle de conception de tiroir de navigation

A fait un tour d’horizon d’une implémentation existante et l’a transformée en un projet de bibliothèque plus un exemple d’application. Aussi ajouté l’parsing XML ainsi que l’autodétection d’une barre d’action éventuellement présente, donc il fonctionne avec le natif ainsi que d’une barre d’action de support tels que ActionBarSherlock.

Celui-ci fait également glisser la barre d’action loin!

Le tout est un projet de bibliothèque avec un exemple d’application et est décrit dans Un menu glissant pour Android comme les applications Google et Facebook . Merci à scirocco pour l’idée initiale et le code!

SlideMenu sur GingerbreadSlideMenu sur ICS avec ActionBar

C’est simple et élégant: https://github.com/akotoe/android-slide-out-menu.git

Instantané:

entrer la description de l'image ici

Je pense que cette bibliothèque ne mentionne pas:

jfeinstein10 / SlidingMenu

github url: https://github.com/jfeinstein10/SlidingMenu

  • fonctionne bien avec la barre d’action ActionBarSherlock qui aide à la rétrocompatibilité !
  • Soutenir la diapositive droite et pas seulement glisser via le bouton!

Je ne peux pas encore commenter la réponse donnée par @Paul Grime, de toute façon j’ai envoyé sur son projet github le correctif du problème de scintillement ….

Je posterai le correctif ici, peut-être que quelqu’un en a besoin. Vous avez juste besoin d’append deux lignes de code. Le premier sous l’appel anim.setAnimationListener:

 anim.setFillAfter(true); 

Et le second après app.layout () appelle:

 app.clearAnimation(); 

J’espère que cela t’aides 🙂

Je l’ai implémenté avec AbsoluteLayout et un simple contrôleur de diapositives qui déplace la vue vers un décalage négatif à masquer.

Si quelqu’un est intéressé, je peux nettoyer le code / la mise en page et poster. Je sais qu’AbsoluteLayout est obsolète, mais c’était une implémentation très simple. Vue de gauche / Vue de droite, et lorsque vous “ouvrez”, déplacez simplement la vue de gauche d’un décalage -X vers la largeur de l’appareil – tout ce que vous voulez montrer de la vue de droite

Bonjour c’est le meilleur exemple d’application de démonstration qui fournit facebook comme menu de diapositives. Vérifiez le code ici

entrer la description de l'image ici

entrer la description de l'image ici

Dans le cadre de ma bibliothèque commune Android (ACL), j’ai implémenté SideBar. Principaux avantages:

  1. La barre latérale peut être réglée sur n’importe quelle position: gauche, haut, bas, droite
  2. La vue principale et la vue coulissante sont cliquables
  3. La barre latérale peut être partiellement montrée
  4. Atsortingbuts de style pour SideBar facilitent le changement de style
  5. Artefact dans repo Maven
  6. Partie d’une grande bibliothèque

Code source: https://github.com/serso/android-common/tree/master/views/src/main/java/org/solovyev/android/view/sidebar

Utilisation: https://github.com/serso/android-common/blob/master/samples/res/layout/acl_view_layout.xml

Récemment, j’ai travaillé sur ma version d’implémentation de menu coulissant. Il utilise la bibliothèque populaire J.Feinstein Android SlidingMenu.

Veuillez vérifier le code source sur GitHub:

https://github.com/baruckis/Android-SlidingMenuImplementation

Téléchargez l’application directement sur l’appareil pour essayer:

https://play.google.com/store/apps/details?id=com.baruckis.SlidingMenuImplementation

Le code devrait être explicite à cause des commentaires. J’espère que ce sera utile! 😉

J’ai trouvé un moyen plus simple pour cela et pour son fonctionnement. Utilisez le tiroir de navigation simple et appelez drawer.setdrawerListner () et utilisez la méthode mainView.setX () dans la méthode drawerSlide ci-dessous ou copiez mon code.

fichier xml

         

fichier java

  public class MainActivity extends AppCompatActivity { DrawerLayout drawerLayout; RelativeLayout mainView; ImageView menu; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); menu=(ImageView)findViewById(R.id.menu); drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mainView=(RelativeLayout)findViewById(R.id.content_frame); menu.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { drawerLayout.openDrawer(Gravity.LEFT); } }); drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() { @Override public void onDrawerSlide(View drawerView, float slideOffset) { mainView.setX(slideOffset * 300); } @Override public void onDrawerOpened(View drawerView) { } @Override public void onDrawerClosed(View drawerView) { } @Override public void onDrawerStateChanged(int newState) { } }); } } 

entrer la description de l'image ici

Je vous remercie

Je vais faire des suppositions audacieuses ici …

Je suppose qu’ils ont une mise en page qui représente le menu qui n’est pas visible. Lorsque vous appuyez sur le bouton de menu, ceux-ci animent la mise en page / vue en haut pour que vous puissiez vous déplacer et activer simplement la visibilité de la disposition du menu. Je n’ai pas pensé à cela provoquant une sorte de problèmes d’index z dans les vues, ou comment ils contrôlent cela.

Voici le guide de conception et de développement que l’on trouve dans la documentation officielle d’Android. Pas besoin d’append une bibliothèque externe non officielle. Seule la bibliothèque de support Android fera l’affaire. Trouvez les liens ici.

concevoir et développer .

L’application Android Facebook est peut-être construite avec Fragments . Le menu est un fragment, l’activité en profondeur (stream d’actualités / événements / amis, etc.) est l’autre fragment. Fondamentalement, une présentation «maître et détail» de la tablette sur un téléphone.

Pour plus d’informations, comme la bibliothèque de compatibilité commence par 1.6 et que cette application facebook s’exécute également sur les appareils avec Android 1.5, cela n’a pas été possible avec Fragments.

La façon dont vous pouvez le faire est la suivante: Créer une activité “base” BaseMenuActivity où vous mettez toute la logique pour le onItemClickListener pour votre liste de menus et définissez les 2 animations (“open” et “close”). À la fin / au début des animations, vous affichez / masquez la disposition de BaseMenuActivity (appelons-le menu_layout). La mise en page pour cette activité est simple, il ne s’agit que d’une liste d’éléments + une partie transparente à droite de votre liste. Cette partie sera cliquable et sa largeur aura la même largeur que votre “bouton de déplacement”. Avec cela, vous pourrez cliquer sur cette mise en page pour lancer l’animation pour laisser glisser le contenu vers la gauche et prendre tout l’écran. Pour chaque option (élément de la liste du menu), vous créez un “ContentActivity” qui étend la BaseMenuActivity. Ensuite, lorsque vous cliquez sur un élément de la liste, vous démarrez votre ItemSelectedContentActivity avec le menu visible (que vous fermez dès le début de votre activité). Les mises en page pour chaque ContentActivity sont FrameLayout et incluent le et. Il vous suffit de déplacer content_layout et de rendre le menu_layout visible lorsque vous le souhaitez.

C’est une façon de le faire et j’espère que j’ai été assez clair.

Je joue avec ces derniers jours et je suis arrivé à une solution assez simple et qui fonctionne avant Honeycomb. Ma solution consistait à animer la vue que je veux faire glisser ( FrameLayout pour moi) et à écouter la fin de l’animation (à quel point décaler la position gauche / droite de la vue). J’ai collé ma solution ici: comment animer la traduction d’une vue

Après une recherche de plusieurs heures, j’ai trouvé que la solution de Paul Grime était probablement la meilleure. Mais il contient trop de fonctionnalités. Il peut donc être difficile d’étudier pour les débutants. Donc, je voudrais fournir mon implémentation qui est venue de l’idée de Paul, mais c’est plus simple et devrait être facile à lire.

Implémentation de la barre de menus latérale en utilisant du code Java sans XML

Je n’ai pas vu l’incroyable SimonVT / android-menudrawer mentionné dans les réponses ci-dessus. Alors, voici un lien

https://github.com/SimonVT/android-menudrawer

Son super facile à utiliser et vous pouvez le mettre à gauche, à droite, en haut ou en bas. Très bien documenté avec exemple de code et licence Apache 2.0.

Android a ajouté le tiroir de navigation. Référer ceci

lien

En juin 2012, Google a ajouté des “templates” dans le plugin Eclipse ADT , et il existe un template appelé “master / detail flow” qui fait exactement cela (basé sur des fragmets)