Diapositive de style Facebook Android

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

Tout le monde a une idée de la façon dont cela peut être réalisé?

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

Vidéo Youtube

J'ai moi-même joué avec cela, et la meilleure façon que j'ai pu trouver é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 y a une vue transparente en tant que premier enfant. Cela signifie que lorsque le HSV a un décalage de défilement nul, le menu apparaîtra (et restera cliquable de manière surprenante).

Lorsque l'application démarre, nous faisons défiler le HSV jusqu'à l'offset de la première vue d'application visible, et lorsque nous voulons afficher le menu, nous faisons défiler pour révéler le menu à travers la vue transparente.

Le code est ici, et les deux boutons du bas (appelés HorzScrollWithListMenu et HorzScrollWithImageMenu) dans l'activité Launch affichent les meilleurs menus que j'ai pu trouver:

Démo du menu coulissant Android

Capture d'écran de l'émulateur (mi-défilement):

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, de sorte que l'affichage du menu et celui de l'application ne sont pas alignés.

J'ai implémenté une navigation de type diaporama sur 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, en informer la bibliothèque - et la bibliothèque fournira toutes les animations et la navigation souhaitées.

À l'intérieur du dépôt, vous pouvez trouver un projet de démonstration, avec comment utiliser la bibliothèque pour implémenter une navigation de type Facebook. Voici une courte vidéo avec enregistrement du projet de démonstration .

Cette bibliothèque doit également être compatible avec ce modèle ActionBar, car elle est basée sur les transactions d'activités et TranslateAnimations (et non sur les transactions de 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.

Cordialement,
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 il déplace toute la barre d'action similaire à l'application G +.

Comment Google a-t-il réussi à faire cela? Faites glisser 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 d'interface javascript comme sencha . Il peut être facilement réalisé en utilisant le framework sencha.

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

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 œuvre une vue similaire pour mon propre projet. Vous pouvez le vérifier ici

Voici un exemple d'application basé sur la bibliothèque que j'ai écrite:

Il est facile d'utiliser cette vue personnalisée comme élément de la mise en page XML. Voici un exemple:

    <shared.ui.actionscontentview.ActionsContentView
      android:id="@+id/content"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:actions_layout="@layout/actions"
      app:content_layout="@layout/content" />

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:

• pouvoir faire glisser la vue 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 2.0 et plus

Il y a une limitation:

• toutes les vues à défilement horizontal ne fonctionneront pas aux limites de cette vue

Cordialement, Steven

Avec la révision 13 du package de support Android (mai 2013), il existe DrawerLayout pour créer un tiroir de navigation qui peut être tiré depuis le bord d'une fenêtre. Et maintenant, le tiroir de navigation est 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 projet de bibliothèque et exemple d'application. Ajout de l'analyse XML ainsi que de la détection automatique d'une barre d'actions éventuellement présente, de sorte qu'elle fonctionne avec la barre d'actions native et de support telle que ActionBarSherlock.

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

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

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

Instantané:

Je pense que la 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 compatibilité descendante !
• Soutenez la diapositive droite et non seulement la diapositive via le bouton!

Je ne peux pas encore commenter la réponse donnée par @Paul Grime, de toute façon j'ai soumis sur son projet github la solution au problème de scintillement ....

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

anim.setFillAfter(true);

Et le second après l'appel app.layout ():

app.clearAnimation();

J'espère que cela t'aides :)

J'ai implémenté cela 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 publier. Je sais que AbsoluteLayout est obsolète, mais c'était une implémentation très simple. Vue gauche / vue droite, et lorsque vous "ouvrez la fenêtre", déplacez simplement la vue gauche d'un décalage -X à la largeur de l'appareil - tout ce que vous voulez montrer de la vue droite

Bonjour, c'est le meilleur exemple d'application de démonstration qui fournit Facebook comme un menu de diapositives. Vérifiez le code ici

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

1. La barre latérale peut être réglée dans 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. Les attributs stylables pour SideBar facilitent le changement de style
5. Artefact dans le dépôt 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 Android populaire J.Feinstein 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 en raison des commentaires. J'espère que ce sera utile! ;)

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

fichier xml

 <android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" >

<RelativeLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

  <ImageView
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:id="@+id/menu"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_marginTop="10dp"
      android:layout_marginLeft="10dp"
      android:src="@drawable/black_line"
      />
</RelativeLayout>


<RelativeLayout
    android:id="@+id/left_drawer"
    android:layout_width="200dp"
    android:background="#181D21"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    >
    </RelativeLayout>
 </android.support.v4.widget.DrawerLayout>

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) {

        }
    });
 }
}

Merci

Je vais faire des suppositions audacieuses ici ...

Je suppose qu'ils ont une disposition qui représente le menu qui n'est pas visible. Lorsque vous appuyez sur le bouton de menu, ils animent la disposition / vue en haut pour s'éloigner et permettent simplement la visibilité de la disposition du menu. Je n'ai pas pensé à cela provoquant des problèmes d'index z dans les vues, ni à la façon dont ils contrôlent cela.

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

lien

Voici le guide de conception et de développement trouvé dans la documentation Android officielle, pas besoin d'ajouter 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 Facebook Android est peut-être construite avec des fragments . Le menu est un fragment, l'activité en profondeur (fil d'actualité / événements / amis, etc.) est l'autre fragment. Fondamentalement, une disposition «maître et détail» de la tablette sur un téléphone.

Pour info, comme la bibliothèque de compatibilité commence avec 1.6 et que cette application facebook fonctionne également sur les appareils avec Android 1.5, cela ne pouvait pas être fait avec Fragments.

La façon dont vous pouvez le faire est la suivante: Créez une activité "de base" BaseMenuActivity où vous mettez toute la logique de onItemClickListener pour votre liste de menus et définit 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 de cette activité est simple, ce n'est qu'une liste avec des éléments + une partie transparente à droite de votre liste. Cette partie sera cliquable et sa largeur sera la même que celle de votre "bouton de déplacement". Avec cela, vous pourrez cliquer sur cette mise en page pour démarrer l'animation pour laisser le content_layout glisser vers la gauche et prendre tout l'écran. Pour chaque option (c'est-à-dire un élément de la liste de menus), vous créez une "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 fermerez dès que votre activité commencera). Les dispositions pour chaque ContentActivity sont FrameLayout et incluent les et. Il vous suffit de déplacer le content_layout et de rendre le menu_layout visible quand vous le souhaitez.

C'est une façon de le faire et j'espère avoir été assez clair.

J'ai joué avec ça ces derniers jours et j'ai trouvé une solution qui est assez simple à la fin, et qui fonctionne avant Honeycomb. Ma solution était d'animer la vue que je veux faire glisser ( FrameLayoutpour moi) et d'é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 plusieurs heures de recherche, 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. Je voudrais donc fournir mon implémentation qui est venue de l'idée de Paul mais elle est plus simple et devrait être facile à lire.

implémentation de la barre de menu latérale en utilisant du code java sans XML

Je n'ai pas vu l'incroyable SimonVT / android-menudrawer mentionné nulle part dans les réponses ci-dessus. Voici donc 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 un exemple de code et une licence Apache 2.0.

En juin 2012, Google a ajouté des «modèles» dans le plugin Eclipse ADT , et il existe un modèle appelé «flux maître / détail» qui fait exactement cela (basé sur les fragmets)