Utilizar windowTranslucentStatus con CollapsingToolbarLayout
Estoy tratando de obtener un efecto similar a lo que se ve en Google Play.
Tengo la siguiente presentación para mostrar una barra de herramientas transparente con una imagen detrás de ella. Cuando el usuario se desplaza hay un efecto de paralaje en la vista de la imagen, ya que se desplaza fuera de la pantalla. La barra de herramientas regresa cada vez que el usuario se desplaza hacia arriba, con la visualización de la imagen sólo regresa cuando el usuario llega al final de la lista.
- Vista de desplazamiento superpuesta con AppBarLayout
- Anclaje de ImageView a Collapsing Toolbar
- Cómo eliminar programaticamente un comportamiento de diseño de mi NestedScrollView?
- Error al inflar la clase CollapsingToolbarLayout
- Android CollapsingToolbarLayout colapse Listener
Todo esto funciona muy bien.
<android.support.design.widget.CoordinatorLayout android:id="@+id/main" 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.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:background="@color/background_material_dark"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:minHeight="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" app:statusBarScrim="#09b" app:contentScrim="#09f"> <ImageView android:id="@+id/img" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/location_banner" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin" android:fitsSystemWindows="true" app:theme="@style/ThemeOverlay.AppCompat.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>
La cuestión
Cuando establezco windowTranslucentStatus a true. El contenido de la vista se desplaza hasta estar debajo de la barra de estado, pero el contenido de CollapsingToolbarLayout se mueve hasta el doble de la altura de la barra de estado (CollapsingToolbarLayout conserva la altura correcta).
Esto significa que parte de la parte superior de la imagen está cortada y la barra de acciones ahora aparece debajo de la barra de estado en lugar de debajo de ella. Como un efecto secundario de esto ahora hay relleno en la parte inferior de la CollapsingToolbarLayout la misma altura que la barra de estado
Esto es lo que parece sin windowTranslucentStatus. Todo aquí funciona bien
WindowTranslucentStatus establecido en true
El usuario se desplaza hacia arriba desde la lista inferior (no en la parte superior)
- CollapsingToolbarLayout | Aspectos de desplazamiento y diseño
- ¿Qué es layout_collapseParallaxMultiplier utilizado en CollapsingToolbarLayout?
- CollapsingToolbarLayout comportamiento de desplazamiento en las tabletas
- Cómo ocultar la barra de herramientas después de colapsar mientras que recyclerView desplazamiento hacia abajo
- Las transiciones de elementos compartidos no funcionan cuando se combinan con un CoordinatorLayout y CollapsingToolbarLayout
- CoordinatorLayout deja espacio vacío en la parte inferior después de desplazarse
- CollapsingToolbarLayout y posición de botón de acción flotante dentro de CollapsingToolbarLayout
- CollapsingToolbarLayout setTitle () no se actualiza a menos que se colapse
Ha habido una actualización de la biblioteca de diseño. Supongo que el problema publicado anteriormente era un error.
Si actualiza la biblioteca de diseño a la versión más reciente este problema ya no se produce.
Ahora he eliminado todos los fitsSystemWindows = "true", excepto para el ImageView (como que necesita mostrar en la barra de estado).
También he eliminado el relleno menos de la barra de herramientas.
Este es mi tema para 21+
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowActionBarOverlay">true</item> <item name="android:windowContentOverlay">@null</item> <item name="android:textColorPrimary">@android:color/white</item> </style>
Todo funciona como se espera ahora
Agregue fitsSystemWindows al diseño y establezca en true.
Actualizar
Perdón por mi respuesta incompleta. Debería agregar fitsSystemWindows = "true" a layout xml como los siguientes códigos.
<android.support.design.widget.CoordinatorLayout android:id="@+id/main" 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.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:background="@color/background_material_dark" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:minHeight="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" app:statusBarScrim="#09b" app:contentScrim="#09f" android:fitsSystemWindows="true"> <ImageView android:id="@+id/img" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/location_banner" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" android:fitsSystemWindows="true"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin" android:fitsSystemWindows="true" app:theme="@style/ThemeOverlay.AppCompat.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>
Una vez que la barra de estado es transparente y la libre para usar por la actividad, la barra de herramientas se empuja hacia arriba para ocupar ese espacio. Para corregir esto, necesita mover manualmente la barra de herramientas al lugar original.
Agregue las etiquetas siguientes a la vista "android.support.v7.Widget.Toolbar":
android:layout_height="48dp" // Whatever the height of the toolbar you want android:layout_marginTop="-48dp" // Negative of the height of the toolbar
Extienda el CoordinatorLayout
y llame a setOnApplyWindowInsetsListener
en su constructor para restablecer los valores insertados. Aquí está el código:
public class CustomCoordinatorLayout extends CoordinatorLayout { public CustomCoordinatorLayout(Context context) { super(context); init(); } public CustomCoordinatorLayout(Context context, AttributeSet attrs) { super(context, attrs); init(); } public CustomCoordinatorLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT_WATCH) { setOnApplyWindowInsetsListener(new OnApplyWindowInsetsListener() { @Override public WindowInsets onApplyWindowInsets(View view, WindowInsets windowInsets) { WindowInsets replaced = windowInsets.replaceSystemWindowInsets(0, 0, 0, 0); return replaced; } }); } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); } }
Tengo el mismo problema, pero hay una cosa que sé.
Si quieres tener una barra de estado transparente en una barra de herramientas normal, necesitas agregar una tapa de relleno de 16dp.
La mejor manera de lograr esto es como Stimsoni dijo
Añadir android: fitsSystemWindows = "true" para el CoordiatorLayout, AppBarLayout y ImageView
<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/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appBar" android:fitsSystemWindows="true" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> <ImageView android:id="@+id/background" android:layout_width="match_parent" android:layout_height="256dp" android:scaleType="centerCrop" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" android:alpha="0.75" android:src="@drawable/foo"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>...
Sólo cambia el color de la barra de estado en Styles.XML (v21)
<item name="android:statusBarColor">@android:color/transparent</item>
O eliminar la línea anterior en ese XML funciona perfecto.
- Obtención de valores de índices o índices desde una preferencia de lista
- CustomDrawerLayout de cuatro lados pantalla cuestión con Fling gesto y detección