android Recyclerview仿京東,滾動屏幕標題欄漸變
首先,本文代碼部分參考了conglida博主寫的自定義scrollview 實現標題欄漸變:
http://download.csdn.net/download/conglida/9183723
此資源只使用自定義scrollview 實現標題欄漸變和上拉下拉刷新。如果需要listview,等其他控件,需實現onScrollListener,在onscroll中嵌入漸變代碼。
再次感謝conglida博主的無私奉獻!
由於Recyclerview已經推出很長時間了,不得不說這個控件確實好,可以替代scrollview、listview、gridview,功能很強大,目前我已經用這個新控件實現了標題欄漸變的效果。
使用框架:
https://github.com/jdsjlzx/LRecyclerView
LuperRecyclerView是支持addHeaderView、 addFooterView、分頁加載的RecyclerView解決方案,滑動底部自動加載更多。
開始正題。
布局文件:
<?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,請大家自行實現效果。
最新框架地址:https://github.com/jdsjlzx/LRecyclerView
具體原理請參考
conglida博主寫的自定義scrollview 實現標題欄漸變:
http://download.csdn.net/download/conglida/9183723
再分享一下我老師大神的人工智能教程吧。零基礎!通俗易懂!風趣幽默!還帶黃段子!希望你也加入到我們人工智能的隊伍中來!http://www.captainbed.net
android Recyclerview仿京東,滾動屏幕標題欄漸變