android Recyclerview仿京东,滚动屏幕标题栏渐变(启动页面动画)

简介:

首先,本文代码部分参考了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

相关文章
|
2月前
|
Android开发 容器
35. 【Android教程】视频页面:ViewPager
35. 【Android教程】视频页面:ViewPager
35 3
|
24天前
|
XML Android开发 数据格式
Android 中如何设置activity的启动动画,让它像dialog一样从底部往上出来
在 Android 中实现 Activity 的对话框式过渡动画:从底部滑入与从顶部滑出。需定义两个 XML 动画文件 `activity_slide_in.xml` 和 `activity_slide_out.xml`,分别控制 Activity 的进入与退出动画。使用 `overridePendingTransition` 方法在启动 (`startActivity`) 或结束 (`finish`) Activity 时应用这些动画。为了使前 Activity 保持静止,可定义 `no_animation.xml` 并在启动新 Activity 时仅设置新 Activity 的进入动画。
35 12
|
21天前
|
XML Android开发 UED
Android动画之共享元素动画简单实践
本文介绍Android共享元素动画, 实现两Activity间平滑过渡特定UI元素。通过设置`transitionName`属性和使用`ActivityOptions.makeSceneTransitionAnimation`启动目标Activity实现动画效果。可自定义过渡动画提升体验。
32 0
|
2月前
|
XML IDE 开发工具
【Android UI】自定义带按钮的标题栏
【Android UI】自定义带按钮的标题栏
40 7
【Android UI】自定义带按钮的标题栏
|
2月前
|
Android开发 UED
Android Item平移动画
【6月更文挑战第18天】
|
2月前
|
API Android开发 开发者
`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView
【6月更文挑战第26天】`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView。它提供高效的数据视图复用,优化的布局管理,支持多种布局(如线性、网格),并解耦数据、适配器和视图。RecyclerView的灵活性、性能(如局部刷新和动画支持)和扩展性使其成为现代Android开发的首选,特别是在处理大规模数据集时。
36 2
|
2月前
|
Android开发 Kotlin
Android面试题 之 Kotlin DataBinding 图片加载和绑定RecyclerView
本文介绍了如何在Android中使用DataBinding和BindingAdapter。示例展示了如何创建`MyBindingAdapter`,包含一个`setImage`方法来设置ImageView的图片。布局文件使用`&lt;data&gt;`标签定义变量,并通过`app:image`调用BindingAdapter。在Activity中设置变量值传递给Adapter处理。此外,还展示了如何在RecyclerView的Adapter中使用DataBinding,如`MyAdapter`,在子布局`item.xml`中绑定User对象到视图。关注公众号AntDream阅读更多内容。
39 1
|
2月前
|
传感器 Android开发 UED
Android统一设置页面竖屏
【6月更文挑战第4天】
|
1月前
|
Android开发
android 动画 插值器和估值器
android 动画 插值器和估值器
|
1月前
|
Android开发
Android 开发中跳转到评论页面
Android 开发中跳转到评论页面
29 0