Überlappen Sie die Bildlaufansicht mit AppBarLayout

102

Ich möchte das Muster "Flexibler Raum mit überlappendem Inhalt" aus den Bildlauftechniken für das Materialdesign implementieren , wie in diesem Video : Flexibler Raum mit überlappendem Inhalts-GIF

Mein XML-Layout sieht momentan so aus:

<android.support.design.widget.CoordinatorLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="192dp"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

      <android.support.v7.widget.Toolbar
          android:layout_height="?attr/actionBarSize"
          android:layout_width="match_parent"
          app:layout_collapseMode="pin"/>
    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>

  <android.support.v4.widget.NestedScrollView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
      <....>
    </LinearLayout>
  </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Gibt es eine einfache Möglichkeit, dies mithilfe der Designbibliothek zu erreichen? Oder muss ich ein benutzerdefiniertes CoordinatorLayout.Behavior erstellen , um dies zu tun?

ianhanniballake
quelle
Ich suche nach dem Gegenteil, ein Bild in CollapsingToolbarLayout sollte nach der Symbolleiste und unter der NestedScrollView in einer anderen Farbe ein paar dps mehr anzeigen!
David
Ich habe FrameLayout, RelativeLayout verwendet, aber immer wurden die Fragmente mit der actionBar überlappt. Die Lösung war die Verwendung eines NestedScrollView als übergeordnetes Element für alle Fragmente. Vielen Dank!
JCarlosR

Antworten:

147

Das Überlagern der Bildlaufansicht mit dem AppBarLayout ist eine enthaltene Funktion der Android Design Support Library : Sie können das app:behavior_overlapTopAttribut in Ihrer NestedScrollView(oder einer beliebigen Ansicht mit ScrollingViewBehavior ) verwenden, um den Überlappungsbetrag festzulegen:

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:behavior_overlapTop="64dp">

Beachten Sie, dass dies app:behavior_overlapTopnur für Ansichten funktioniert, die das app:layout_behavior="@string/appbar_scrolling_view_behavior"Verhalten haben, das das Attribut verwendet (nicht die Ansicht oder die übergeordnete Ansichtsgruppe, wie Attribute normalerweise gelten), daher das behavior_Präfix.

Oder setzen Sie es programmgesteuert über setOverlayTop () :

NestedScrollView scrollView = ...
CoordinatorLayout.LayoutParams params = 
    (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams();
AppBarLayout.ScrollingViewBehavior behavior =
    (AppBarLayout.ScrollingViewBehavior) params.getBehavior();
behavior.setOverlayTop(128); // Note: in pixels
ianhanniballake
quelle
1
Dies funktioniert fast für mich, außer dass mein RecyclerView (auf dem ich das layout_behaviorund eingestellt habe behavior_overlapTop) hinter seinem Geschwister AppBarLayout landet. Ich habe versucht, die Reihenfolge im XML zu ändern, aber es scheint keine Auswirkungen zu haben. Irgendwelche Ideen, woran es liegen könnte?
Vicky Chijwani
1
Wenn ich das Scrollen deaktiviere (App: layout_scrollFlags-Attribute entfernen) - behaviour_overlapTop funktioniert nicht - NestedScrollView wird unter AppBarLayout angezeigt. Wissen Sie, wie Sie das beheben können?
Pavel Biryukov
@PavelBiryukov was hast du für API <21 gemacht?
Vicky Chijwani
1
Hallo, das funktioniert bei mir nicht. Ich erhalteerror no resource identifier found for attribute behavior_overlayTop
Jack Lynx
1
@Lynx - verwirrenderweise ist es behavior_overlapTopaber setOverlayTop()- Überlappung gegen Überlagerung. Stellen Sie sicher, dass Sie die richtige verwenden!
Ianhanniballake
20

Rufen Sie zusätzlich zur akzeptierten Antwort setTitleEnabled (false) in Ihrem CollapsingToolbarLayout auf, damit der Titel wie im Beispiel oben fixiert bleibt.

So was:

CollapsingToolbarLayout.setTitleEnabled(false);

oder indem Sie es wie folgt in XML hinzufügen:

app:titleEnabled="false"

Andernfalls könnte der Titel hinter dem überlappenden Inhalt verschwinden, es sei denn, dies ist natürlich das gewünschte Verhalten.

G.deWit
quelle
2
Sie können dem CollapsingToolbarLayout ein ausreichend großes expandedTitleMarginBottom hinzufügen, um zu vermeiden, dass sich der Titel beim Erweitern überlappt.
WindRider