Cómo expandir AppBarLayout al desplazarse hacia abajo alcanza en la parte superior de la RecyclerView
Estoy trabajando en una aplicación android en la que estoy usando CoordinatorLayout
, AppBarLayout
y CollapsingToolbarLayout
para usar la funcionalidad avanzada de barra de contracción.
Estoy usando recyclerview para mostrar el número de elementos en el fragmento. Cuando estoy desplazando hacia arriba recyclerview suavemente colapso AppBarLayout
pero cuando me desplácese hacia abajo y llegar a en el primer elemento de la recyclerview
automáticamente detener el desplazamiento sin la expansión de `AppBarLayout '.
- CoordinatorLayout / AppBarLayout ExpandableListView que se representa fuera de la pantalla
- CoordinatorLayout + ActionBar + Fragmentos
- Vista fija en el diseño de contenido de Viewpager, bajo CoordinatorLayout
- CollapsingToolbarLayout con imagen, relación de aspecto fija
- Desplazamiento suave y Fling con NestedScrollView, AppBarLayout y CoordinatorLayout
Entonces otra vez necesito enrollar abajo otra vez para hacer AppBarLayout
visible. Así que mi requisito es que al desplazarse hacia abajo cuando llego a la parte superior de recyclerview debe expandir `AppBarLayout '.
Cómo podemos hacer esto. Alguna idea ? Consulta el video de la misma https://www.dropbox.com/s/va5jk27ikytk5ax/app_collapsebar_issue.mp4?dl=0
Aquí está mi diseño de la misma: –
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/coordinator" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" android:fitsSystemWindows="true" app:layout_scrollFlags="scroll|exitUntilCollapsed" > <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="220dp" android:background="@drawable/offer_image" android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <!-- <com.flaviofaria.kenburnsview.KenBurnsView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="220dp" android:src="@drawable/offer_image" />--> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <com.flaviofaria.kenburnsview.KenBurnsView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="220dp" android:src="@drawable/offer_image" /> <FrameLayout android:id="@+id/collapse_frame" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#B3c85a00"> </FrameLayout> <FrameLayout android:id="@+id/centerCircle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"> <ImageView android:id="@+id/imageViewCenter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/offer" /> </FrameLayout> <include android:id="@+id/toolbar" layout="@layout/toolbar" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="15dp" app:tabIndicatorColor="#FFFFFF" app:tabMode="scrollable" /> <!--</FrameLayout>--> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <!--<FrameLayout--> <!--android:layout_width="match_parent"--> <!--android:layout_height="match_parent"--> <!-- --> <!--android:visibility="visible">--> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" style="@style/floating_action_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:src="@drawable/ic_share_white_24dp" android:visibility="gone" app:backgroundTint="#FF9800" app:elevation="6dp" app:pressedTranslationZ="12dp" /> <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="left|bottom|fill_vertical" android:layout_marginTop="0dp" app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager> <!--</FrameLayout>--> <!--<include layout="@layout/content_scrolling" />--> </android.support.design.widget.CoordinatorLayout> <RelativeLayout android:id="@+id/bannerView" android:layout_width="match_parent" android:layout_height="58dp" android:layout_gravity="bottom|center" android:background="@drawable/curved_white_with_blue_border" android:visibility="gone"> <TextView android:id="@+id/bannerText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:layout_centerVertical="true" android:gravity="center" android:padding="3dp" android:text="Banner" android:visibility="gone" /> <ImageView android:id="@+id/bannerImage" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:gravity="center" android:padding="3dp" android:scaleType="fitXY" android:visibility="gone" /> <ImageView android:id="@+id/bannerClose" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:layout_centerVertical="true" android:src="@drawable/cross_icon" /> </RelativeLayout> <LinearLayout android:id="@+id/socialTabs" android:layout_width="match_parent" android:layout_height="46dp" android:layout_gravity="bottom|center" android:layout_marginBottom="5dp" android:background="@color/White" android:orientation="horizontal" android:visibility="gone"> <ImageView android:layout_width="wrap_content" android:layout_height="match_parent" android:adjustViewBounds="true" android:src="@drawable/follow" /> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:background="@color/White"> <LinearLayout android:layout_width="match_parent" android:layout_height="46dp" android:layout_gravity="center" android:gravity="center" android:paddingLeft="10dp" android:paddingRight="10dp" android:weightSum="3"> <ImageView android:id="@+id/facebookImageView" android:layout_width="30dp" android:layout_height="30dp" android:layout_weight="1" android:src="@drawable/fb_follow" /> <ImageView android:id="@+id/googlePlusImageView" android:layout_width="30dp" android:layout_height="30dp" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:layout_weight="1" android:adjustViewBounds="true" android:src="@drawable/google_follow" /> <ImageView android:id="@+id/twitterImageView" android:layout_width="30dp" android:layout_height="30dp" android:layout_weight="1" android:adjustViewBounds="true" android:src="@drawable/twitter_follow" /> </LinearLayout> </FrameLayout> </LinearLayout> </FrameLayout> <ExpandableListView android:id="@+id/left_drawer" android:layout_width="265dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="#fff" android:choiceMode="singleChoice" android:divider="@null" android:dividerHeight="0dp" android:drawSelectorOnTop="true" android:groupIndicator="@null" android:scrollbars="@null" /> </android.support.v4.widget.DrawerLayout>
- Mostrar barra de herramientas después de oculto por desplazamiento en el botón de clic
- Android AppBarLayout superpone la vista de lista
- Cambiar la visibilidad Las vistas de AppBarLayout causan problemas de espaciado para Fragments cargados
- Biblioteca de diseño de Android: SwipeRefreshLayout no detecta el desplazamiento sobre CollapsingToolbarLayout
- Disposición de Android: Recyclerview horizontal dentro de una Recyclerview vertical dentro de un Viewpager con comportamientos de desplazamiento
- AppBarLayout extrañamente toma espacio y empuja el contenido hacia abajo
- Impedir que RecyclerView se desplace en AppBarLayout antes de que AppBarLayout se colapse.
- Cómo deshabilitar el desplazamiento de AppBarLayout en CoordinatorLayout?
Acabo de juntar una aplicación de ejemplo que parece demostrar el comportamiento que buscas. La AppBar
se expandirá automáticamente cada vez que el RecyclerView
debajo de ella se desplace hacia la parte superior, en lugar de detenerse y esperar otro golpe para abrir la AppBar
.
Los componentes más relevantes residen en una clase personalizada de RecyclerView
. He añadido algunos comentarios explicativos:
public class ScrollFeedbackRecyclerView extends RecyclerView { private WeakReference<Callbacks> mCallbacks; public ScrollFeedbackRecyclerView(Context context) { super(context); attachCallbacks(context); } public ScrollFeedbackRecyclerView(Context context, AttributeSet attrs) { super(context, attrs); attachCallbacks(context); } /*If the first completely visible item in the RecyclerView is at index 0, then we're at the top of the list, so we want the AppBar to expand **if the AppBar is also collapsed** (otherwise the AppBar will constantly attempt to expand). */ @Override public void onScrolled(int dx, int dy) { if(((LinearLayoutManager)getLayoutManager()).findFirstCompletelyVisibleItemPosition() == 0) { Log.e(getClass().getSimpleName(), "index 0 visible"); if(mCallbacks.get().isAppBarCollapsed()) { mCallbacks.get().setExpanded(true); } } super.onScrolled(dx, dy); } /* the findFirstCompletelyVisibleItem() method is only available with LinearLayoutManager and its subclasses, so test for it when setting the LayoutManager */ @Override public void setLayoutManager(LayoutManager layout) { if(!(layout instanceof LinearLayoutManager)) { throw new IllegalArgumentException(layout.toString() + " must be of type LinearLayoutManager"); } super.setLayoutManager(layout); } private void attachCallbacks(Context context) { try { mCallbacks = new WeakReference<>((Callbacks)context); } catch (ClassCastException e) { throw new ClassCastException(context.toString() + " must implement " + "ScrollFeedbackRecyclerView.Callbacks"); } } /* Necessary to interact with the AppBarLayout in the hosting Activity */ interface Callbacks { boolean isAppBarCollapsed(); void setExpanded(boolean expanded); } }
MainActivity.java
public class MainActivity extends AppCompatActivity implements ScrollFeedbackRecyclerView.Callbacks{ private AppBarLayout mAppBarLayout; private Toolbar mToolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ScrollFeedbackRecyclerView mRecyclerView = (ScrollFeedbackRecyclerView) findViewById(R.id.rv_container); RecyclerViewAdapter mAdapter = new RecyclerViewAdapter(); mRecyclerView.setAdapter(mAdapter); mRecyclerView.setLayoutManager(new LinearLayoutManager(this)); mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar); mToolbar = (Toolbar) findViewById(R.id.toolbar); } /* When collapsed, calling getY() on the AppBar will return a negative number. Adding this number to getHeight() will return the same value as the toolbar's height if the AppBar is fully collapsed. */ @Override public boolean isAppBarCollapsed() { final int appBarVisibleHeight = (int) (mAppBarLayout.getY() + mAppBarLayout.getHeight()); final int toolbarHeight = mToolbar.getHeight(); return (appBarVisibleHeight == toolbarHeight); } @Override public void setExpanded(boolean expanded) { mAppBarLayout.setExpanded(expanded, true); } }
El problema se publicó en google https://code.google.com/p/android/issues/detail?id=201873
Pero después de la liberación de la Biblioteca de Soporte para Android, revisión 23.2.1 (marzo de 2016) Este error se resuelve.
FloatingActionButton.setBackgroundTintList (tono @Nullable ColorStateList) ya no cambia el color de fondo
Actualizar la biblioteca de asistencia a Android Support Library to 23.2.1