Android Facebook-Stil Folie

Die neue Facebook-Anwendung und ihre Navigation ist so cool. Ich habe nur versucht zu sehen, wie es in meiner Anwendung emuliert werden kann.

Jeder hat eine Ahnung, wie es erreicht werden kann?

Bildbeschreibung hier eingeben

Beim Klicken auf die Schaltfläche oben links wird die Seitenfolie und der folgende Bildschirm angezeigt:

Bildbeschreibung hier eingeben

YouTube-Video

Solutions Collecting From Web of "Android Facebook-Stil Folie"

Ich habe selbst damit gespielt, und der beste Weg, den ich finden konnte, war, ein FrameLayout zu verwenden und ein benutzerdefiniertes HorizontalScrollView (HSV) oben auf dem Menü zu platzieren. Innerhalb des HSV sind Ihre Anwendungsansichten, aber es gibt eine transparente Ansicht als erstes Kind. Das bedeutet, wenn der HSV Null Scroll-Offset hat, wird das Menü angezeigt (und immer noch anklickbar sein).

Wenn die App gestartet wird, scrollen wir den HSV zum Offset der ersten sichtbaren Anwendungsansicht, und wenn wir das Menü anzeigen möchten, scrollen wir zurück, um das Menü durch die transparente Ansicht zu zeigen.

Der Code ist hier, und die beiden unteren Schaltflächen (HorzScrollWithListMenu und HorzScrollWithImageMenu) in der Launch-Aktivität zeigen die besten Menüs, die ich mir vorstellen konnte:

Android-Sliding-Menü-Demo

Screenshot vom Emulator (Mid-Scroll):

Screenshot vom Emulator (Mid-Scroll)

Screenshot vom Gerät (Vollbild). Beachten Sie, dass das Symbol nicht so breit wie das Facebook-Menüsymbol ist, sodass die Menüansicht und die App-Ansicht nicht ausgerichtet sind.

Screenshot vom Gerät (Vollbild)

Ich habe eine Facebook-ähnliche Slideout-Navigation in diesem Bibliotheksprojekt implementiert.

Sie können es einfach in Ihre Anwendung, Ihre Benutzeroberfläche und Navigation integrieren. Sie müssen nur eine Aktivität und ein Fragment implementieren, die Bibliothek darüber informieren – und die Bibliothek wird alle gewünschten Animationen und Navigation bereitstellen.

Im Repo finden Sie ein Demo-Projekt, mit dem Sie die Lib zur Implementierung einer Facebook-ähnlichen Navigation verwenden können. Hier ist ein kurzes Video mit einem Demo-Projekt .

Auch diese Lib sollte mit diesem ActionBar-Muster kompatibel sein, da sie auf Activities-Transaktionen und TranslateAnimations basiert (nicht auf Fragments-Transaktionen und benutzerdefinierten Ansichten).

Gerade jetzt ist es das Problem, dass es gut für Anwendungen funktioniert, die sowohl Hoch- als auch Querformat unterstützen. Wenn Sie Feedback haben, geben Sie es bitte über github an.

Alles Gute,
Alex

Hier ist eine andere Lib und scheint meiner Meinung nach die beste zu sein. Ich habe es nicht geschrieben ..

AKTUALISIEREN:

Dieser Code scheint am besten für mich zu funktionieren und verschiebt die gesamte Actionbar ähnlich wie die G + App.

Wie hat Google das geschafft? Slide ActionBar in Android-Anwendung

Ich denke, Facebook-App ist nicht in nativem Code geschrieben (durch nativen Code ich meine, Layouts in Android verwenden), aber sie haben Webview dafür verwendet und haben einige Javascript ui Bibliotheken wie Sencha verwendet . Es kann leicht mit Sencha-Framework erreicht werden.

Bildbeschreibung hier eingeben

Hier ist noch eine andere (sehr nette) Open-Source-Bibliothek!

Die gute Eigenschaft über dieses ist, dass es leicht mit ActionBarSherlock integriert wird.

Hier ist der Link zum github- Projekt

Hier ist der Google Play- Downloadlink

Ich habe gerade eine ähnliche Ansicht für mein eigenes Projekt implementiert. Sie können es hier überprüfen

Hier ist der Bildschirm der Beispielanwendung basierend auf der Bibliothek, die ich geschrieben habe: Beispiel für ActionsContentView

Es ist einfach, diese benutzerdefinierte Ansicht als Element des XML-Layouts zu verwenden. Hier ist ein Beispiel:

   

Ich habe Fragen zur Nutzung der ActionsContentView-Bibliothek. Ich kann einen kleinen Artikel im Wiki-Projekt schreiben.

Einige Vorteile dieser Bibliothek:

  • Fähigkeit, die Ansicht per Berührung zu verschieben
  • Es ist einfach, die Größe der Aktionsleiste in XML anzupassen
  • Unterstützung aller Android SDK-Versionen ab 2.0

Es gibt eine Einschränkung:

  • Alle horizontalen Scroll-Ansichten funktionieren nicht in den Grenzen dieser Ansicht

Mit freundlichen Grüßen, Steven

Mit dem Android Support Package Version 13 (Mai 2013) gibt es DrawerLayout zum Erstellen eines Navigationsschubladens, der vom Rand eines Fensters gezogen werden kann. Und Navigationsschublade ist jetzt ein Entwurfsmuster.

v4 Unterstützungsbibliothek

Navigationsschublade Entwurfsmuster

Hat eine Zusammenfassung einer bestehenden Implementierung erstellt und diese in ein Bibliotheksprojekt plus Beispiel-App umgewandelt. Es wurde auch ein XML-Parsing sowie eine automatische Erkennung einer möglicherweise vorhandenen Aktionsleiste hinzugefügt, sodass es sowohl mit der systemeigenen als auch einer Unterstützungsaktionsleiste wie ActionBarSherlock funktioniert.

Dieser schiebt auch die Aktionsleiste weg!

Das Ganze ist ein Bibliotheksprojekt zusammen mit einer Beispiel-App und wird im A sliding Menu für Android wie Google und Facebook Apps beschrieben . Danke an scirocco für die Idee und den Code!

SlideMenu auf LebkuchenSlideMenu auf ICS mit ActionBar

Dies ist einfach und elegant: https://github.com/akotoe/android-slide-out-menu.git

Schnappschuss:

Bildbeschreibung hier eingeben

Ich denke, diese Bibliothek erwähnt nicht:

jfeinstein10 / GleitendesMenu

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

  • funktioniert gut mit Aktionsleiste ActionBarSherlock, die Abwärtskompatibilität hilft!
  • Unterstützen Sie die rechte Folie und nicht nur über die Schaltfläche!

Ich kann die Antwort von @Paul Grime noch nicht kommentieren, trotzdem habe ich auf seinem Github-Projekt die Lösung für das Flicker-Problem eingereicht ….

Ich werde den Fix hier posten, vielleicht braucht es jemand. Sie müssen nur zwei Codezeilen hinzufügen. Die erste unter dem Aufruf anim.setAnimationListener:

 anim.setFillAfter(true); 

Und der zweite Aufruf nach app.layout ():

 app.clearAnimation(); 

Hoffe das hilft 🙂

Ich habe dies mit AbsoluteLayout und einem einfachen Schieberegler implementiert, der die Ansicht auf einen negativen Offset verschiebt, um ihn zu verbergen.

Wenn jemand interessiert ist, kann ich den Code / Layout aufräumen und posten. Ich weiß, AbsoluteLayout ist veraltet, aber es war eine sehr direkte Implementierung. Linke Ansicht / Rechte Ansicht, und wenn Sie “aufklappen”, bewegen Sie einfach die linke Ansicht von einem -X-Offset auf die Breite des Geräts – was auch immer Sie von der rechten Ansicht anzeigen möchten

Hallo, dies ist die beste Beispiel-Demo-App, die Facebook wie Dia-Menü bietet. Überprüfen Sie den Code hier

Bildbeschreibung hier eingeben

Bildbeschreibung hier eingeben

Als Teil meiner Android Common Library (ACL) habe ich eine eigene Sidebar implementiert. Hauptvorteile:

  1. Die Seitenleiste kann auf eine beliebige Position eingestellt werden: links, oben, unten, rechts
  2. Sowohl Hauptansicht als auch Schiebeansicht sind anklickbar
  3. Seitenleiste kann teilweise angezeigt werden
  4. Styläre Attribute für SideBar erleichtern das Ändern des Stils
  5. Artefakt in Maven Repo
  6. Teil einer großen Bibliothek

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

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

Vor kurzem habe ich an meiner gleitenden Menüimplementierungsversion gearbeitet. Es verwendet beliebte J.Feinstein Android-Bibliothek SlidingMenu.

Bitte überprüfen Sie den Quellcode bei GitHub:

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

Laden Sie die App direkt auf das Gerät herunter, um Folgendes zu versuchen:

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

Code sollte aufgrund von Kommentaren selbsterklärend sein. Ich hoffe, es wird hilfreich sein! 😉

Ich habe einen einfachsten Weg dafür gefunden und es funktioniert. Verwenden Sie eine einfache Navigationsleiste und rufen Sie drawer.setdrawerListner () auf und verwenden Sie die Methode mainView.setX () in der Methode drawerSlide unten oder kopieren Sie meinen Code.

XML-Datei

         

Java-Datei

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

Bildbeschreibung hier eingeben

Danke

Ich werde hier ein paar mutige Vermutungen anstellen …

Ich nehme an, dass sie ein Layout haben, das das Menü darstellt, das nicht sichtbar ist. Wenn die Menüschaltfläche angetippt wird, animieren sie das Layout / die Ansicht oben, um aus dem Weg zu kommen, und aktivieren einfach die Sichtbarkeit des Menülayouts. Ich habe nicht darüber nachgedacht, was zu irgendwelchen Z-Index-Problemen in den Ansichten führt oder wie sie das kontrollieren.

Hier ist der Design- und Entwicklungsleitfaden, der in der offiziellen Android-Dokumentation zu finden ist, ohne dass eine inoffizielle externe Bibliothek hinzugefügt werden muss. Nur Android-Support-Bibliothek wird ausreichen. Finden Sie die Links hier.

entcasting und entwickeln .

Die Facebook Android App ist möglicherweise mit Fragmenten aufgebaut . Das Menü ist ein Fragment, die vertiefende Aktivität (Newsfeed / Events / Friends etc.) ist das andere Fragment. Im Grunde ein Tablet ‘Master & Detail’ Layout auf einem Telefon.

Für Informationen, da die Kompatibilitätsbibliothek mit 1.6 beginnt und diese Facebook-App auch auf Geräten mit Android 1.5 läuft, ist dies mit Fragmenten nicht möglich.

Die Art, wie Sie es tun könnten, ist: Erstellen Sie eine “Basis” -Aktivität BaseMenuActivity, wo Sie die gesamte Logik für den OnItemClickListener für Ihre Menüliste und definiert die 2 Animation (“Öffnen” und “Schließen”). Am Ende / Anfang der Animationen zeigen / verstecken Sie das Layout der BaseMenuActivity (nennen Sie es menu_layout). Das Layout für diese Aktivität ist einfach, es ist nur eine Liste mit Elementen + ein transparenter Teil auf der rechten Seite Ihrer Liste. Dieser Teil kann anklickbar sein und seine Breite entspricht der Breite des “Verschiebungsknopfes”. Damit können Sie auf dieses Layout klicken, um die Animation zu starten, damit das content_layout nach links rutschen und den gesamten Bildschirm einnehmen kann. Für jede Option (dh einen Eintrag der Menüliste) erstellen Sie eine “ContentActivity”, die die BaseMenuActivity erweitert. Wenn Sie dann auf ein Element der Liste klicken, starten Sie Ihre ItemSelectedContentActivity mit dem sichtbaren Menü (das Sie schließen, sobald Ihre Aktivität beginnt). Die Layouts für jede ContentActivity sind FrameLayout und enthalten die und. Sie müssen nur das content_layout verschieben und das menu_layout sichtbar machen, wenn Sie möchten.

Das ist ein Weg, und ich hoffe, ich war klar genug.

Ich habe in den letzten Tagen damit gespielt und ich habe eine Lösung gefunden, die am Ende ziemlich einfach ist und vor Honeycomb funktioniert. Meine Lösung bestand darin, die Ansicht zu animieren, die ich verschieben wollte ( FrameLayout für mich) und auf das Ende der Animation zu hören (an diesem Punkt, um die linke / rechte Position der Ansicht zu verschieben). Ich habe meine Lösung hier eingefügt: Wie man eine View-Übersetzung animiert

Nach einer Suche nach mehreren Stunden fand ich, dass Paul Grimes Lösung wahrscheinlich die beste ist. Aber es hat zu viel functionalität drin. Es kann daher schwierig sein, für Anfänger zu lernen. Ich möchte daher meine Implementierung vorstellen, die aus Pauls Idee stammt, aber es ist einfacher und sollte einfach zu lesen sein.

Implementierung der Seitenmenüleiste mit Java-Code ohne XML

Ich habe das erstaunliche SimonVT / android-menudrawer, das irgendwo in den obigen Antworten erwähnt wird, nicht gesehen. Also hier ist ein Link

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

Es ist super einfach zu bedienen und Sie können es auf links, rechts, oben oder unten setzen. Sehr gut dokumentiert mit Beispielcode und Apache 2.0-Lizenz.

Android hat die Navigationsleiste hinzugefügt. Verweisen Sie dies

Verknüpfung

Im Juni 2012 hat Google im Eclipse ADT-Plugin “Vorlagen” hinzugefügt , und es gibt eine Vorlage namens “Master / Detail-Flow”, die genau das tut (basierend auf Fragmets).