Slide Android in stile Facebook


283

La nuova applicazione di Facebook e la sua navigazione sono fantastici. Stavo solo cercando di vedere come può essere emulato nella mia applicazione.

Qualcuno ha la minima idea di come possa essere raggiunto?

inserisci qui la descrizione dell'immagine

Facendo clic sul pulsante in alto a sinistra viene visualizzata la diapositiva della pagina e viene visualizzata la seguente schermata:

inserisci qui la descrizione dell'immagine

Video Youtube


2
sì, anche un video sarà utile per conoscere l'effetto esatto.
bool.dev,

@ bool.dev ecco il video: youtube.com/watch?v=ANLMaL7zn20
Harsha MV

@HarshaMV: - Prova a cercare questa discussione. Penso che possa aiutarti in qualche modo. stackoverflow.com/questions/8453320/…
Shashank_Itmaster

3
Ottimo articolo sulla navigazione slide-out in Android - androiduipatterns.com/2012/06/… . Devi leggere.
AlexKorovyansky,

Ho implementato il mio menu scorrevole, vedi qui stackoverflow.com/a/15880375/1939564
Muhammad Babar

Risposte:


176

Ho giocato con questo da solo, e il modo migliore che ho trovato è stato usare un FrameLayout e posizionare un HorizontalScrollView personalizzato (HSV) in cima al menu. All'interno dell'HSV ci sono le viste dell'applicazione, ma c'è una vista trasparente come primo figlio. Ciò significa che quando l'HSV ha un offset di scorrimento pari a zero, il menu verrà visualizzato (e sarà comunque sorprendentemente cliccabile).

All'avvio dell'app, facciamo scorrere l'HSV fino all'offset della prima vista applicazione visibile e quando vogliamo mostrare il menu, scorriamo indietro per rivelare il menu attraverso la vista trasparente.

Il codice è qui e i due pulsanti in basso (chiamati HorzScrollWithListMenu e HorzScrollWithImageMenu) nell'attività Launch mostrano i migliori menu che ho potuto trovare:

Demo del menu scorrevole Android

Screenshot dall'emulatore (mid-scroll):

Schermata dall'emulatore (mid-scroll)

Schermata dal dispositivo (scorrimento completo). Nota che la mia icona non è larga come l'icona del menu Facebook, quindi la vista menu e la vista 'app' non sono allineate.

Schermata dal dispositivo (scorrimento completo)


1
@AmokraneChentir È possibile utilizzare diverse attività chiamando getDrawingCache()le attività non di menu e creando un ImageView dalla bitmap. Quindi chiama startActivity(intent)e overridePendingTransition(0, 0)al onClickmetodo della ClickListenerForScrollingclasse per mostrare immediatamente la nuova attività e ottenere l'effetto desiderato.
Siklab.ph,

1
Mi chiedo se il HorizontalScrollView personalizzato può essere utilizzato con ListView poiché il documento ufficiale di HorizontalScrollView ha indicato che forzerà ListView a visualizzare i suoi interi elementi.
shiami,

1
questo fork commuta le attività senza usare frammenti!
Erik B,

1
Grazie per il tuo aiuto, sono stato in grado di utilizzare HorzScrollWithListMenu.java.
KarenAnne,

2
Grazie mille @PaulGrime ... questo è un ottimo esempio semplice e la cosa più fantastica è in questa demo semplice, facile da capire e facilmente personalizzabile e non esiste un progetto di libreria da usare.
Naveen Kumar il

37

Ho implementato la navigazione slideout simile a Facebook in questo progetto di biblioteca .

Puoi facilmente incorporarlo nell'applicazione, nell'interfaccia utente e nella navigazione. Dovrai implementare solo un'attività e un frammento, farne sapere alla biblioteca - e la biblioteca fornirà tutte le animazioni e la navigazione desiderate.

All'interno del repository puoi trovare un progetto dimostrativo, con come utilizzare la lib per implementare la navigazione simile a Facebook. Ecco un breve video con la registrazione del progetto demo .

Anche questa lib dovrebbe essere compatibile con questo modello di ActionBar, perché si basa su transazioni Activity e TranslateAnimations (non transazioni di frammenti e visualizzazioni personalizzate).

In questo momento, il problema maggiore è farlo funzionare bene per l'applicazione, che supporta sia la modalità verticale che orizzontale. Se hai qualche feedback, ti ​​preghiamo di inviarlo tramite github.

Ti auguro il meglio,
Alex


4
Ciao, ho appena capito che il tuo approccio creerà una grande bitmap di screenshot ogni volta che apri la barra laterale. Aumenterà la dimensione dell'heap e potrebbe causare un errore di memoria insufficiente.
shiami,

3
Grazie caro korovyansk, è molto bello. ma il layout assoluto è obsoleto nei nuovi sistemi operativi. Puoi ricodificarlo di nuovo?
Hesam,

Grazie a tutti coloro che hanno dato un feedback su Github o qui. Conosco alcuni bug e ho idee su come migliorare l'app. Lo faccio, quando avrò tempo libero.
AlexKorovyansky,

Ciao Koroyansk. Sto usando la tua libreria che funziona bene. Ma ho un piccolo problema. Quando si apre l'elenco della barra di scorrimento, sto iniziando l'attività facendo clic sull'elemento dell'elenco. L'attività inizia correttamente ma l'animazione dello slide-in non funziona. Codice((MenuActivity) getActivity()).getSlideoutHelper().close(); startActivity(new Intent(getActivity(), MyActivity.class) .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP).putExtra("category", position));
Sunny

nel tuo caso, la nuova attività si aprirà immediatamente senza attendere la fine dell'animazione, puoi provare ad estendere la libreria e aggiungere la richiamata per la fine dell'animazione. forse aggiungerò questa funzione alla prossima versione della libreria.
AlexKorovyansky il

24

Eccone un altro lib e sembra essere la migliore secondo me. Non l'ho scritto ..

AGGIORNARE:

Questo codice sembra funzionare meglio per me e sposta l'intera Actionbar in modo simile all'app G +.

Come è riuscito Google a farlo? Fai scorrere ActionBar nell'applicazione Android


7
Ho scritto questa biblioteca, felice che ti piaccia. Per ora è molto semplice, ma lo migliorerò nelle prossime settimane. Più che benvenuta anche per altre persone di apportare modifiche.
David Scott,

Questa libreria è assolutamente meravigliosa. È così semplice da usare e funziona perfettamente. Grazie. Vorrei solo aggiungere che l'esempio funziona solo con ICS (e credo a nido d'ape) .. ma la libreria funziona fino alla 2.1, non lo sto usando.
Steven Elliott,

Non male, è piuttosto semplice ma funziona bene e l'installazione è molto rapida. Tuttavia, non è molto configurabile dall'esterno della libreria: tutti gli elementi hanno lo stesso layout semplice e in movimento non è possibile un elenco dinamico; entrambe le cose sarebbero facili da adattare, ma ho davvero bisogno di raggrupparle all'interno della lista e non sarà così facile.
htafoya,

22

Penso che l'app di Facebook non sia scritta in codice nativo (per codice nativo intendo, usando layout in Android) ma hanno usato webview per esso e hanno usato alcune librerie dell'interfaccia utente javascript come Sencha . Può essere facilmente raggiunto usando il framework sencha.

inserisci qui la descrizione dell'immagine


16
+1 L'interfaccia utente può essere modificata senza l'aggiornamento dell'app, quindi è sicuramente un'app Web e l'app Android è fondamentalmente un browser web.
Rudy,

7
Non sono sicuro che sia necessariamente così. Lo scheletro per l'interfaccia utente può essere nativo (ad esempio il menu Visualizza reale e altre viste native) e il contenuto di tali viste caricato dinamicamente. Se lo scheletro dell'app cambia, è probabile che sia richiesto un aggiornamento.
Paul Grime,

2
Non penso che l'app di Facebook sia una webapp. Troppo fluente, veloce. Conosco app web / ibride che sembrano buone "come native", ma c'è ancora un po 'di ritardo rispetto alle native. Non solo lo scheletro: gli elenchi, la mappa, ecc. Sembrano nativi. Almeno con lo stato attuale della tecnologia.
Ixx,

Ok, qualcuno mi ha detto che questa app non era così per circa 2 mesi - quindi ti riferisci a una vecchia versione che non conosco. Ad ogni modo potrebbe essere informativo commentare che l'app corrente è decisamente nativa.
Ixx,

20

Ecco un'altra libreria (molto bella) open source!

La buona caratteristica di questo è che è facilmente integrabile con ActionBarSherlock.

Ecco il link al progetto github

Ecco il link per il download di Google Play


2
penso che questo sia il migliore
Harsha MV

17

Ho appena implementato una visione simile per il mio progetto. Puoi verificarlo qui

Ecco la schermata dell'applicazione di esempio basata sulla libreria che ho scritto: Esempio di ActionsContentView

È facile usare questa vista personalizzata come elemento del layout XML. Ecco un esempio:

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

Se avessi domande sull'uso della libreria ActionsContentView, posso scrivere un piccolo articolo su Wiki dei progetti.

Alcuni vantaggi di questa libreria:

  • possibilità di scorrere la vista al tocco
  • è facile regolare la dimensione della barra delle azioni in XML
  • supporto di tutte le versioni di Android SDK a partire dalla 2.0 in poi

C'è una limitazione:

  • tutte le viste a scorrimento orizzontale non funzioneranno ai limiti di questa vista

Cordiali saluti, Steven


come impostare l'interfaccia utente come la tua foto di caricamento? lo provo prima che l'interfaccia utente sia webView sullo schermo. spero che listview sia mostrato all'avvio dell'app. attraverso la tua lib è la 2.0, ma la tua demo è la 4.0, spero che tu possa anche usare la 2.0. che è bello
pengwang

@pengwang: ho appena spinto del codice per supportare questa funzione. Puoi farlo mentre Activity.onResume () chiamando viewActionsContentView.showActions ();
maleducato

È possibile disabilitare gli eventi touch sulla parte nascosta? Ad esempio, quando la parte destra è attiva, tutte le viste a destra sono disabilitate.
Valeriy,

Vi è la possibilità di bloccare il layout del contenuto mentre è mostrata l'azione 1. Ti ho inviato per email un progetto di esempio.
maleducato

16

Con la revisione del pacchetto di supporto Android 13 (maggio 2013), c'è DrawerLayout per la creazione di un cassetto di navigazione che può essere estratto dal bordo di una finestra. E ora il cassetto di navigazione è un modello di progettazione.

libreria di supporto v4

modello di progettazione del cassetto di navigazione


2
Sì, il livello minimo di API supportato è 4.
Wubao Li,

1
E la libreria di compatibilità ti consente di usarla su dispositivi meno recenti. Ne ho appena sviluppato uno per Gingerbread e versioni successive.
Tony Maro,

2
Questo deve essere più in alto. Troppe librerie di terze parti estranee nelle altre risposte.
Jason Axelson,

15

Ha eseguito una carrellata di un'implementazione esistente e l'ha trasformata in un progetto di libreria più un'app di esempio. Inoltre, sono stati aggiunti l'analisi XML e il rilevamento automatico di una barra delle azioni eventualmente presente, quindi funziona con la barra delle azioni nativa e di supporto come ActionBarSherlock.

Questo fa anche scivolare via la barra delle azioni!

Il tutto è un progetto di biblioteca insieme a un'app di esempio ed è descritto in Un menu scorrevole per Android come app di Google e Facebook . Grazie a Scirocco per l'idea iniziale e il codice!

SlideMenu on Gingerbread SlideMenu su ICS con ActionBar


10

Questo è semplice ed elegante: https://github.com/akotoe/android-slide-out-menu.git

Istantanea:

inserisci qui la descrizione dell'immagine


Mi potete aiutare?? Domanda relativa a scorrimento .. Ecco il link stackoverflow.com/questions/14500927/...
moDev

ti fa scivolare toccando? (scorri media)
alicanbatur,

@Edward Ho lavorato con il tuo campione, penso che sia fantastico e facile da usare ma ho riscontrato un problema durante la rotazione dello schermo (sto usando Android: configChanges = "orientamento" nel manifest con Android 3.1 perché non vuoi che l'attività venga riavviata) lo schermo ruota bene ma il framelayout mantiene le sue dimensioni e non ha un bell'aspetto, hai un modo per aggirare questo? Ho provato di tutto ma non riesco a risolverlo. grazie
zvzej,

@Edward ecco la mia domanda usando il tuo campione, per favore aiutami o dammi qualche consiglio grazie. stackoverflow.com/questions/16778911/...
zvzej


8

Non posso ancora commentare la risposta data da @Paul Grime, comunque ho presentato sul suo progetto github la soluzione per il problema dello sfarfallio ...

Pubblicherò la correzione qui, forse qualcuno ne ha bisogno. Devi solo aggiungere due righe di codice. Il primo sotto la chiamata anim.setAnimationListener:

anim.setFillAfter(true);

E il secondo dopo app.layout () chiama:

app.clearAnimation();

Spero che questo ti aiuti :)


6

Ho implementato questo con AbsoluteLayout e un semplice controller per diapositive che sposta la vista su un offset negativo per nasconderlo.

Se qualcuno è interessato, posso ripulire il codice / layout e pubblicare. So che AbsoluteLayout è obsoleto, ma è stata un'implementazione molto semplice. Vista sinistra / Vista destra, e quando "si apre", basta spostare la vista sinistra da un offset -X alla larghezza del dispositivo - qualunque cosa tu voglia mostrare della vista destra


Ti ringrazio se riesci a farlo senza AbsoluteLayout! Grazie!
Igor,

4

Ciao, questa è la migliore app demo di esempio che fornisce Facebook come il menu a scorrimento. Controlla qui il codice

inserisci qui la descrizione dell'immagine

inserisci qui la descrizione dell'immagine


3

Come parte del mio Android Common Library (ACL) ho implementato il proprio SideBar. Vantaggi principali:

  1. La barra laterale può essere impostata in qualsiasi posizione: sinistra, superiore, inferiore, destra
  2. È possibile fare clic sia sulla vista principale che su quella scorrevole
  3. La barra laterale può essere parzialmente mostrata
  4. Gli attributi stylable per SideBar facilitano il cambio di stile
  5. Manufatto in repo di maven
  6. Parte di una grande biblioteca

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

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


3

Di recente ho lavorato sulla mia versione di implementazione del menu scorrevole. Utilizza la popolare libreria Android J.Feinstein SlidingMenu.

Si prega di controllare il codice sorgente su GitHub:

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

Scarica l'app direttamente sul dispositivo per provare:

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

Il codice dovrebbe essere autoesplicativo a causa di commenti. Spero possa essere utile! ;)


3

Ho trovato il modo più semplice per farlo funzionare. Usa un semplice cassetto di navigazione e chiama drawer.setdrawerListner () e usa il metodo mainView.setX () nel metodo drawerSlide di seguito o copia il mio codice.

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

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

        }
    });
 }
}

inserisci qui la descrizione dell'immagine

Grazie


2

Ho intenzione di fare alcune ipotesi audaci qui ...

Presumo che abbiano un layout che rappresenta il menu che non è visibile. Quando si tocca il pulsante del menu, animano il layout / vista in alto per spostarsi e consentono semplicemente la visibilità del layout del menu. Non ho pensato che ciò causasse problemi di z-index nelle viste o come lo controllassero.


se hai utilizzato l'app .. puoi effettivamente vedere che il layout scorre verso destra lasciando spazio alla sezione menu. proverò a fare un video e a caricarlo.
Harsha MV,

1
Uso la versione per iPhone, se la versione per Android è la stessa, quindi dubito che sia molto diversa da quella che ho descritto. Non ho scritto molte animazioni su Android, quindi non potrei dirti come appare il codice di animazione, ma in parole povere, presumo sia quello che ho descritto.
jlindenbaum,

grazie, youtube.com/watch?v=ANLMaL7zn20 è lo stesso effetto su iPhone.
Harsha MV,


2

Ecco la guida alla progettazione e allo sviluppo che si trova nella documentazione ufficiale di Android non è necessario aggiungere una libreria esterna non ufficiale. Solo la libreria di supporto Android farà. Trova i link qui.

progettare e sviluppare .


1

L'app per Android di Facebook è probabilmente costruita con Fragments . Il menu è un frammento, l'attività di approfondimento (Newsfeed / Eventi / Amici ecc.) È l'altro frammento. Fondamentalmente un layout "master & detail" su un telefono.


In questo caso dobbiamo creare una barra di azione all'interno di un frammento, quindi non possiamo usare alcuna funzionalità del framework Android per costruirlo, giusto? In realtà non posso essere sicuro di Facebook, ma per molti sviluppatori è un modo troppo difficile per creare la barra di azione senza l'aiuto del framework, spero che questa volta sia già finita.
AlexKorovyansky il

1

Per informazioni, poiché la libreria di compatibilità inizia con 1.6 e questa app di Facebook è in esecuzione anche su dispositivi con Android 1.5, non è stato possibile farlo con Fragments.

Il modo in cui potresti farlo è: Creare un'attività "base" BaseMenuActivity in cui metti tutta la logica per onItemClickListener per il tuo elenco di menu e definisce l'animazione 2 ("apri" e "chiudi"). Alla fine / inizio delle animazioni, mostri / nascondi il layout di BaseMenuActivity (chiamiamolo menu_layout). Il layout per questa attività è semplice, è solo un elenco con elementi + una parte trasparente a destra dell'elenco. Questa parte sarà selezionabile e la sua larghezza avrà la stessa larghezza del "pulsante di spostamento". Con ciò, sarai in grado di fare clic su questo layout per avviare l'animazione per consentire a content_layout di scorrere verso sinistra e prendere l'intero schermo. Per ciascuna opzione (ovvero voce dell'elenco di menu), si crea un "ContentActivity" che estende BaseMenuActivity. Quindi, quando fai clic su un elemento dell'elenco, avvii ItemSelectedContentActivity con il menu visibile (che chiuderai non appena inizia l'attività). I layout per ciascun ContentActivity sono FrameLayout e includono il e. Devi solo spostare content_layout e rendere visibile menu_layout quando vuoi.

È un modo per farlo e spero di essere stato abbastanza chiaro.


1

Ci ho giocato nei giorni scorsi e ho trovato una soluzione che è abbastanza semplice alla fine e che funziona pre-Honeycomb. La mia soluzione era quella di animare la Vista che voglio far scorrere ( FrameLayoutper me) e di ascoltare la fine dell'animazione (a quel punto per compensare la posizione sinistra / destra della Vista). Ho incollato la mia soluzione qui: Come animare la traduzione di una vista



1

Non ho visto l'incredibile SimonVT / android-menudrawer menzionato da nessuna parte nelle risposte sopra. Quindi ecco un link

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

È super facile da usare e puoi metterlo a sinistra, a destra, in alto o in basso. Molto ben documentato con codice di esempio e licenza Apache 2.0.


0

Nel giugno 2012, Google ha aggiunto "modelli" nel plug-in ADT Eclipse e esiste un modello chiamato "flusso master / dettaglio" che fa esattamente questo (basato su fragmets)


1
Il flusso principale / di dettaglio non è un menu della barra laterale in questione. Sono solo due frammenti visualizzati insieme (tablet) o separatamente (telefono).
Tomash,

Bene, a giugno 2013, è stato aggiunto il layout del cassetto di navigazione, che è ciò che è più simile a ciò che serve qui, ma l'ActionBar non scorrerà con il cassetto come qui serve la barra di scorrimento in stile Facebook.
Khulja Sim Sim,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.