it-swarm.com.de

Android Navigation Drawer und windowActionBarOverlay = true

Ich versuche, den neuen Android Navigation Drawer in meiner Anwendung zu implementieren. Ich habe eine BaseActivity.Java erstellt, die das Drawer-Setup und die Listener verwaltet, und ich habe zwei Unteraktivitäten, die diese Basisklasse erweitern. Bei der zweiten Aktivität plane ich, einen anderen Aktionsleistenstil mit den folgenden Attributen zu verwenden:

<item name="Android:windowActionBarOverlay">true</item>
<item name="Android:background">@Android:color/transparent</item>

um die Aktionsleiste transparent zu machen und den Inhalt reichhaltiger zu gestalten, da sich in meinem Layout ein Bildkopf befindet. 

Ich habe genau das erreicht, aber jetzt ist das Problem, dass sich der Navigations-Drawer selbst ausdehnt und die ActionBar überlappt, da der Inhalt erweitert wird, um den zusätzlichen Platz der ActionBar als Überlagerung zu nutzen schauendes Layout: 

enter image description here

Was ich gerne gemacht hätte, ist der tatsächliche Inhalt (Frame-Layout, das mit einem Fragment gefüllt wird), um den zusätzlichen Platz zu beanspruchen, aber die Nav-Schublade muss sich immer noch unter der Aktionsleiste befinden, ähnlich der Play Music App: 

enter image description here

Irgendwelche Ideen, was ich dafür tun kann? 

EDIT Also habe ich nach Ahmad's Hilfe die Variable marginTop nur in der ListView gesetzt. Hier ist das Layout: 

<!-- The navigation drawer -->
<ListView Android:id="@+id/left_drawer"
          Android:layout_marginTop="?android:attr/actionBarSize"
<!-- This was added after seeing the crazy effect, but does nothing -->
          Android:layout_marginBottom="0dp"
          Android:layout_marginLeft="0dp"
          Android:layout_marginRight="0dp"
          Android:layout_width="240dp"
          Android:layout_height="fill_parent"
          Android:layout_gravity="start"
          Android:choiceMode="singleChoice"
          Android:background="?attr/listviewBackground"
          />

Und jetzt funktioniert es großartig für die Oberseite, aber aus irgendeinem Grund gibt es auch einen Rand am unteren Rand der Ansicht, der für mich überhaupt keinen Sinn ergibt. Hier ist ein Screenshot

Nicht sicher, was es verursacht :(

25
daniel_c05

Falls sich jemand für ein anderes Interesse an dieser Frage interessiert. Hier ist was passiert ist. 

Ich habe versucht, nur den Rand oben in der Listenansicht wie folgt festzulegen: 

Android:layout_marginTop="?android:attr/actionBarSize"

Wie bereits in der bearbeiteten Frage erwähnt, hatte dies jedoch ein seltsames Verhalten, bei dem auch ein Rand vorhanden war, obwohl er nicht in der Layout-Ressourcendatei festgelegt war. 

Also habe ich mir die Play Music App genau angesehen und festgestellt, dass es sich eigentlich nicht um einen Rand handelt, sondern um eine Auffüllung. Außerdem verwenden sie einen benutzerdefinierten Hintergrund, der den durch die Auffüllung angegebenen Raum mit einer transparenten Farbe ausfüllt. 

Folgendes habe ich getan: 

  • Setzen Sie Padding am oberen Rand der ListView und nicht am Rand: 

    Android:paddingTop="?android:attr/actionBarSize"

Wie bereits erwähnt, ist es wichtig, die Abmessungen nicht fest zu codieren, da sie je nach Gerät variieren. 

  • Erstellen Sie ein benutzerdefiniertes Zeichenelement, dessen oberer Teil transparent ist und dann eine durchgehende Farbe aufweist: 

Es sieht irgendwie so aus: 

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item>
    <shape  Android:shape="rectangle">
        <solid Android:color="#80000000" />
    </shape>
</item>

<item Android:top="@dimen/action_bar_default_height">
    <shape
            Android:shape="rectangle">
        <solid Android:color="@color/light_gray" />
    </shape>
</item>

Beachten Sie, dass ich versucht habe, ?android:attr/actionBarSize für das drawable zu verwenden, was jedoch dazu führte, dass die App geschlossen wurde. Stattdessen durchsuchte ich grepcode und fand ein paar Dimen-Dateien mit unterschiedlichen Größen für die Aktionsleiste. Ich fügte sie den Dimen-Dateien meines eigenen Projekts hinzu. 

  • Für Werte: 48dp
  • Für Werte-Land: 40 dB
  • Für Werte-sw600dp: 56dp

Und danach denke ich, ich sehe gut aus. Beachten Sie auf dem Screenshot, dass sich die Listenansicht und die Aktionsleiste nicht überlappen, und der transparente Teil der Listenansicht hat genau die richtige Größe. 

enter image description here

Ich hoffe, das hilft jedem, der sich gefragt hat, wie er dies erreichen kann. 

14
daniel_c05

Und jetzt funktioniert es großartig für die Oberseite, aber aus irgendeinem Grund gibt es auch einen Rand am unteren Rand der Ansicht, der für mich überhaupt keinen Sinn ergibt. Hier ist ein Screenshot.

Wenn Sie Ihre ListView-Schwerkraft auf start | bottom setzen, wird Ihr Problem gelöst. Am unteren Rand wird kein zusätzlicher Rand hinzugefügt. Sieht so aus, als ob die Standard-Schwerkraft von DrawerLayout start | center ist

<ListView
    Android:id="@+id/left_drawer"
    Android:layout_marginTop="?android:attr/actionBarSize"
    Android:layout_width="240dp"
    Android:layout_height="match_parent"
    Android:layout_gravity="start|bottom"/>
17
kofi

Sie können am oberen Rand Ihres Layouts einen Rand festlegen, so dass sich der Inhalt unterhalb der Aktionsleiste befindet. 

Fügen Sie dies einfach in Ihr übergeordnetes Layout ein:

Android:layout_marginTop="?android:attr/actionBarSize"

Das Attribut actionBarSize bezieht sich, wie Sie es bereits vermutet haben, auf die Größe von ActionBar. Sie können keinen absoluten Wert als Rand festlegen, da ActionBar auf allen Android-Geräten nicht immer die gleiche Größe hat (auf Tablets größer, auf Mobilteilgeräten kleiner). 

Bearbeiten:

Setzen Sie den Rand auf ListView.

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

    <FrameLayout
        Android:id="@+id/content_frame"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" />

    <ListView
        Android:id="@+id/left_drawer"
        Android:layout_marginTop="?android:attr/actionBarSize"
        Android:layout_width="240dp"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"/>
</Android.support.v4.widget.DrawerLayout>

Die Google Music-App macht dasselbe:

enter image description here

8
Ahmad

Ich habe dieses Problem mit paddingTop gelöst:

<FrameLayout
    Android:id="@+id/menu_frame"
    Android:layout_width="240dp"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:paddingTop="?attr/actionBarSize" >

    <ListView 
        Android:id="@+id/left_drawer_list"
        Android:layout_width="240dp"
        Android:layout_height="match_parent" />

</FrameLayout>

Hoffentlich hilft das

4
Vadim Bryl

Ich habe eine Arbeitsdemo erstellt, die der obigen Anleitung folgt und auf 2.x bis 5.x getestet wurde 

Sie können von Github klonen

Die wichtigste Sache, um zu spielen, ist in Main Activity 

    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; // revert
}

Absolut macht das Theme für V21 den Zauber 

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

    <!-- API 21 theme customizations can go here. -->
    <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>
</style>
0
Vipin Sahu