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.

Hat jemand eine Ahnung, wie es erreicht werden kann?

Wenn Sie auf die Schaltfläche oben links klicken, wird die Seitenfolie und der folgende Bildschirm angezeigt:

YouTube-Video

Ich habe selbst damit gespielt, und der beste Weg, den ich finden konnte, war, ein FrameLayout zu verwenden und eine benutzerdefinierte HorizontalScrollView (HSV) über das Menü zu legen. Innerhalb des HSV befinden sich Ihre Anwendungsansichten, es gibt jedoch eine transparente Ansicht als erstes untergeordnetes Element. Das heißt, wenn der HSV einen Bildlaufversatz von Null hat, wird das Menü durch angezeigt (und ist überraschenderweise immer noch anklickbar).

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

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

Android-Schiebemenü-Demo

Screenshot vom Emulator (Mid-Scroll):

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

Ich habe in diesem Bibliotheksprojekt eine Facebook-ähnliche Slideout-Navigation 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 bietet alle gewünschten Animationen und Navigationen.

Im Repo finden Sie ein Demo-Projekt mit Informationen zur Verwendung der Bibliothek zur Implementierung einer Facebook-ähnlichen Navigation. Hier ist ein kurzes Video mit Aufzeichnung des Demo-Projekts .

Auch diese Bibliothek sollte mit diesem ActionBar-Muster kompatibel sein, da sie auf Aktivitäten-Transaktionen und TranslateAnimations basiert (nicht auf Fragmenttransaktionen und benutzerdefinierten Ansichten).

Derzeit besteht das größte Problem darin, dass es für Anwendungen geeignet ist, die sowohl den Hoch- als auch den Querformatmodus unterstützen. Wenn Sie Feedback haben, geben Sie es bitte über Github.

Alles Gute,
Alex

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

AKTUALISIEREN:

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

Wie hat Google das geschafft? Schieben Sie die ActionBar in der Android-Anwendung

Ich denke, die Facebook-App ist nicht in nativem Code geschrieben (mit nativem Code meine ich die Verwendung von Layouts in Android), aber sie haben Webview dafür verwendet und einige Javascript- UI- Bibliotheken wie Sencha verwendet . Dies kann leicht mit dem Sencha-Framework erreicht werden.

Hier ist noch eine (sehr schöne) Open Source Bibliothek!

Das Gute an diesem ist, dass es leicht in ActionBarSherlock integriert werden kann.

Hier ist die Link Github- Projekt

Hier ist der Google Play- Download-Link

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

Hier ist ein Bildschirm der Beispielanwendung basierend auf der Bibliothek, die ich geschrieben habe:

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

    <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" />

Wenn Sie Fragen zur Verwendung der ActionsContentView-Bibliothek haben, kann ich einen kleinen Artikel im Projekt-Wiki schreiben.

Einige Vorteile dieser Bibliothek:

• Möglichkeit, die Ansicht durch Berühren 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 Bildlaufansichten funktionieren nicht an den Grenzen dieser Ansicht

Viele Grüße, Steven

Mit der Version 13 des Android-Support-Pakets (Mai 2013) gibt es DrawerLayout zum Erstellen einer Navigationsschublade, die vom Rand eines Fensters eingezogen werden kann. Und die Navigationsschublade ist jetzt ein Entwurfsmuster.

v4-Unterstützungsbibliothek

Designmuster der Navigationsschublade

Hat eine Zusammenfassung einer bestehenden Implementierung gemacht und in ein Bibliotheksprojekt plus Beispiel-App umgewandelt. Außerdem wurde die XML-Analyse sowie die automatische Erkennung einer möglicherweise vorhandenen Aktionsleiste hinzugefügt, sodass sie sowohl mit der nativen als auch mit einer unterstützenden Aktionsleiste wie ActionBarSherlock funktioniert.

Dieser schiebt auch die Aktionsleiste weg!

Das Ganze ist ein Bibliotheksprojekt zusammen mit einer Beispiel-App und wird unter Ein verschiebbares Menü für Android wie Google- und Facebook-Apps beschrieben . Vielen Dank an scirocco für die erste Idee und den Code!

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

Schnappschuss:

Ich denke, dass die Bibliothek nicht erwähnt:

jfeinstein10 / SlidingMenu

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

• funktioniert gut mit der Aktionsleiste ActionBarSherlock, die zur Abwärtskompatibilität beiträgt !
• Unterstützen Sie die rechte Folie und schieben Sie nicht nur über die Taste!

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

Ich werde das Update hier posten, vielleicht braucht es jemand. Sie müssen nur zwei Codezeilen hinzufügen. Der erste unter dem Aufruf von anim.setAnimationListener:

anim.setFillAfter(true);

Und der zweite nach dem Aufruf von app.layout ():

app.clearAnimation();

Hoffe das hilft :)

Ich habe dies mit AbsoluteLayout und einem einfachen Schieberegler implementiert, der die Ansicht auf einen negativen Versatz verschiebt, um sie auszublenden.

Wenn jemand interessiert ist, kann ich den Code / das Layout bereinigen und posten. Ich weiß, dass AbsoluteLayout veraltet ist, aber es war eine sehr einfache Implementierung. Linke Ansicht / Rechte Ansicht, und wenn Sie "aufschieben", verschieben Sie einfach die linke Ansicht von einem -X-Versatz zur Gerätebreite - was auch immer Sie in der rechten Ansicht anzeigen möchten

Hallo, dies ist die beste Beispiel-Demo-App, die ein Facebook-ähnliches Folienmenü bietet. Überprüfen Sie den Code hier

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 die Hauptansicht als auch die Schiebeansicht können angeklickt werden
3. Die Seitenleiste kann teilweise angezeigt werden
4. Stilbare Attribute für SideBar erleichtern das Ändern des Stils
5. Artefakt im 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 Sliding-Menü-Implementierungsversion gearbeitet. Es verwendet die 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

Der 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 die einfache Navigationsleiste und rufen Sie drawer.setdrawerListner () auf. Verwenden Sie die Methode mainView.setX () in der unten stehenden drawerSlide-Methode oder kopieren Sie meinen Code.

XML-Datei

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

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

        }
    });
 }
}

Vielen Dank

Ich werde hier einige mutige Vermutungen anstellen ...

Ich gehe davon aus, dass sie ein Layout haben, das das Menü darstellt, das nicht sichtbar ist. Wenn Sie auf die Menüschaltfläche tippen, animieren sie das Layout / die Ansicht oben, um sie aus dem Weg zu räumen, und aktivieren einfach die Sichtbarkeit des Menülayouts. Ich habe nicht darüber nachgedacht, was zu Problemen mit dem Z-Index in den Ansichten führt oder wie sie dies steuern.

Android hat die Navigationsschublade hinzugefügt. Verweisen Sie darauf

Verknüpfung

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

entwerfen und entwickeln .

Die Facebook Android App wird möglicherweise mit Fragmenten erstellt . Das Menü besteht aus einem Fragment, die ausführliche Aktivität (Newsfeed / Events / Friends usw.) ist das andere Fragment. Grundsätzlich ein Tablet 'Master & Detail'-Layout auf einem Telefon.

Da die Kompatibilitätsbibliothek mit 1.6 beginnt und diese Facebook-App auch auf Geräten mit Android 1.5 ausgeführt wird, ist dies mit Fragmenten nicht möglich.

So können Sie dies tun: Erstellen Sie eine "Basis" -Aktivität BaseMenuActivity, in der Sie die gesamte Logik für den onItemClickListener für Ihre Menüliste ablegen und die 2 Animationen definieren ("Öffnen" und "Schließen"). Am Ende / Anfang der Animationen zeigen / verbergen Sie das Layout der BaseMenuActivity (nennen wir es menu_layout). Das Layout für diese Aktivität ist einfach. Es handelt sich nur um eine Liste mit Elementen + einem transparenten Teil rechts von Ihrer Liste. Dieser Teil kann angeklickt werden und seine Breite entspricht der Breite Ihrer "Verschieben-Schaltfläche". Damit können Sie auf dieses Layout klicken, um die Animation zu starten, damit das content_layout nach links verschoben wird und den gesamten Bildschirm einnimmt. Für jede Option (dh Element 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 das 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 eine Lösung gefunden, die am Ende recht einfach ist und vor Honeycomb funktioniert. Meine Lösung bestand darin, die Ansicht zu animieren, die ich ( FrameLayoutfür mich) verschieben möchte, und auf das Ende der Animation zu warten (an diesem Punkt, um die linke / rechte Position der Ansicht zu versetzen). Ich habe meine Lösung hier eingefügt: So animieren Sie die Übersetzung einer Ansicht

Nach einer mehrstündigen Suche fand ich, dass Paul Grimes Lösung wahrscheinlich die beste ist. Aber es hat zu viel Funktionalität. Daher kann es für Anfänger schwierig sein, zu lernen. Daher möchte ich meine Implementierung bereitstellen, die aus Pauls Idee stammt, aber einfacher ist und leicht zu lesen sein sollte.

Implementierung der Seitenmenüleiste unter Verwendung von Java-Code ohne XML

Ich habe den erstaunlichen SimonVT / Android-Menudrawer, der irgendwo in den obigen Antworten erwähnt wurde, nicht gesehen. Also hier ist ein Link

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

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

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