it-swarm.com.de

Android Facebook style slide

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?

enter image description here

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

enter image description here

YouTube-Video

281
Harsha M V

Ich habe selbst damit gespielt, und der beste Weg, den ich finden konnte, bestand darin, ein FrameLayout zu verwenden und eine benutzerdefinierte HorizontalScrollView (HSV) über das Menü zu legen. Im HSV befinden sich Ihre Anwendungsansichten , aber als erstes untergeordnetes Element gibt es eine transparente Ansicht. Dies bedeutet, dass das Menü durchscheint, wenn der HSV einen Bildlauf-Versatz von Null aufweist (und dennoch überraschenderweise anklickbar ist).

Wenn die App gestartet wird, bewegen wir den HSV zum Versatz der ersten sichtbaren Anwendungsansicht, und wenn wir das Menü anzeigen möchten, bewegen wir uns 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 Aktivität "Starten" zeigen die besten Menüs an, die mir einfallen könnten:

Android-Gleitmenü-Demo

Screenshot vom Emulator (Mid-Scroll):

Screenshot from 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 aufeinander abgestimmt sind.

Screenshot from device (full-scroll)

176
Paul Grime

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 bietet alle gewünschten Animationen und Navigationsmöglichkeiten.

Im Repo finden Sie ein Demo-Projekt, mit dem Sie die lib verwenden können, um eine facebook-ähnliche Navigation zu implementieren. Hier ist ein kurzes Video mit einer 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 Fragment-Transaktionen und benutzerdefinierten Ansichten).

Derzeit besteht das größte Problem darin, die Anwendung so zu gestalten, dass sie sowohl den Hoch- als auch den Querformatmodus unterstützt. Wenn Sie Feedback haben, geben Sie es bitte über github weiter.

Alles Gute,
Alex

37
AlexKorovyansky

Hier ist noch eine lib 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 verschiebt die gesamte Actionbar ähnlich der G + App.

Wie hat Google das geschafft? Slide ActionBar in Android application

24
Patrick

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

enter image description here

22
Sanjay Kumar

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

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

Hier ist der github Projektlink

Hier ist der Google Play Download-Link

20
dwbrito

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

Hier ist ein Bildschirm mit einer Beispielanwendung basierend auf der Bibliothek, die ich geschrieben habe: ActionsContentView Example

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

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 und höher

Es gibt eine Einschränkung:

  • alle horizontalen Bildlaufansichten funktionieren nicht an den Grenzen dieser Ansicht

Viele Grüße, Steven

17
rude

Mit Android Support Package Revision 13 (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 support library

Designmuster der Navigationsschublade

16
Wubao Li

Zusammenfassung einer vorhandenen Implementierung und Umwandlung in ein Bibliotheksprojekt plus Beispiel-App. Außerdem wurde XML-Parsing sowie die automatische Erkennung einer möglicherweise vorhandenen Aktionsleiste hinzugefügt, sodass sie sowohl mit der systemeigenen 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 beschrieben unter Ein Schiebemenü für Android wie Google- und Facebook-Apps . Dank an scirocco für die ursprüngliche Idee und den Code!

SlideMenu on GingerbreadSlideMenu on ICS with ActionBar

15
bk138

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

Schnappschuss:

enter image description here

10
Edward

Ich denke, dass die Bibliothek nicht erwähnt:

jfeinstein1 / SlidingMen

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

  • funktioniert einwandfrei mit der Aktionsleiste ActionBarSherlock , die bei der Abwärtskompatibilität hilft!
  • Unterstützen Sie die rechte Folie und schieben Sie nicht nur per Knopfdruck!
10
madlymad

Ich kann die Antwort von @Paul Grime noch nicht kommentieren, trotzdem habe ich auf seinem Github-Projekt das Update 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 app.layout () ruft auf:

app.clearAnimation();

Hoffe das hilft :)

8
Fatal1ty2787

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 aufräumen 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 die linke Ansicht von einem -X Versatz zur Gerätebreite - was auch immer Sie von der Rechten Ansicht anzeigen möchten

6
Rich

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

enter image description here

enter image description here

4
Mukesh Y

Kürzlich habe ich an meiner Version für die Implementierung von Gleitmenüs 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, und versuchen Sie Folgendes:

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! ;)

3

Ich habe den einfachsten Weg dafür gefunden und es funktioniert. Verwenden Sie die einfache Navigationsleiste und rufen Sie drawer.setdrawerListner () auf und verwenden Sie die mainView.setX () -Methode in der drawerSlide-Methode unten 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) {

        }
    });
 }
}

enter image description here

Dankeschön

3
Dalvinder Singh

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

  1. Die Seitenleiste kann in eine beliebige Position gebracht werden: links, oben, unten, rechts
  2. Sowohl die Hauptansicht als auch die Schiebeansicht können angeklickt werden
  3. Seitenleiste kann teilweise angezeigt werden
  4. Stilistische 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

3
se.solovyev

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

Design und Entwicklung .

2
jai_b

Ich werde hier einige kühne 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, dass dies irgendwelche Probleme mit dem Z-Index in den Ansichten verursacht oder wie sie dies steuern.

2
jlindenbaum

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

1
Gunnar Karlsson

Hinweis: 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.

Die Art und Weise, wie Sie dies tun können, ist: 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 Animation 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 lediglich um eine Liste mit Elementen + einem transparenten Teil rechts von Ihrer Liste. Dieser Teil ist anklickbar und seine Breite entspricht der Breite Ihrer "Verschieben-Schaltfläche". Damit können Sie auf dieses Layout klicken, um die Animation zu starten und das content_layout nach links zu schieben und den gesamten Bildschirm einzunehmen. Für jede Option (d. H. 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 eine Möglichkeit, und ich hoffe, ich bin klar genug.

1
p4u144

Ich habe den erstaunlichen SimonVT/Android-Menüdrawer, der 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 kann links, rechts, oben oder unten angebracht werden. Sehr gut dokumentiert mit Beispielcode und Apache 2.0 Lizenz.

1
lwegener

Android hat die Navigationsleiste hinzugefügt. Verweisen Sie darauf

Link

1
Deepak Goel

Ich habe in den letzten Tagen damit gespielt und mir eine Lösung ausgedacht, die am Ende ziemlich einfach ist und die vor Honeycomb funktioniert. Meine Lösung bestand darin, die Ansicht, die ich verschieben möchte, zu animieren (FrameLayout für mich) und auf das Ende der Animation zu warten (an welchem ​​Punkt die linke/rechte Position der Ansicht versetzt werden soll). Ich habe meine Lösung hier eingefügt: So animieren Sie die Übersetzung einer Ansicht

1
Adil Hussain

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 von Pauls Idee stammt, aber einfacher ist und leicht zu lesen sein sollte.

Implementierung der Seitenmenüleiste mit Java Code ohne XML

1
Chao

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

0
rds