android Recyclerview仿京东，滚动屏幕标题栏渐变

版权声明：分享技术，传播快乐。如果本博客对你有帮助，请在我的博客首页为我打赏吧！

首先，本文代码部分参考了conglida博主写的自定义scrollview 实现标题栏渐变：

http://download.csdn.net/download/conglida/9183723

此资源只使用自定义scrollview 实现标题栏渐变和上拉下拉刷新。如果需要listview，等其他控件，需实现onScrollListener，在onscroll中嵌入渐变代码。

再次感谢conglida博主的无私奉献！

由于Recyclerview已经推出很长时间了，不得不说这个控件确实好，可以替代scrollview、listview、gridview，功能很强大，目前我已经用这个新控件实现了标题栏渐变的效果。

本代码使用了三方开源组件：

HeaderAndFooterRecyclerView

HeaderAndFooterRecyclerView是支持addHeaderView、 addFooterView、分页加载的RecyclerView解决方案，滑动底部自动加载更多。

项目地址：https://github.com/cundong/HeaderAndFooterRecyclerView

开始正题。

布局文件：

 xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@color/app_bg"
     android:orientation="vertical"
     >

     <include
         android:id="@+id/load_view"
         layout="@layout/pull_to_load_footer"
         android:visibility="gone" />
     <android.support.v4.widget.SwipeRefreshLayout
          android:id="@+id/swipe_container"
          android:layout_width="match_parent"
          android:layout_height="match_parent" >
         <android.support.v7.widget.RecyclerView
             android:id="@+id/recycler_view"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             />
         android.support.v4.widget.SwipeRefreshLayout>


     <RelativeLayout
         android:id="@+id/index_title_bar"
         android:layout_alignParentTop="true"
         style="@style/title_bar_style_home_v19"
         android:fitsSystemWindows="true"
         android:gravity="center"
         android:paddingTop="@dimen/title_bar_padding_top"
         >

         <TextView
             android:id="@+id/current_city_text"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentLeft="true"
             android:layout_centerVertical="true"
             android:layout_marginLeft="10dp"
             android:drawableTop="@drawable/ic_location"
             android:drawablePadding="2dp"
             android:text="北京"
             android:textColor="#fff"
             android:textSize="10sp" />

         <TextView
             android:id="@+id/tv_title"
             android:layout_centerVertical="true"
             android:layout_width="match_parent"
             android:layout_height="33dp"
             android:gravity="center_vertical"
             android:layout_weight="10"
             android:background="@drawable/shape_edit_corners_bg"
             android:hint="请输入商品名称"
             android:imeOptions="actionSearch"
             android:singleLine="true"
             android:textColor="@color/black_text"
             android:textColorHint="#ffb6b6b6"
             android:textSize="14sp"
             android:maxLength="10"
             android:paddingLeft="5dp"
             android:paddingRight="3dp"
             android:drawableLeft="@drawable/ic_search"
             android:drawableRight="@drawable/bg_btn_voice"
             android:layout_toLeftOf="@+id/image_right"
             android:layout_toRightOf="@+id/current_city_text"
             android:layout_marginLeft="10dp"
             android:layout_marginRight="10dp"/>

         <TextView
             android:id="@+id/image_right"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentRight="true"
             android:layout_centerVertical="true"
             android:layout_marginRight="10dp"
             android:drawableTop="@drawable/ic_category"
             android:drawablePadding="2dp"
             android:text="分类"
             android:textColor="#fff"
             android:textSize="10sp" />

     RelativeLayout>
 RelativeLayout>

部分代码：

 CommonHeader headerView;
     private void initView(View view) {

         mSwipeRefreshLayout = (SwipeRefreshLayout)view.findViewById(R.id.swipe_container);
         mSwipeRefreshLayout.setProgressViewOffset(false, 0, Util.dip2px(getActivity(), 92));
         //设置刷新时动画的颜色，可以设置4个
         mSwipeRefreshLayout.setColorSchemeResources(android.R.color.holo_blue_light, android.R.color.holo_red_light, android.R.color.holo_orange_light, android.R.color.holo_green_light);
         mSwipeRefreshLayout.setOnRefreshListener(this);
         mSwipeRefreshLayout.setRefreshing(true);

         mRecyclerView = (RecyclerView) view.findViewById(R.id.recycler_view);
         mGridAdapter = new HotsGridAdapter(getActivity(),mHandler);
         mHeaderAndFooterRecyclerViewAdapter = new HeaderAndFooterRecyclerViewAdapter(mGridAdapter);
         mRecyclerView.setAdapter(mHeaderAndFooterRecyclerViewAdapter);

         layoutManager = new GridLayoutManager(getActivity(), 2);
         layoutManager.setSpanSizeLookup(new HeaderSpanSizeLookup((HeaderAndFooterRecyclerViewAdapter) mRecyclerView.getAdapter(), layoutManager.getSpanCount()));
         layoutManager.setOrientation(GridLayoutManager.VERTICAL);
         layoutManager.setSmoothScrollbarEnabled(true);
         mRecyclerView.setHasFixedSize(true);
         mRecyclerView.setLayoutManager(layoutManager);

         headerView = new CommonHeader(getActivity(),R.layout.layout_home_header);
         RecyclerViewUtils.setHeaderView(mRecyclerView, headerView);

         mTitlebar = (RelativeLayout) view.findViewById(R.id.index_title_bar);
         mTitlebar.setVisibility(View.VISIBLE);
         mTitlebar.getBackground().setAlpha(0);
         keyTextView = (TextView) mTitlebar.findViewById(R.id.tv_title);
         mCurCityText = (TextView) mTitlebar.findViewById(R.id.current_city_text);
         categorizeTextView = (TextView) view.findViewById(R.id.image_right);

         slideShowView = (SlideShowView) headerView.findViewById(R.id.slideshowView);
         moreSpecialProduct = headerView.findViewById(R.id.special_more);

         mCurCityText.setOnClickListener(this);
         keyTextView.setOnClickListener(this);
         moreSpecialProduct.setOnClickListener(this);
         categorizeTextView.setOnClickListener(this);

         slideShowView = (SlideShowView) headerView.findViewById(R.id.slideshowView);
         cart_btn = getActivity().findViewById(R.id.shop_cart_btn);
         animation_viewGroup = createAnimLayout();

         imageLoader = ImageLoader.getInstance();
         mRecyclerView.addOnScrollListener(mOnScrollListener);


     }

关键代码：

headerView = new CommonHeader(getActivity(),R.layout.layout_home_header);
        RecyclerViewUtils.setHeaderView(mRecyclerView, headerView);

为RecyclerView添加headerview，headview包括了所有的其他view，如下图所示，所看到的view都包含在headerView里面，不包括titlebar哦。

滑动监听事件：

 boolean pauseOnScroll = false, pauseOnFling=true;
     private RecyclerOnScrollListener mOnScrollListener = new RecyclerOnScrollListener() {

         @Override
         public void onScrolled(int dx, int dy) {
             super.onScrolled(dx, dy);
             if (slideShowView.getHeight() > 0) {
                 //define it for scroll height
                 int lHeight = slideShowView.getHeight();
                 if(dy < 0){
                     mTitlebar.getBackground().setAlpha(0);
                 }else {
                     if (dy < lHeight) {
                         int progress = (int) (new Float(dy) / new Float(lHeight) * 200);//255
                         mTitlebar.getBackground().setAlpha(progress);
                     } else {
                         mTitlebar.getBackground().setAlpha(255 - 55);
                     }
                 }

             }

         }

         @Override
         public void onBottom() {
             super.onBottom();
             Log.d(TAG, "onBottom");
             LoadingFooter.State state = RecyclerViewStateUtils.getFooterViewState(mRecyclerView);
             if(state == LoadingFooter.State.Loading) {
                 Log.d(TAG, "the state is Loading, just wait..");
                 return;
             }

             if (mCurPageIndex < totalPage) {
                 // loading more
                 RecyclerViewStateUtils.setFooterViewState(getActivity(), mRecyclerView, REQUEST_COUNT, LoadingFooter.State.Loading, null);
                 mHandler.sendEmptyMessage(GET_LIST_DATA);
                 Log.d(TAG, "onBottom loading");
             } else {
                 //the end
                 RecyclerViewStateUtils.setFooterViewState(getActivity(), mRecyclerView, REQUEST_COUNT, LoadingFooter.State.TheEnd, null);
             }
         }

         @Override
         public void onScrollStateChanged(int newState) {
             //根据newState状态做处理
             if (imageLoader != null) {
                 switch (newState) {
                     case 0:
                         imageLoader.resume();
                         break;

                     case 1:
                         if (pauseOnScroll) {
                             imageLoader.pause();
                         } else {
                             imageLoader.resume();
                         }
                         break;

                     case 2:
                         if (pauseOnFling) {
                             imageLoader.pause();
                         } else {
                             imageLoader.resume();
                         }
                         break;
                 }
             }
         }


     };

代码中涉及到的封装控件下载：http://download.csdn.net/detail/jdsjlzx/9391838，没有demo，请大家自行实现效果。

具体原理请参考

conglida博主写的自定义scrollview 实现标题栏渐变：

http://download.csdn.net/download/conglida/9183723