android - collapsing - layout_collapsemode

El desplazamiento no funciona con CoordinatorLayout+parallax image+BottomSheetLayout

Question

Introducción

Tengo una actividad que implementa un patrón común con la imagen del encabezado de paralaje y el contenido de desplazamiento mediante CoordinatorLayout , AppBarLayout y CollapsingToolbarLayout . Mi diseño xml se ve así:

<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
android:id="@+id/appbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:fitsSystemWindows="true"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<TextView
android:background="@color/colorAccent"
android:gravity="center"
android:layout_height="250dp"
android:layout_width="match_parent"
android:text="ParallaxImage"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/content"
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_height="wrap_content"
android:layout_margin="@dimen/text_margin"
android:layout_width="wrap_content"
android:text="@string/large_text"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Como puedes ver en la siguiente animación de gif, todo funciona correctamente. Puede desplazar la pantalla completa desde el contenido de NestedScrollView , así como desde la Toolbar o la View paralaje.

Problema

Google introdujo una clase BottomSheetBehavior (biblioteca de soporte de diseño de Android 23.2 ) para ayudar a los desarrolladores a implementar hojas de fondo . Mi diseño xml con la hoja inferior se ve así:

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<!-- ommited -->
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- ommited -->
</android.support.v4.widget.NestedScrollView>
<LinearLayout
android:id="@+id/bottomSheet"
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="@android:color/holo_blue_bright"
android:orientation="vertical"
app:behavior_peekHeight="?attr/actionBarSize"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<TextView
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="BottomSheetLayout"
android:textColor="@android:color/white"/>
<android.support.v4.widget.NestedScrollView
android:id="@+id/bottomSheetContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="@android:color/holo_green_dark"
android:padding="16dp"
android:text="@string/large_text"
android:textColor="@android:color/white"/>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Y el resultado se ve así:

Como puede ver, ahora no puedo desplazarme, si comienzo a desplazarme desde la View paralaje. El desplazamiento desde el contenido de NestedScrollView y desde la Toolbar funciona como se esperaba.

Pregunta

¿Cómo puedo administrar el desplazamiento para que funcione también desde la View paralaje (de la misma manera que en la primera animación GIF)? Parece que BottomSheetBehavior intercepta eventos táctiles e impide que AppBarLayout (AppBarLayoutBehavior) maneje el desplazamiento. Pero lo más extraño es que el desplazamiento desde la Toolbar de Toolbar funciona y tanto Parallax View como Toolbar son hijos de AppBarLayout .

Answer 1

Creo que deberías usar NestedScrollView con BottomSheetBehavior , reemplaza el golpe como bootemSheet!

<android.support.v4.widget.NestedScrollView
android:id="@+id/bottomSheet"
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="@android:color/holo_blue_bright"
android:orientation="vertical"
app:behavior_peekHeight="?attr/actionBarSize"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="BottomSheetLayout"
android:textColor="@android:color/white"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="@android:color/holo_green_dark"
android:padding="16dp"
android:text="@string/large_text"
android:textColor="@android:color/white"/>
</ScrollView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

NestedScrollView puede saber anidar con la barra de herramientas, ¡no con LinearLayout !

Deseo ayudar !!

Answer 2

El problema se puede resolver moviendo el NestedScrollView (o el fragmento que contiene un NestedScrollView en mi caso) fuera del CoordinatorLayout en un FrameLayout y colocando una vista ficticia donde estaba el NestedScrollView, así:

<FrameLayout>
<CoordinatorLayout>
<AppBarLayout>
...
</AppBarLayout>
<View
android:id="@+id/bottomSheet"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior" />
</CoordinatorLayout>
<NestedScrollView
android:id="@+id/bottomSheetContent">
...
</NestedScrollView>
</FrameLayout>

Finalmente, agregue BottomSheetCallback a la vista ficticia que traduce la vista de contenido real mientras se desliza:

@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
bottomSheetContent.setTranslationY((1f - slideOffset) * bottomSheetContent.getHeight());
}

Aparentemente, esta es la única manera de evitar que un CoordinatorLayout reaccione (e intercepte) cualquier evento táctil. #JustGoogleThings

Answer 3

Estoy copiando el XML que estoy usando. Por cierto, está funcionando en el Samsung Galaxy S3, el Huawei Mate 8 y el Moto, y no lo he probado con el emulador (eliminé todo lo relacionado con los negocios y solo coloqué widgets falsos).

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinatorlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="@style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.PopupOverlay"
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"
android:paddingBottom="16dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo." />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TITLE"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text 2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text 3" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text 4" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text 5" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:behavior_peekHeight="100dp"
android:fitsSystemWindows="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="16dp"
android:background="@android:color/white"
android:padding="15dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BOOTOMSHEET TITLE"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text 2"
android:layout_margin="10dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text 3"
android:layout_margin="10dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text 4"
android:layout_margin="10dp"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="320dp"
android:background="@color/colorAccent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Your remaining content here"
android:textColor="@android:color/white" />
</FrameLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

Answer 4

Parece un error en el código de BottomSheetBehavior , ya que si intenta depurar el código de CoordinatorLayout verá que cuando toca su paralaje View se determinará como un diseño con BottomSheetBehavior lugar de HeaderBehavior .

Así que la solución rápida que he encontrado es configurar OnTouchListener que siempre devuelve verdadero a su vista de paralaje:

View parallaxView = findViewById(R.id.parallax_view);
parallaxView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return true;
}
});

Por supuesto, no olvide configurar android:id="@+id/parallax_view" en su vista con el modo de colapso de paralaje.

¡Espero eso ayude!

Answer 5

Se me ocurrió mi propia respuesta:

• agrega app:layout_behavior="...AppBarLayoutCustomBehavior" a tu appBarLayout .

• crear esa clase y extender desde AppBarLayout.Behavior

• anular onStartNestedScroll y onNestedFling

• cree una bandera como scrollDenial , y agréguela a los dos métodos a continuación, luego llame a super (scrollDenial && super.onStartNestedScroll ...)

• ahora, necesita actualizar su condición de denegación en cada onStartNestedScroll. Hice algo como esto:

  https://gist.github.com/recoverrelax/8dd37b54910d70b5cd6a130a070c51e9

PD. Lo siento, pero este es Kotlin: p No debería ser difícil entenderlo. Se solucionó el problema de la hoja inferior.

Answer 6

prueba esto

 <LinearLayout
android:id="@+id/bottomSheet"
android:layout_width="match_parent"
android:layout_height="400dp">

cambia la altura 400dp a wrap_content

la esperanza te funciona