Ü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 :

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?

android android-design-library android-collapsingtoolbarlayout

— 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

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

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

Hallo, das funktioniert bei mir nicht. Ich erhalteerror no resource identifier found for attribute behavior_overlayTop

— Jack Lynx

@Lynx - verwirrenderweise ist es behavior_overlapTopaber setOverlayTop()- Überlappung gegen Überlagerung. Stellen Sie sicher, dass Sie die richtige verwenden!

— Ianhanniballake

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

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

— WindRider