web-dev-qa-db-fra.com

Superposer la vue défilante avec AppBarLayout

Je souhaite implémenter le modèle "Espace flexible avec un contenu qui se chevauche" de la techniques de défilement de la conception du matéria , comme dans cette vidéo : Flexible Space with overlapping content GIF

Ma mise en page XML ressemble à ceci:

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

Existe-t-il un moyen simple de réaliser cela en utilisant la bibliothèque de conception? Ou dois-je créer une coutume CoordinatorLayout.Behavior pour le faire?

androidandroid-design-libraryandroid-collapsingtoolbarlayout
88
ianhanniballake

En fait, la superposition de la vue de défilement avec AppBarLayout est une fonctionnalité incluse de la bibliothèque de support de conception Android : vous pouvez utiliser le app:behavior_overlapTop attribut sur NestedScrollView (ou toute vue utilisant ScrollingViewBehavior ) pour définir le montant de chevauchement:

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

Notez que app:behavior_overlapTop ne fonctionne que sur les vues ayant le app:layout_behavior="@string/appbar_scrolling_view_behavior" car c’est le comportement qui utilise l’attribut (et non la vue ou le groupe de vues parent, auquel les attributs s’appliquent généralement), d’où le behavior_ préfixe.

Ou définissez-le par programme via setOverlayTop () :

NestedScrollView scrollView = ...
CoordinatorLayout.LayoutParams params = 
    (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams();
AppBarLayout.ScrollingViewBehavior behavior =
    (AppBarLayout.ScrollingViewBehavior) params.getBehavior();
behavior.setOverlayTop(128); // Note: in pixels
127
ianhanniballake

En plus de réponse acceptée , appelez setTitleEnabled (false) sur votre CollapsingToolbarLayout pour que le titre reste en haut, comme dans l'exemple.

Comme ça:

CollapsingToolbarLayout.setTitleEnabled(false);

ou en l'ajoutant au format xml comme ceci:

app:titleEnabled="false"

Sinon, le titre pourrait disparaître derrière le contenu qui se chevauchait, à moins que ce ne soit bien le comportement souhaité.

19
G.deWit