403 Stimmen

Wie verwende ich DrawerLayout, um über die ActionBar/Toolbar und unter der Statusleiste anzuzeigen?

Ich habe im neuen Material Design Side Nav Spec gesehen, dass du die Schublade über die Aktionsleiste und hinter der Statusleiste anzeigen kannst. Wie kann ich das umsetzen?

534voto

Chris Banes Punkte 31643

Die neue Funktionalität im Framework und in den Support-Bibliotheken ermöglicht genau das. Es gibt drei 'Puzzlestücke':

  1. Verwenden von Toolbar, damit Sie Ihre Aktionsleiste in Ihre Ansichtshierarchie einbetten können.
  2. Machen Sie DrawerLayout fitsSystemWindows, so dass es hinter den Systemleisten angeordnet wird.
  3. Deaktivieren der normalen Statusleistenfärbung von Theme.Material, damit DrawerLayout stattdessen dort zeichnen kann.

Ich gehe davon aus, dass Sie das neue Appcompat verwenden werden.

Zunächst sollte Ihr Layout so aussehen:

Dann in Ihrer Activity/Fragment:

public void onCreate(Bundled savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Ihre normale Einrichtung. Blah blah ...

    // Da wir eine Toolbar verwenden, sollten wir sie abrufen und als ActionBar festlegen
    Toolbar toolbar = (...) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);

    // Nun rufen wir das DrawerLayout ab, damit wir die Statusleistenfarbe setzen können.
    // Dies hat nur Auswirkungen auf Lollipop oder wenn Sie translucentStatusBar auf KitKat verwenden.
    DrawerLayout drawerLayout = (...) findViewById(R.id.my_drawer_layout);
    drawerLayout.setStatusBarBackgroundColor(IhreausgewählteFarbe);
}

Dann müssen Sie sicherstellen, dass das DrawerLayout hinter der Statusleiste sichtbar ist. Das machen Sie, indem Sie Ihr values-v21-Theme ändern:

values-v21/themes.xml

    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentStatus">true</item>

Hinweis: Wenn anstelle eines verwendet wird

das tatsächliche Layout erzielt wird, wird der gewünschte Effekt erzielt, wenn Sie fitsSystemWindows(bool) für eine Ansicht aufrufen, die Sie aus der Methode onCreateView zurückgeben.

@Override
public View onCreateView(LayoutInflater inflater, 
                         ViewGroup container,
                         Bundle savedInstanceState) {
    View mDrawerListView = inflater.inflate(
        R.layout.fragment_navigation_drawer, container, false);
    mDrawerListView.setFitsSystemWindows(true);
    return mDrawerListView;
}

98voto

reVerse Punkte 34905

Mit der Veröffentlichung der neuesten Android Support Library (rev 22.2.0) haben wir eine Design Support Library erhalten, zu der auch eine neue Ansicht namens NavigationView gehört. Anstatt alles selbst mit dem ScrimInsetsFrameLayout und all dem anderen Zeug zu machen, verwenden wir einfach diese Ansicht und alles wird für uns erledigt.

Beispiel

Schritt 1

Fügen Sie die Design Support Library Ihrer build.gradle-Datei hinzu

dependencies {
    // Andere Abhängigkeiten wie appcompat
    compile 'com.android.support:design:22.2.0'
}

Schritt 2

Fügen Sie die NavigationView Ihrem DrawerLayout hinzu:

Schritt 3

Erstellen Sie eine neue Menüressource in /res/menu und fügen Sie die Elemente und Symbole hinzu, die Sie anzeigen möchten:

Schritt 4

Initialisieren Sie die NavigationView und behandeln Sie Klick-Ereignisse:

public class MainActivity extends AppCompatActivity {

    NavigationView mNavigationView;
    DrawerLayout mDrawerLayout;

    // Anderes Zeug

    private void init() {
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                mDrawerLayout.closeDrawers();
                menuItem.setChecked(true);
                switch (menuItem.getItemId()) {
                    case R.id.nav_home:
                        // TODO - Etwas tun
                        break;
                    // TODO - Andere Elemente behandeln
                }
                return true;
            }
        });
    }
}

Schritt 5

Vergewissern Sie sich, dass Sie android:windowDrawsSystemBarBackgrounds und android:statusBarColor in values-v21 setzen, sonst wird Ihr Drawer nicht unter dem StatusBar angezeigt.

    <!-- Andere Attribute wie colorPrimary, colorAccent usw. -->
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>

Optionaler Schritt

Fügen Sie dem NavigationView einen Header hinzu. Erstellen Sie dazu einfach ein neues Layout und fügen Sie app:headerLayout="@layout/my_header_layout" zum NavigationView hinzu.

Ergebnis

Bild, das die NavigationView zeigt

Notizen

  • Die hervorgehobene Farbe verwendet die über das colorPrimary-Attribut definierte Farbe
  • Die Listenelemente verwenden die über das textColorPrimary-Attribut definierte Farbe
  • Die Icons verwenden die über das textColorSecondary-Attribut definierte Farbe

Sie können auch die Beispiel-App von Chris Banes überprüfen, die die NavigationView zusammen mit den anderen neuen Ansichten, die Teil der Design Support Library sind (wie der FloatingActionButton, TextInputLayout, Snackbar, TabLayout usw.), hervorhebt.

6voto

Nicolas Jafelle Punkte 2551

Machen Sie es funktionieren, in Werten-v21-Stilen oder im Themen-XML muss dieses Attribut verwendet werden:

true

Das macht die Magie!

6voto

Vipin Sahu Punkte 1441

Alle oben genannten Ansätze sind korrekt und könnten funktionieren. Ich habe eine funktionierende Demo erstellt, die dem obigen Leitfaden folgt und auf Versionen 2.x bis 5.x getestet wurde.

Sie können von Github klonen

Das Wichtige zum Ausprobieren ist in der Hauptaktivität

toolbar = (Toolbar) findViewById(R.id.toolbar);
res = this.getResources();

this.setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeButtonEnabled(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    ScrimInsetsFrameLayout scrimInsetsFrameLayout = (ScrimInsetsFrameLayout)
            findViewById(R.id.linearLayout);
    scrimInsetsFrameLayout.setOnInsetsCallback(this);
} 

und der Rückruf

@Override
public void onInsetsChanged(Rect insets) {
    Toolbar toolbar = this.toolbar;
    ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams)
        toolbar.getLayoutParams();
    lp.topMargin = insets.top;
    int top = insets.top;
    insets.top += toolbar.getHeight();
    toolbar.setLayoutParams(lp);
    insets.top = top; // zurücksetzen
}

Absolut das Theme für V21 vollbringt das Wunder

    <!-- Anpassungen des Themes für API 21 können hier vorgenommen werden. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/accent_material_light</item>
    <item name="windowActionModeOverlay">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentStatus">true</item>

und das ScrimInsetsFrameLayout

Jetzt wird dies mit der neuen Design Support Library noch einfacher

compile 'com.android.support:design:22.2.0'

geklont von @Chris Banes https://github.com/chrisbanes/cheesesquare

4voto

katwal-Dipak Punkte 3253

Ich verwende das Design-Support-Bibliothek. Und nur durch Verwendung eines benutzerdefinierten Themas habe ich eine transparente Statusleiste erreicht, wenn die Navigationsleiste geöffnet ist.

Bildbeschreibung hier eingeben

Bildbeschreibung hier eingeben

    <!-- Passen Sie Ihr Thema hier an. -->
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>

    <!-- Um die Navigationsleiste auszufüllen und ebenfalls transparent zu machen -->
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>

Fügen Sie schließlich das Thema der Manifest-Datei hinzu

Vergessen Sie nicht, die Eigenschaft android:fitsSystemWindows="true" im "DrawerLayout" zu verwenden

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X