281 votes

Diapositive de style Facebook Android

Le nouveau Facebook de l'application et sa navigation est tellement cool. J'essayais juste de voir comment il peut être émulé dans mon application.

Quelqu'un a une idée de la façon dont il peut être atteint?

enter image description here

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

enter image description here

Vidéo YouTube

176voto

Paul Grime Points 10202

J'ai eu un jeu avec moi-même, et la meilleure façon que j'ai pu trouver est d'utiliser un FrameLayout et de jeter personnalisé HorizontalScrollView (HSV), en haut du menu. À l'intérieur de l'HSV sont à votre application de Vues, mais il y a une Vue transparente comme le premier enfant. Cela signifie que, lorsque le HSV a zéro de défilement de décalage, le menu affichera à travers (et encore être cliquable étonnamment).

Lorsque l'application démarre, nous défiler le HSV pour le décalage de la première visible d'Affichage de l'application, et lorsque nous voulons afficher le menu de nous revenir en arrière pour révéler le menu grâce à la transparence.

Le code est ici, et le bas deux boutons (appelé HorzScrollWithListMenu et HorzScrollWithImageMenu) dans l'activité de Lancement de montrer le meilleur des menus que je pouvais venir avec:

Android coulissantes menu démo

Capture d'écran de l'émulateur (mi-faites défiler la liste):

Screenshot from emulator (mid-scroll)

Capture d'écran de l'appareil (plein de défilement). Remarque mon icône n'est pas aussi large que le Facebook icône de menu, de sorte que l'affichage du menu et de l'application de la vue ne sont pas alignés.

Screenshot from device (full-scroll)

37voto

korovyansk Points 1622

J'ai mis en place facebook-like slideout de navigation dans ce projet de bibliothèque.

Vous pouvez facilement intégré dans votre application, votre INTERFACE utilisateur et navigation. Vous aurez besoin de mettre en œuvre une seule Activité et un Fragment, laissez bibliothèque de savoir à ce sujet - et la bibliothèque fournira tous voulu animations et de navigation.

À l'intérieur de l'opération, vous pouvez trouver de démonstration du projet, avec l'utilisation de la lib pour mettre en œuvre facebook navigation. Voici une petite vidéo avec enregistrement du projet de démonstration.

Aussi cette lib doit être compatible avec ce ActionBar modèle, car elle est fondée sur les Activités de transactions et TranslateAnimations (pas des Fragments des transactions et des Vues personnalisées).

Maintenant, le problème le plus sérieux est de faire fonctionner correctement pour l'application, qui soutiennent à la fois en mode portrait et paysage. Si vous avez des commentaires, veuillez les fournir via github.

Tous les meilleurs,
Alex

29voto

Dmitry Zaitsev Points 7119

Encore une autre bibliothèque (juste 1 classe) pour le menu de gauche:

Pourquoi c'est mieux?

Parce que c'est les caches de votre mise en page en Bitmap pour fournir d'excellentes performances, même pour les "gros" modèles. Peu importe la complexité de votre mise en page est - elle fonctionnera toujours avec la même efficacité.

Parce qu'il est souple. Il n'y a absolument aucune restriction pour votre menu: peut - ListView, il peut être RelativeLayout - quelle qu'elle soit une View.

L'utilisation est assez simple - il suffit d'ajouter votre menu et la mise en page dans un widget à partir de cette bibliothèque:

<com.agimind.widget.SlideHolder
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Here is any view that will represent your side menu. Don't forget to provide width and background! -->
    <View 
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:background="@color/white"
        />

    <!-- And here is your main layout -->
    <View 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</com.agimind.widget.SlideHolder>

Voici une capture d'écran:

Screenshot

24voto

Patrick Points 2766

Voici un autre lib et semble être le meilleur à mon avis. Je ne l'ai pas écrit ..

METTRE À JOUR:

Ce code semble fonctionner le mieux pour moi et il déplace toute la barre d'action similaire à l'application G +.

Comment est-ce que Google a réussi à faire cela? Slide ActionBar dans l'application Android

22voto

Sanjay Kumar Points 766

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 . Il peut être facilement réalisé en utilisant le framework sencha.

entrez la description de l'image ici

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X