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

开始正题。

布局文件：

[html] view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="@color/app_bg"  
6.     android:orientation="vertical"  
7.     >  
8.   
9.     <include  
10.         android:id="@+id/load_view"  
11.         layout="@layout/pull_to_load_footer"  
12.         android:visibility="gone" />  
13.     <android.support.v4.widget.SwipeRefreshLayout  
14.          android:id="@+id/swipe_container"  
15.          android:layout_width="match_parent"  
16.          android:layout_height="match_parent" >  
17.         <android.support.v7.widget.RecyclerView  
18.             android:id="@+id/recycler_view"  
19.             android:layout_width="match_parent"  
20.             android:layout_height="match_parent"  
21.             />  
22.         </android.support.v4.widget.SwipeRefreshLayout>  
23.   
24.   
25.     <RelativeLayout  
26.         android:id="@+id/index_title_bar"  
27.         android:layout_alignParentTop="true"  
28.         style="@style/title_bar_style_home_v19"  
29.         android:fitsSystemWindows="true"  
30.         android:gravity="center"  
31.         android:paddingTop="@dimen/title_bar_padding_top"  
32.         >  
33.   
34.         <TextView  
35.             android:id="@+id/current_city_text"  
36.             android:layout_width="wrap_content"  
37.             android:layout_height="wrap_content"  
38.             android:layout_alignParentLeft="true"  
39.             android:layout_centerVertical="true"  
40.             android:layout_marginLeft="10dp"  
41.             android:drawableTop="@drawable/ic_location"  
42.             android:drawablePadding="2dp"  
43.             android:text="北京"  
44.             android:textColor="#fff"  
45.             android:textSize="10sp" />  
46.   
47.         <TextView  
48.             android:id="@+id/tv_title"  
49.             android:layout_centerVertical="true"  
50.             android:layout_width="match_parent"  
51.             android:layout_height="33dp"  
52.             android:gravity="center_vertical"  
53.             android:layout_weight="10"  
54.             android:background="@drawable/shape_edit_corners_bg"  
55.             android:hint="请输入商品名称"  
56.             android:imeOptions="actionSearch"  
57.             android:singleLine="true"  
58.             android:textColor="@color/black_text"  
59.             android:textColorHint="#ffb6b6b6"  
60.             android:textSize="14sp"  
61.             android:maxLength="10"  
62.             android:paddingLeft="5dp"  
63.             android:paddingRight="3dp"  
64.             android:drawableLeft="@drawable/ic_search"  
65.             android:drawableRight="@drawable/bg_btn_voice"  
66.             android:layout_toLeftOf="@+id/image_right"  
67.             android:layout_toRightOf="@+id/current_city_text"  
68.             android:layout_marginLeft="10dp"  
69.             android:layout_marginRight="10dp"/>  
70.   
71.         <TextView  
72.             android:id="@+id/image_right"  
73.             android:layout_width="wrap_content"  
74.             android:layout_height="wrap_content"  
75.             android:layout_alignParentRight="true"  
76.             android:layout_centerVertical="true"  
77.             android:layout_marginRight="10dp"  
78.             android:drawableTop="@drawable/ic_category"  
79.             android:drawablePadding="2dp"  
80.             android:text="分类"  
81.             android:textColor="#fff"  
82.             android:textSize="10sp" />  
83.   
84.     </RelativeLayout>  
85. </RelativeLayout>  

部分代码：

[java] view plain copy

 

1. CommonHeader headerView;  
2.     private void initView(View view) {  
3.   
4.         mSwipeRefreshLayout = (SwipeRefreshLayout)view.findViewById(R.id.swipe_container);  
5.         mSwipeRefreshLayout.setProgressViewOffset(false, 0, Util.dip2px(getActivity(), 92));  
6.         //设置刷新时动画的颜色，可以设置4个  
7.         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);  
8.         mSwipeRefreshLayout.setOnRefreshListener(this);  
9.         mSwipeRefreshLayout.setRefreshing(true);  
10.   
11.         mRecyclerView = (RecyclerView) view.findViewById(R.id.recycler_view);  
12.         mGridAdapter = new HotsGridAdapter(getActivity(),mHandler);  
13.         mHeaderAndFooterRecyclerViewAdapter = new HeaderAndFooterRecyclerViewAdapter(mGridAdapter);  
14.         mRecyclerView.setAdapter(mHeaderAndFooterRecyclerViewAdapter);  
15.   
16.         layoutManager = new GridLayoutManager(getActivity(), 2);  
17.         layoutManager.setSpanSizeLookup(new HeaderSpanSizeLookup((HeaderAndFooterRecyclerViewAdapter) mRecyclerView.getAdapter(), layoutManager.getSpanCount()));  
18.         layoutManager.setOrientation(GridLayoutManager.VERTICAL);  
19.         layoutManager.setSmoothScrollbarEnabled(true);  
20.         mRecyclerView.setHasFixedSize(true);  
21.         mRecyclerView.setLayoutManager(layoutManager);  
22.   
23.         headerView = new CommonHeader(getActivity(),R.layout.layout_home_header);  
24.         RecyclerViewUtils.setHeaderView(mRecyclerView, headerView);  
25.   
26.         mTitlebar = (RelativeLayout) view.findViewById(R.id.index_title_bar);  
27.         mTitlebar.setVisibility(View.VISIBLE);  
28.         mTitlebar.getBackground().setAlpha(0);  
29.         keyTextView = (TextView) mTitlebar.findViewById(R.id.tv_title);  
30.         mCurCityText = (TextView) mTitlebar.findViewById(R.id.current_city_text);  
31.         categorizeTextView = (TextView) view.findViewById(R.id.image_right);  
32.   
33.         slideShowView = (SlideShowView) headerView.findViewById(R.id.slideshowView);  
34.         moreSpecialProduct = headerView.findViewById(R.id.special_more);  
35.   
36.         mCurCityText.setOnClickListener(this);  
37.         keyTextView.setOnClickListener(this);  
38.         moreSpecialProduct.setOnClickListener(this);  
39.         categorizeTextView.setOnClickListener(this);  
40.   
41.         slideShowView = (SlideShowView) headerView.findViewById(R.id.slideshowView);  
42.         cart_btn = getActivity().findViewById(R.id.shop_cart_btn);  
43.         animation_viewGroup = createAnimLayout();  
44.   
45.         imageLoader = ImageLoader.getInstance();  
46.         mRecyclerView.addOnScrollListener(mOnScrollListener);  
47.   
48.   
49.     }  

关键代码：

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

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

滑动监听事件：

[java] view plain copy

 

1. boolean pauseOnScroll = false, pauseOnFling=true;  
2.     private RecyclerOnScrollListener mOnScrollListener = new RecyclerOnScrollListener() {  
3.   
4.         @Override  
5.         public void onScrolled(int dx, int dy) {  
6.             super.onScrolled(dx, dy);  
7.             if (slideShowView.getHeight() > 0) {  
8.                 //define it for scroll height  
9.                 int lHeight = slideShowView.getHeight();  
10.                 if(dy < 0){  
11.                     mTitlebar.getBackground().setAlpha(0);  
12.                 }else {  
13.                     if (dy < lHeight) {  
14.                         int progress = (int) (new Float(dy) / new Float(lHeight) * 200);//255  
15.                         mTitlebar.getBackground().setAlpha(progress);  
16.                     } else {  
17.                         mTitlebar.getBackground().setAlpha(255 - 55);  
18.                     }  
19.                 }  
20.   
21.             }  
22.   
23.         }  
24.   
25.         @Override  
26.         public void onBottom() {  
27.             super.onBottom();  
28.             Log.d(TAG, "onBottom");  
29.             LoadingFooter.State state = RecyclerViewStateUtils.getFooterViewState(mRecyclerView);  
30.             if(state == LoadingFooter.State.Loading) {  
31.                 Log.d(TAG, "the state is Loading, just wait..");  
32.                 return;  
33.             }  
34.   
35.             if (mCurPageIndex < totalPage) {  
36.                 // loading more  
37.                 RecyclerViewStateUtils.setFooterViewState(getActivity(), mRecyclerView, REQUEST_COUNT, LoadingFooter.State.Loading, null);  
38.                 mHandler.sendEmptyMessage(GET_LIST_DATA);  
39.                 Log.d(TAG, "onBottom loading");  
40.             } else {  
41.                 //the end  
42.                 RecyclerViewStateUtils.setFooterViewState(getActivity(), mRecyclerView, REQUEST_COUNT, LoadingFooter.State.TheEnd, null);  
43.             }  
44.         }  
45.   
46.         @Override  
47.         public void onScrollStateChanged(int newState) {  
48.             //根据newState状态做处理  
49.             if (imageLoader != null) {  
50.                 switch (newState) {  
51.                     case 0:  
52.                         imageLoader.resume();  
53.                         break;  
54.   
55.                     case 1:  
56.                         if (pauseOnScroll) {  
57.                             imageLoader.pause();  
58.                         } else {  
59.                             imageLoader.resume();  
60.                         }  
61.                         break;  
62.   
63.                     case 2:  
64.                         if (pauseOnFling) {  
65.                             imageLoader.pause();  
66.                         } else {  
67.                             imageLoader.resume();  
68.                         }  
69.                         break;  
70.                 }  
71.             }  
72.         }  
73.   
74.   
75.     };  

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

具体原理请参考

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

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