不用涉及到各种冲突常规打造酷炫下拉视差效果SmartRefres

首先看下效果

效果图.gif

背景

上图所示这种效果，在很多APP上很常见，当我们真正想着手开发时，可能会遇到很多冲突问题，很难实现完美效果，如果想研究事件冲突的撸友们可以看看这篇文章传送地址，于是我本着无聊的心态做了下，下面讲述下实现的一种常规方案，如果有不足的地方请大家提出，我将继续完善

功能点简单说明

1. 下拉整体刷新，上拉加载（上拉隶属于单个fragment）
2. 下拉图片视差效果，开始图片整体放大，向下平移，达到阀值时（可自定义），下拉只保留向下平移效果，顶部title左右俩侧按钮渐变隐藏
3. 上滑顶部title停留
4. 上滑顶部title左右俩次按钮改变颜色，顶部title背景颜色渐变显示
5. Tablayout停留

布局设计分析

-FrameLayout(最外层)
    -ImageView(头部背景图)
        -SmartRefreshLayout(头部刷新控件)
            -CoordinatorLayout
                -AppBarLayout
                     -CollapsingToolbarLayout
                         -Toolbar
                         ...省略中间巴拉巴拉布局
                     -Tablayout
                     -ViewPager
   -Toolbar

功能点模块分析，效果实现

1.下拉整体刷新，上拉加载（上拉隶属于单个fragment）

通过上述布局分析可以看出，在最外层嵌套了一层刷新控件 SmartRefreshLayout ，此控件提供顶部刷新功能，Tablayout+ViewPager+Fragment实现方法可以放N多个Fragment，Fragment布局中设计如下

<?xml version="1.0" encoding="utf-8"?>
<com.scwang.smartrefresh.layout.SmartRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/refreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

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

于是会出现外层和内层Fragment都会出现上拉和下拉功能，所以我们
禁止外层上拉加载功能 mRefreshLayout.setEnableLoadMore(false);
禁止内层下拉刷新功能 mRefreshLayout.setEnableLoadMore(false);
这样就实现了我们的需求

2.下拉图片视差效果，开始图片整体放大，向下平移，达到阀值时（可自定义），下拉只保留向下平移效果，顶部title左右俩侧按钮渐变隐藏

所以我们需要对RefreshLayout做向下平移监听，代码如下

 mRefreshLayout.setOnMultiPurposeListener(new SimpleMultiPurposeListener() {
            @Override
            public void onHeaderMoving(RefreshHeader header, boolean isDragging, float percent, int offset, int headerHeight, int maxDragHeight) {
                //设置图片向下移动
                mIvHeader.setTranslationY(offset / 2);
                //设置title渐变效果
                mToolbar1.setAlpha(1 - Math.min(percent, 1));
                //设置图片宽度变化   当达到指定设置的指定值后  宽度停止  只向下移动
                if (offset <= 100) {
                    ViewGroup.LayoutParams layoutParams = mIvHeader.getLayoutParams();
                    layoutParams.width = (mScreenWidth + offset);
                    ((ViewGroup.MarginLayoutParams) layoutParams).setMargins(-(layoutParams.width - mScreenWidth) / 2, -400, 0, 0);
                    mIvHeader.requestLayout();
                }
            }
        });

（1）图片向下平移实现我们可通过setTranslationY实现，速度自己可以调节(offset / 2)
（2）顶部titleBar下拉渐变隐藏， mToolbar1.setAlpha(1 - Math.min(percent, 1));搞定，建议大家打印下回调的各个参数日志，以便理解
（3）图片放大重点说一下，其实原理是动态改变图片的宽度，如果直接改变width的话，因为图片的坐标起始点在左上角，改变了宽度之后图片中心点会往屏幕中心点右侧偏移（在宽度变大情况下），所以需要给图片设置一个margins，

值为=（图片宽度-图片放大宽度）/2

因为图片需要实现向下拉升不到头效果，所以布局MargingTop需要个给负数如（-400），这样就实现了一直拉不到头效果

3.如何实现上滑顶部title停留

这个测试了多种方法，但还是选择了下边这种，思路为CollapsingToolbarLayout中放一个titleBar,但是这个titleBar无任何显示作用，只是提供滑动到顶部停留作用，这是这个控件不设置任何属性的强大之处，真正titlebar的相关控件放在最外层，和imageView同级，它一直存在，只是对它做显示隐藏处理
在说明一下，如果CollapsingToolbarLayout中的titleBar放置返回等按钮，在下拉刷新时，整体布局向下移动，这样title中返回和右边的按钮会一起向下移动，这样体验不好，所以采用了俩个titleBar这样思路去实现

此外衍生一个问题，titleBar高度如何处理，比如高版本低版本等，为了适配页面，不采用固定值做法，动态测量状态栏高度

//增加View的paddingTop,增加的值为状态栏高度 (智能判断，并设置高度)  titleBar
 StatusBarUtil.setPaddingSmart(this, mToolbar);
  StatusBarUtil.setPaddingSmart(this, mToolbar1);

/** 增加View的paddingTop,增加的值为状态栏高度 (智能判断，并设置高度)*/
    public static void setPaddingSmart(Context context, View view) {
        if (Build.VERSION.SDK_INT >= 19) {
            ViewGroup.LayoutParams lp = view.getLayoutParams();
            if (lp != null && lp.height > 0) {
                lp.height += getStatusBarHeight(context);//增高
            }
            view.setPadding(view.getPaddingLeft(), view.getPaddingTop() + getStatusBarHeight(context),
                    view.getPaddingRight(), view.getPaddingBottom());
        }
    }

4.如何实现上滑顶部title左右俩次按钮改变颜色，顶部title背景颜色渐变显示

想实现这个效果需要监听上滑移动，这样我们需要用到AppBarLayout的方法，mAppbarLayout.addOnOffsetChangedListener(this);

@Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        int scrollRangle = appBarLayout.getTotalScrollRange();
        /**
         * 如果是verticalOffset改成负数   有不一样的效果，可以模拟试试
         */
        mIvHeader.setTranslationY(verticalOffset);
        /**
         * 这个数值可以自己定义
         */
        if (verticalOffset < -10) {
            mIvBack.setImageResource(R.drawable.back_black);
            mIvMenu.setImageResource(R.drawable.icon_menu_black);
        } else {
            mIvBack.setImageResource(R.drawable.back_white);
            mIvMenu.setImageResource(R.drawable.icon_menu_white);
        }

        int mAlpha = (int) Math.abs(255f / scrollRangle * verticalOffset);
        //顶部title渐变效果
        mToolbar1.setBackgroundColor(Color.argb(mAlpha, 255, 255, 255));
        mToolbarUsername.setTextColor(Color.argb(mAlpha, 0, 0, 0));
    }

（1）整体上滑时，我想让图片整体向上移动，所以
mIvHeader.setTranslationY(verticalOffset);，改变图片的Y轴位置，
如果想让图片反方向移动，可以将verticalOffset改成负数，如
mIvHeader.setTranslationY(-verticalOffset);，有不一样的视差体验，效果也是棒棒的，大家可以试试
（2）顶部title左右俩测按钮改变颜色，其实也就是改变图片，自己定义一个阈值，很好实现

if (verticalOffset < -10) {
            mIvBack.setImageResource(R.drawable.back_black);
            mIvMenu.setImageResource(R.drawable.icon_menu_black);
     } else {
            mIvBack.setImageResource(R.drawable.back_white);
            mIvMenu.setImageResource(R.drawable.icon_menu_white);
     }

或者对图片做渐变显示隐藏操作也是可以的，就会有图片渐变由白变成黑的效果，大家可以试试，方法是这个setAlpha
（3）顶部title背景渐变效果，和文字渐变，
int mAlpha = (int) Math.abs(255f / scrollRangle * verticalOffset);
mToolbar1.setBackgroundColor(Color.argb(mAlpha, 255, 255, 255));
mToolbarUsername.setTextColor(Color.argb(mAlpha, 0, 0, 0));

5.如何实现Tablayout停留

这个归功于AppBarLayout+CollapsingToolbarLayout强大之处
AppBarLayout里放入的都可以跟着向上滑动滑出布局的的，添加app:layout_scrollFlags="scroll"属性可以滑出布局，TabLayout没有添加，所以停留在顶部，理解这个属性就随意操控了，还有很多炫酷的动画视觉效果，大家可以去查阅下

---

项目提供几个轮子演示，大家可以尽情的玩耍了

指示器轮子
刷新框架轮子
adapter适配器轮子
屏幕适配轮子，俩种实现方法
多字体轮子，因为页面不好看，改了一种字体

CSDN下载地址
github下载地址稍后上传

最后，祝大家开发顺利!