Widziałem w nowej specyfikacji materiału Side Nav , że możesz wyświetlać szufladę nad paskiem akcji i za paskiem stanu. Jak mogę to zaimplementować?
android
navigation-drawer
android-appcompat
Chris Banes
źródło
źródło
Odpowiedzi:
Nowe funkcje w ramach i biblioteki wsparcia pozwalają na to dokładnie. Istnieją trzy „elementy układanki”:
fitsSystemWindows
tak, aby układała się za paskami systemowymi.Theme.Material
normalnego kolorowania paska stanu, aby DrawerLayout mógł tam rysować.Zakładam, że będziesz używać nowego appcompat.
Po pierwsze, twój układ powinien wyglądać następująco:
Następnie w swojej aktywności / fragmencie:
Następnie upewnij się, że DrawerLayout jest widoczny za paskiem stanu. Robisz to, zmieniając motyw wartości v21:
wartości-v21 / themes.xml
Uwaga: Jeśli
<fragment android:name="fragments.NavigationDrawerFragment">
zamiastrzeczywisty układ, pożądany efekt zostanie osiągnięty, jeśli wywołasz
fitsSystemWindows(boolean)
widok, który powrócisz zonCreateView
metody.źródło
DrawerLayout
należy go rozłożyć za paskami systemowymi. Następnie należy ustawić go w widoku szuflady, abyDrawerLayout
układał się w wstawkach okien.layout_marginTop
w katalogu głównym układu zawartości szuflady. W przeciwnym razie tło układu zawartości szuflady zostanie narysowane na pasku stanu, a wszystko inne zostanie przesunięte w dół. Wydaje się to jednak dość rażącym rozwiązaniem, o ile wiem, że nie ma? Attr / statusBarSize ani niczego takiego dostarczonego przez Androida.EDYCJA: Nowa biblioteka wsparcia projektowania obsługuje to, a poprzednia metoda nie jest już wymagana.
Można to teraz osiągnąć za pomocą nowej biblioteki wsparcia projektowania systemu Android .
Możesz zobaczyć przykładową aplikację Cheesesquare autorstwa Chrisa Banesa, która demonstruje wszystkie nowe funkcje.
Poprzednia metoda:
Ponieważ nie ma opublikowanego kompletnego rozwiązania, oto sposób, w jaki osiągnąłem pożądany rezultat.
Najpierw dołącz ScrimInsetsFrameLayout do swojego projektu.
Następnie utwórz stylowy, aby
insetForeground
można go było ustawić.wartości / attrs.xml
Zaktualizuj plik xml swojej aktywności i upewnij się, że
android:fitsSystemWindows
jest ustawiony na true zarówno w,DrawerLayout
jak i w plikuScrimInsetsFrameLayout
.layout / activity_main.xml
Wewnątrz metody onCreate swojej aktywności ustaw kolor tła paska stanu na układzie szuflady.
MainActivity.java
Na koniec zaktualizuj motyw aplikacji, tak aby
DrawerLayout
znajdował się za paskiem stanu.wartości-v21 / styles.xml
Wynik:
źródło
Wraz z wydaniem najnowszej Biblioteki pomocy technicznej dla systemu Android (wersja 22.2.0) mamy bibliotekę Design Design Library, aw ramach tego nowego widoku o nazwie NavigationView . Zamiast więc robić wszystko na własną rękę z
ScrimInsetsFrameLayout
innymi rzeczami, po prostu używamy tego widoku i wszystko jest zrobione za nas.Przykład
Krok 1
Dodaj
Design Support Library
do swojegobuild.gradle
plikuKrok 2
Dodaj
NavigationView
doDrawerLayout
:Krok 3
Utwórz nowy zasób menu
/res/menu
i dodaj elementy i ikony, które chcesz wyświetlić:Krok 4
Zainicjuj NavigationView i obsługuj zdarzenia kliknięcia:
Krok 5
Należy ustawić
android:windowDrawsSystemBarBackgrounds
iandroid:statusBarColor
wvalues-v21
przeciwnym razie szuflady won `t być wyświetlane„pod”StatusBarKrok opcjonalny
Dodaj nagłówek do NavigationView. W tym celu po prostu utwórz nowy układ i dodaj
app:headerLayout="@layout/my_header_layout"
do NavigationView.Wynik
Notatki
colorPrimary
atrybuttextColorPrimary
atrybututextColorSecondary
atrybutMożesz także sprawdzić przykładową aplikację autorstwa Chrisa Banesa, która wyróżnia NavigationView wraz z innymi nowymi widokami, które są częścią Biblioteki wsparcia projektowania (np. FloatingActionButton , TextInputLayout , Snackbar , TabLayout itp.)
źródło
<item name="itemTextColor">@color/YOUR_COLOR</item>
<item name="itemIconTint">@color/YOUR_COLOR</item>
Toolbar
- nie da się tego zrobić zActionBar
mDrawerLayout.openDrawer(GravityCompat.START);
gdziekolwiek chcesz. Jeśli używasz,ActionBarDrawerToggle
należy to zrobić automatycznie, jak tylko klikniesz ikonę hamburgera.Spraw, by działało, w stylach value-v21 lub formacie xml należy użyć tego atrybutu:
<item name="android:windowTranslucentStatus">true</item>
To czyni magię!
źródło
Wszystkie powyższe podejścia są prawidłowe i mogą działać. Utworzyłem działającą wersję demo, postępując zgodnie z powyższym przewodnikiem i przetestowałem na wersji 2.x do 5.x
Możesz sklonować z Github
Ważną rzeczą do zabawy jest aktywność główna
i oddzwonienie
Absolutnie temat dla V21 działa magicznie
i ScrimInsetsFrameLayout
Teraz jest to łatwiejsze dzięki nowej bibliotece Design Support
klon z @Chris Banes https://github.com/chrisbanes/cheesesquare
źródło
Wszystkie wymienione tutaj odpowiedzi są zbyt stare i długie. Najlepsze i krótkie rozwiązanie, które działa z najnowszym widokiem nawigacji
spowoduje to zmianę koloru paska stanu na przezroczysty po otwarciu szuflady
Teraz, kiedy zamkniesz szufladę, musisz ponownie zmienić kolor paska stanu na ciemny, więc możesz to zrobić w ten sposób.
a następnie w głównym układzie dodaj jedną linię tj
a Twój układ szuflady będzie wyglądał
i będzie wyglądał widok nawigacji
Przetestowałem to i działa w pełni. Mam nadzieję, że to komuś pomaga. To może nie być najlepsze podejście, ale działa płynnie i jest łatwe do wdrożenia. Zaznacz, jeśli to pomoże. Szczęśliwe kodowanie :)
źródło
Korzystam z biblioteki wsparcia projektowania. I właśnie za pomocą niestandardowego motywu uzyskałem przezroczysty pasek stanu po otwarciu szuflady nawigacji.
Na koniec dodaj motyw w pliku manifestu
Nie zapomnij użyć właściwości
android:fitsSystemWindows="true"
w „DrawerLayout”źródło
To jest najprostsze i działało dla mnie:
W wartościach-21:
W wartościach:
I ustaw na pasku narzędzi
źródło
24dp
górnej marży.Zamiast używać
ScrimInsetsFrameLayout
... Czy nie jest łatwiej po prostu dodać widok o stałej wysokości24dp
i tleprimaryColor
?Rozumiem, że wymaga to dodania fałszywego widoku w hierarchii, ale wydaje mi się, że jest czystszy.
Już próbowałem i działa dobrze.
źródło
Spróbuj tego:
styl:
Główne działanie rozszerza ActionBarActivity
Teraz możesz
onCreateOptionsMenu
polubić jak zwykle ActionBar z ToolBar.To jest mój układ
Mam nadzieję, że rozumiesz! Baw się dobrze!
źródło