Slide Android in stile Facebook

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?

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

Video Youtube

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

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

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

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.

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

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:

È 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

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

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!

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

Istantanea:

Penso che la biblioteca non menziona:

jfeinstein10 / SlidingMenu

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

• funziona bene con la barra delle azioni ActionBarSherlock che aiuta nella retrocompatibilità !
• Supporta la diapositiva destra e non solo quella scorrevole tramite il pulsante!

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

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

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

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

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

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

        }
    });
 }
}

Grazie

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.

Android ha aggiunto il riquadro di navigazione. Riferiscilo

collegamento

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 .

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.

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.

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

Dopo una ricerca di diverse ore, ho scoperto che la soluzione di Paul Grime è probabilmente la migliore. Ma ha troppe funzionalità al suo interno. Quindi potrebbe essere difficile studiare per i principianti. Quindi vorrei fornire la mia implementazione che deriva dall'idea di Paul, ma è più semplice e dovrebbe essere di facile lettura.

implementazione della barra dei menu laterali utilizzando il codice java senza XML

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.

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)