android - collapsing - layout_collapsemode
El desplazamiento no funciona con CoordinatorLayout+parallax image+BottomSheetLayout (6)
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
.
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 !!
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
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>
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!
Se me ocurrió mi propia respuesta:
agrega
app:layout_behavior="...AppBarLayoutCustomBehavior"
a tuappBarLayout
.crear esa clase y extender desde
AppBarLayout.Behavior
anular
onStartNestedScroll
yonNestedFling
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.
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