首先,本文代码部分参考了conglida博主写的自定义scrollview 实现标题栏渐变:
http://download.csdn.net/download/conglida/9183723
此资源只使用自定义scrollview 实现标题栏渐变和上拉下拉刷新。如果需要listview,等其他控件,需实现onScrollListener,在onscroll中嵌入渐变代码。
再次感谢conglida博主的无私奉献!
由于Recyclerview已经推出很长时间了,不得不说这个控件确实好,可以替代scrollview、listview、gridview,功能很强大,目前我已经用这个新控件实现了标题栏渐变的效果。
本代码使用了三方开源组件:
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