Slajd w stylu Android na Facebooku

Nowa aplikacja na Facebooku i jej nawigacja są takie fajne. Właśnie próbowałem zobaczyć, jak można go emulować w mojej aplikacji.

Czy ktoś ma pojęcie, jak to osiągnąć?

Po kliknięciu lewego górnego przycisku wyświetlany jest slajd strony i wyświetlany jest następujący ekran:

Wideo na YouTube

Sam się z tym bawiłem i najlepszym sposobem, jaki mogłem znaleźć, było użycie FrameLayout i umieszczenie niestandardowego HorizontalScrollView (HSV) na górze menu. Wewnątrz HSV znajdują się widoki aplikacji, ale pierwszy widok jest przezroczysty. Oznacza to, że gdy HSV ma zerowe przesunięcie przewijania, menu wyświetli się (i zaskakująco będzie można je kliknąć).

Gdy aplikacja się uruchamia, przewijamy HSV do przesunięcia pierwszego widocznego widoku aplikacji, a gdy chcemy pokazać menu, przewijamy do tyłu, aby wyświetlić menu poprzez przezroczysty widok.

Kod jest tutaj, a dwa dolne przyciski (o nazwie HorzScrollWithListMenu i HorzScrollWithImageMenu) w działaniu Uruchom pokazują najlepsze menu, jakie mogłem wymyślić:

Wersja demonstracyjna przesuwanego menu Androida

Zrzut ekranu z emulatora (mid-scroll):

Zrzut ekranu z urządzenia (pełne przewijanie). Uwaga: moja ikona nie jest tak szeroka jak ikona menu Facebooka, więc widok menu i widok „aplikacji” nie są wyrównane.

W tym projekcie bibliotecznym wdrożyłem nawigację typu wysuwanego na Facebooku .

Możesz łatwo wbudować go w aplikację, interfejs użytkownika i nawigację. Będziesz musiał wdrożyć tylko jedno Działanie i jeden Fragment, poinformuj bibliotekę o tym - a biblioteka zapewni wszystkie potrzebne animacje i nawigację.

W repozytorium można znaleźć projekt demo z użyciem biblioteki lib do implementacji nawigacji podobnej do Facebooka. Oto krótkie wideo z zapisem projektu demo .

Również ta biblioteka powinna być zgodna z tym wzorem ActionBar, ponieważ jest oparta na transakcjach działań i tłumaczeniach (nie transakcjach fragmentów i niestandardowych widokach).

W tej chwili najbardziej problem polega na tym, aby działał dobrze w aplikacjach, które obsługują zarówno tryb pionowy, jak i poziomy. Jeśli masz jakieś uwagi, prześlij je za pośrednictwem github.

Wszystkiego najlepszego,
Alex

Oto kolejna lib i moim zdaniem wydaje się najlepsza. Nie napisałem tego ...

AKTUALIZACJA:

Wydaje mi się, że ten kod działa najlepiej i przesuwa cały pasek działań podobnie do aplikacji G +.

Jak Google to zrobił? Przesuń ActionBar w aplikacji na Androida

Myślę, że aplikacja Facebook nie jest napisana w natywnym kodzie (mam na myśli kod natywny, używając układów w Androidzie), ale wykorzystali do tego webview i użyli bibliotek javascript ui, takich jak sencha . Można to łatwo osiągnąć za pomocą frameworka Sencha.

Oto kolejna (bardzo ładna) biblioteka open source!

Zaletą tego jest to, że można go łatwo zintegrować z ActionBarSherlock.

Oto link do projektu github

Oto link do pobrania Google Play

Właśnie wdrożyłem podobny widok dla mojego własnego projektu. Możesz to sprawdzić tutaj

Oto ekran przykładowej aplikacji opartej na bibliotece, którą napisałem:

Łatwo jest używać tego niestandardowego widoku jako elementu układu XML. Oto przykład:

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

Mam pytania dotyczące korzystania z biblioteki ActionsContentView. Mogę napisać mały artykuł na stronie Wiki projektów.

Niektóre zalety tej biblioteki:

• możliwość przesuwania widoku dotykiem
• łatwo dostosować rozmiar paska akcji w XML
• obsługa wszystkich wersji Androida SDK od 2.0

Jest jedno ograniczenie:

• wszystkie poziome przewijane widoki nie będą działać na granicach tego widoku

Z pozdrowieniami, Steven

W wersji 13 pakietu pomocy Android (maj 2013 r.) Dostępny jest moduł DrawerLayout służący do tworzenia szuflady nawigacji, którą można wyciągnąć z krawędzi okna. A szuflada nawigacji jest teraz wzorem.

biblioteka obsługi v4

wzór szuflady nawigacji

Dokonano podsumowania istniejącej implementacji i przekształcił ją w projekt biblioteczny plus przykładową aplikację. Dodano także parsowanie XML, a także automatyczne wykrywanie potencjalnie obecnego paska akcji, więc działa on zarówno z natywnym, jak i pomocniczym paskiem akcji, takim jak ActionBarSherlock.

Ten również przesuwa pasek akcji!

Całość stanowi projekt biblioteki wraz z przykładową aplikacją i jest opisany w przesuwanym menu dla Androida, takim jak aplikacje Google i Facebook . Dzięki scirocco za wstępny pomysł i kod!

Jest to proste i eleganckie: https://github.com/akotoe/android-slide-out-menu.git

Migawka:

Myślę, że biblioteka nie wspomina:

jfeinstein10 / SlidingMenu

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

• działa dobrze z paskiem akcji ActionBarSherlock, który pomaga w kompatybilności wstecznej !
• Obsługa prawego slajdu i nie tylko przesuwanie za pomocą przycisku!

Nie mogę jeszcze skomentować odpowiedzi udzielonej przez @Paul Grime, w każdym razie przesłałem do jego projektu github poprawkę dotyczącą problemu migotania ...

Zamieszczę poprawkę tutaj, może ktoś jej potrzebuje. Musisz tylko dodać dwa wiersze kodu. Pierwszy poniżej wywołania anim.setAnimationListener:

anim.setFillAfter(true);

A drugi po wywołaniu app.layout ():

app.clearAnimation();

Mam nadzieję że to pomoże :)

Zaimplementowałem to za pomocą AbsoluteLayout i prostego kontrolera slajdów, który przesuwa widok do ujemnego przesunięcia, aby go ukryć.

Jeśli ktoś jest zainteresowany, mogę wyczyścić kod / układ i opublikować. Wiem, że AbsoluteLayout jest przestarzałe, ale było to bardzo proste wdrożenie. Widok z lewej / Widok z prawej, a kiedy „przesuwasz się”, po prostu przenieś widok z lewej strony z przesunięcia -X do szerokości urządzenia - cokolwiek chcesz pokazać w widoku z prawej

Witaj, to najlepsza przykładowa aplikacja demonstracyjna, która udostępnia menu na Facebooku, jak menu slajdów. Sprawdź kod tutaj

W ramach mojej wspólnej biblioteki Androida (ACL) zaimplementowałem własny pasek boczny. Główne zalety:

1. Pasek boczny można ustawić w dowolnej pozycji: lewej, górnej, dolnej, prawej
2. Zarówno widok główny, jak i widok przesuwany są klikalne
3. Pasek boczny może być częściowo pokazany
4. Umieszczalne atrybuty dla SideBar ułatwiają zmianę jego stylu
5. Artefakt w repozytorium maven
6. Część dużej biblioteki

Kod źródłowy: https://github.com/serso/android-common/tree/master/views/src/main/java/org/solovyev/android/view/sidebar

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

Ostatnio pracowałem nad wersją implementacji przesuwanego menu. Wykorzystuje popularną bibliotekę Androida J.Feinsteina SlidingMenu.

Sprawdź kod źródłowy na GitHub:

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

Pobierz aplikację bezpośrednio na urządzenie, aby spróbować:

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

Kod powinien być zrozumiały z uwagi na komentarze. Mam nadzieję, że będzie to pomocne! ;)

Znalazłem najprostszy sposób na to i jego działanie. Użyj prostej szuflady nawigacji i wywołaj drawer.setdrawerListner () i użyj metody mainView.setX () w metodzie drawerSlide poniżej lub skopiuj mój kod.

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

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

        }
    });
 }
}

Dziękuję Ci

Zrobię tu odważne domysły ...

Zakładam, że mają układ, który reprezentuje niewidoczne menu. Po naciśnięciu przycisku menu animują układ / widok na górze, aby odsunąć się na bok i po prostu włączyć widoczność układu menu. Nie myślałem o tym, że powoduje to jakiekolwiek problemy z indeksem Z w widokach ani o tym, jak to kontrolują.

Android dodał szufladę nawigacji. Zobacz to

połączyć

Oto przewodnik po projektowaniu i rozwoju znajdujący się w oficjalnej dokumentacji Androida, bez potrzeby dodawania nieoficjalnej biblioteki zewnętrznej. Zrobi to tylko biblioteka wsparcia Androida. Znajdź linki tutaj.

zaprojektuj i opracuj .

Aplikacja Facebook na Androida jest prawdopodobnie zbudowana z Fragmentów . Menu to jeden fragment, a dogłębna aktywność (kanał informacyjny / wydarzenia / przyjaciele itp.) To drugi fragment. Zasadniczo układ „wzorcowy i szczegółowy” tabletu na telefonie.

Aby uzyskać informacje, ponieważ biblioteka kompatybilności zaczyna się od 1.6, a ta aplikacja Facebook działa również na urządzeniach z Androidem 1.5, nie można tego zrobić z Fragmentami.

Możesz to zrobić w następujący sposób: Utwórz działanie „podstawowe” BaseMenuActivity, w którym umieścisz całą logikę dla elementu onItemClickListener dla listy menu i zdefiniujesz 2 animacje („otwieranie” i „zamykanie”). Na końcu / na początku animacji pokazujesz / ukrywasz układ BaseMenuActivity (nazwijmy to menu_layout). Układ tego działania jest prosty, jest to tylko lista z elementami + przezroczysta część po prawej stronie listy. Ta część będzie klikalna, a jej szerokość będzie taka sama jak „przycisk przesuwania”. Dzięki temu będziesz mógł kliknąć ten układ, aby rozpocząć animację, aby przesuwać content_layout w lewo i zajmować cały ekran. Dla każdej opcji (tj. Pozycji z listy menu) tworzysz „ContentActivity”, który rozszerza BaseMenuActivity. Następnie, po kliknięciu elementu na liście, uruchamiasz swój ItemSelectedContentActivity z widocznym menu (które zamkniesz, gdy tylko rozpocznie się aktywność). Układy dla każdej ContentActivity są FrameLayout i obejmują znaki i. Wystarczy przesunąć content_layout i wyświetlić menu_layout, kiedy chcesz.

To sposób na zrobienie tego i mam nadzieję, że byłem wystarczająco jasny.

Bawiłem się tym przez ostatnie kilka dni i wymyśliłem rozwiązanie, które w końcu jest dość proste i które działa przed Honeycomb. Moim rozwiązaniem było animowanie widoku, który chcę przesunąć ( FrameLayoutdla mnie) i nasłuchiwanie końca animacji (w tym momencie, aby przesunąć lewą / prawą pozycję widoku). Wkleiłem tutaj moje rozwiązanie: Jak animować tłumaczenie widoku

Po kilku godzinach poszukiwań odkryłem, że rozwiązanie Paula Grime'a jest prawdopodobnie najlepsze. Ale ma za dużo funkcjonalności. Dlatego może być trudno uczyć się dla początkujących. Chciałbym więc przedstawić moją implementację, która pochodzi z pomysłu Paula, ale jest prostsza i powinna być łatwa do odczytania.

implementacja bocznego paska menu przy użyciu kodu Java bez XML

Nigdzie w powyższych odpowiedziach nie widziałem niesamowitej aplikacji SimonVT / android-menudrawer. Oto link

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

Jest bardzo łatwy w użyciu i można go umieścić po lewej, prawej, górze lub na dole. Bardzo dobrze udokumentowany przykładowym kodem i licencją Apache 2.0.

W czerwcu 2012 r. Google dodało „szablony” we wtyczce Eclipse ADT i istnieje szablon o nazwie „przepływ główny / szczegółowy”, który robi dokładnie to (na podstawie fragmetów)