Barra de herramientas para colapsar como Google Play Store
Quiero implementar una barra de herramientas que se derrumbe como google Play Store. He alcanzado la funcionalidad un poco, pero que sólo funciona para la pantalla de retrato. Aquí hay una muestra de captura de pantalla de lo que pude hacer.
- Cómo obtener la vista de texto de la pestaña TabLayout
- Android: Fotos de Google como Vista de cuadrícula con funcionalidad de zoom
- Split Action Bar con AppCompat v7 usando Material Design?
- Botones de diseño de material de Android - Pre lollipop
- ¿Cómo mostrar un cuadro de diálogo en Android con el efecto revelador del diseño de material?
Ahora lo que quiero hacer es cuando cambio mi orientación del dispositivo al modo de LandScape que debe mirar exactamente como esto.
Así que lo que mi principal pregunta es cómo manejar estos cambios de orientación. ¿Hay algún componente oficial de android disponible que puede hacer este tipo de cosas o tendré que Z-indexar mis diseños para lograr este tipo de comportamiento de diseño. Tenga en cuenta que quiero que el diseño sea exactamente igual a esto con márgenes en ambos lados e indexación de Z en la parte superior de la imagen también el comportamiento de desplazamiento debe ser exactamente igual que Google Play Store.
Estoy adjuntando mi muestra xml que he escrito hasta ahora.
<?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:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" 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="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <com.group3amd.materializeyourapp.widgets.SquareImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:id="@+id/scroll" android:layout_width="match_parent" android:layout_height="match_parent" android:clipToPadding="false" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="24dp" app:cardElevation="@dimen/spacing_medium" app:cardUseCompatPadding="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/spacing_large" android:layout_marginRight="@dimen/spacing_large" android:layout_marginTop="@dimen/spacing_large" android:textAppearance="@style/TextAppearance.AppCompat.Headline" /> <TextView android:id="@+id/description" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/spacing_large" android:text="@string/lorem_ipsum" android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> </LinearLayout> </android.support.v7.widget.CardView> </FrameLayout> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" style="@style/FabStyle" app:layout_anchor="@id/app_bar_layout" app:layout_anchorGravity="bottom|right|end" /> </android.support.design.widget.CoordinatorLayout>
- Progreso circular con un botón de acción flotante
- Android BottomSheet: Está buscando bajo la barra de herramientas
- ¿Existe un componente nativo para el botón de acción Flotante en Diseño de materiales de Android?
- Android TabLayout con pestaña activa siempre en el centro, al igual que en la aplicación Play Kiosco
- Android.support.design.widget.FloatingActionButton la implantación de FAB reduce el tamaño de la imagen
- CollapsingToolbarLayout título de estilo
- Fragmento de error: tipos incompatibles, requiere android.app.fragment pero encontró activity.messagefragment
- Error: Error: No se encontró ningún recurso que coincida con el nombre dado: attr 'colorAccent'
En este bastante similar problema: colapsar el diseño de la barra de herramientas como google play store , encontraría una respuesta como a continuación:
Ver dentro de
CollapsingToolbarLayout
no es necesario establecer laapp:layout_scrollFlags
. Sin efecto. Base en mi código, cambiar laapp:layout_scrollFlags
enCollapsingToolbarLayout
aapp:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
y establecerminHeight
para ello.Como su barra de herramientas es
"pin"
, por lo queenterAlwaysCollapsed
lo llamará cuando se desplace hacia abajo.<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:focusableInTouchMode="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/seffafCollapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="240dp" android:minHeight="?attr/actionBarSize" app:expandedTitleMarginEnd="164dp" app:expandedTitleMarginStart="148dp" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> <ImageView android:id="@+id/header" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/haber_icerik_resim" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/haber_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:theme="@style/ToolbarColoredBackArrow" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/newsRecyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" android:clickable="true" android:background="@color/mainBackground" app:layout_behavior="@string/appbar_scrolling_view_behavior" />
En el comentario a ese post, también encontraría una pista:
Agrega la
app:contentScrim="?attr/colorPrimary"
a tuapp:contentScrim="?attr/colorPrimary"
. No es necesario dos barras de herramientas para implementar este efecto
EDIT: Aquí encontrarás una entrevista con un chico responsable de Google Play Store, que está hablando de cómo construir el diseño en Play Store App:
[UDACITY] Entrevista con Kirill Grouchnikov, parte 1
[UDACITY] Entrevista con Kirill Grouchnikov, parte 2
Espero que ayude
- Seguridad de subprocesos en las bibliotecas de Android
- ¿Alguien ha limitado con éxito el tamaño de la caché de su WebView?