Superposición de vista de desplazamiento con AppBarLayout

103

Quiero implementar el patrón 'Espacio flexible con contenido superpuesto' de las técnicas de desplazamiento de Material design , como en este video :

Mi diseño XML ahora se ve así:

<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 una manera fácil de lograr esto usando la Biblioteca de diseño? ¿O tengo que crear un CoordinatorLayout.Behavior personalizado para hacer esto?

android android-design-library android-collapsingtoolbarlayout Ianhanniballake
fuente

Estoy buscando lo opuesto, una imagen dentro de CollapsingToolbarLayout debería mostrar algunos dps más después de la barra de herramientas y debajo de NestedScrollView en otro color.

David

Estaba usando FrameLayout, RelativeLayout pero siempre los fragmentos se superpusieron con actionBar. Usar un NestedScrollView como padre para todos los fragmentos fue la solución. ¡Gracias!

JCarlosR

Respuestas:

148

De hecho, superponer la vista de desplazamiento con AppBarLayout es una característica incluida de la Biblioteca de compatibilidad de diseño de Android : puede usar el app:behavior_overlapTopatributo en su NestedScrollView(o en cualquier Vista que use ScrollingViewBehavior ) para establecer la cantidad de superposición:

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

Tenga en cuenta que app:behavior_overlapTopsolo funciona en vistas que tienen el app:layout_behavior="@string/appbar_scrolling_view_behavior"comportamiento que utiliza el atributo (no la Vista ni el Grupo de vistas principal, como se suelen aplicar los atributos), de ahí el behavior_prefijo.

O configúrelo programáticamente a través de setOverlayTop () :

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

Ianhanniballake
fuente

Esto casi funciona para mí, excepto que mi RecyclerView (en el que configuré layout_behaviory behavior_overlapTop) termina detrás de su hermano AppBarLayout. Intenté cambiar el orden en el XML, pero no parece tener ningún efecto. ¿Alguna idea de cuál podría ser el problema?

Vicky Chijwani

Cuando desactivo el desplazamiento (eliminando los atributos de la aplicación: layout_scrollFlags) - behavior_overlapTop no funciona - NestedScrollView pasa a AppBarLayout. ¿Sabes cómo arreglar ésto?

Pavel Biryukov

@PavelBiryukov, ¿qué hiciste para API <21?

Vicky Chijwani

Hola, no me funciona. Reciboerror no resource identifier found for attribute behavior_overlayTop

Jack Lynx

@Lynx - bastante confuso, es behavior_overlapToppero setOverlayTop()- superposición vs superposición. ¡Asegúrate de usar el correcto!

ianhanniballake

Además de la respuesta aceptada , llame a setTitleEnabled (false) en su CollapsingToolbarLayout para que el título permanezca fijo en la parte superior como en el ejemplo.

Me gusta esto:

CollapsingToolbarLayout.setTitleEnabled(false);

o agregándolo en xml como este:

app:titleEnabled="false"

De lo contrario, el título podría desaparecer detrás del contenido superpuesto, a menos que, por supuesto, ese sea el comportamiento que desea.

G.deWit
fuente

Puede poner un título expandidoTitleMarginBottom suficientemente grande en CollapsingToolbarLayout para evitar superponer el título cuando se expande.

WindRider