Android 使用 ViewPager+RecyclerView+SmartRefreshLayout 实现顶部图片下拉视差效果

由于是公司项目，不方便作图（自己懒！！！），所以盗用了网上一位兄弟的图，如侵权，立删。
实现效果大概如下（只看头部图片下拉的视差效果）：

这位兄弟的博文地址是：使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

既然这位兄弟已经实现了该功能，我为什么还要另写一篇文章呢？
第一是，因为我笨啊，这兄弟的代码功底很强，我模仿不出他实现的效果（我不是懒，真的）。
第二也是，我项目中没用到NestedScrollView，也没那么多的滑动冲突，所以实现起来相对也就简单些。

实现这个效果主要就是用到了SmartRefreshLayout 库，该库真的是很良心，不仅实现了很多酷炫的下拉刷新效果，而且写的例子也很到位，上文提到的作者应该也是参考了该库中的微博首页例子，非常感谢作者！
该库中微博首页例子

再次感谢以上两位作者！

废话不多说，直接上代码！

实现第一步肯定是引入该库:

//1.1.0 API改动过大，老用户升级需谨慎
compile 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.0-alpha-7'
compile 'com.scwang.smartrefresh:SmartRefreshHeader:1.1.0-alpha-7'//没有使用特殊Header，可以不加这行
compile 'com.android.support:appcompat-v7:25.3.1'//版本 23以上（必须）

接着就是写xml布局了，贴一下我的大概布局吧：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    // 顶部可拉伸的图片
    <ImageView
        android:id="@+id/parallax"
        android:layout_width="match_parent"
        android:layout_height="670dp"
        android:layout_marginTop="-200dp"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/默认背景图"
        app:layout_collapseMode="parallax"/>
    // 加载库
    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/refreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:srlEnablePreviewInEditMode="false"
        android:fitsSystemWindows="true">
        // 加载的头部
        <com.scwang.smartrefresh.layout.header.ClassicsHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srlAccentColor="@android:color/white"/>

            <android.support.design.widget.CoordinatorLayout
                android:id="@+id/coordinatorLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                // 里面是 AppBarLayout + CollapsingToolbarLayout 组成的顶部 以及两个 fragment 对应的tab
                <include layout="@layout/顶部的布局"/>
                // ViewPager 中添加两个 fragment 
                <android.support.v4.view.ViewPager
                    android:id="@+id/view_pager"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#E0E0E0"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior"
                    />
            </android.support.design.widget.CoordinatorLayout>


    </com.scwang.smartrefresh.layout.SmartRefreshLayout>

    <!--右下角的发布按钮-->
    <include layout="@layout/发布加号布局"/>

</FrameLayout>

再在代码中监听滑动就OK了，代码如下：

 private int mOffset = 0;
 private int mScrollY = 0;

refreshLayout.setOnMultiPurposeListener(new SimpleMultiPurposeListener() {
    @Override
    public void onRefresh(@NonNull RefreshLayout refreshLayout) {
        // 做刷新操作
    }

    @Override
    public void onHeaderMoving(RefreshHeader header, boolean isDragging, float percent, int offset, int headerHeight, int maxDragHeight) {
        // 下拉后的操作，这里只是做了平移效果`setTranslationY`,当然你可以做很多酷炫的效果
        mOffset = offset / 2;
        parallax.setTranslationY(mOffset - mScrollY);
        toolbar.setAlpha(1 - Math.min(percent, 1));
    }

});

OK，收工！

Android 使用 ViewPager+RecyclerView+SmartRefreshLayout 实现顶部图片下拉视差效果

猜你喜欢