1. 程式人生 > >android Recyclerview仿京東,滾動屏幕標題欄漸變

android Recyclerview仿京東,滾動屏幕標題欄漸變

search oca net align sym enc href 分享 www

首先,本文代碼部分參考了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仿京東,滾動屏幕標題欄漸變