×

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

96
龙衣袭
2018.06.27 19:16 字数 345

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

image

这位兄弟的博文地址是:使用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,收工!

开发
Web note ad 1