首先看下效果
效果图.gif
背景
上图所示这种效果，在很多APP上很常见，当我们真正想着手开发时，可能会遇到很多冲突问题，很难实现完美效果，如果想研究事件冲突的撸友们可以看看这篇文章传送地址，于是我本着无聊的心态做了下，下面讲述下实现的一种常规方案，如果有不足的地方请大家提出，我将继续完善
功能点简单说明
- 下拉整体刷新，上拉加载（上拉隶属于单个fragment）
- 下拉图片视差效果，开始图片整体放大，向下平移，达到阀值时（可自定义），下拉只保留向下平移效果，顶部title左右俩侧按钮渐变隐藏
- 上滑顶部title停留
- 上滑顶部title左右俩次按钮改变颜色，顶部title背景颜色渐变显示
- 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, -DisplayUtil.dip2px(MainActivity.this,200), 0, 0); mIvHeader.requestLayout(); } } });
（1）图片向下平移实现我们可通过setTranslationY实现，速度自己可以调节(offset / 2)
（2）顶部titleBar下拉渐变隐藏， mToolbar1.setAlpha(1 - Math.min(percent, 1));搞定，建议大家打印下回调的各个参数日志，以便理解
（3）图片放大重点说一下，其实原理是动态改变图片的宽度，如果直接改变width的话，因为图片的坐标起始点在左上角，改变了宽度之后图片中心点会往屏幕中心点右侧偏移（在宽度变大情况下），所以需要给图片设置一个margins，
值为=（图片宽度-图片放大宽度）/2
因为图片需要实现向下拉升不到头效果，所以布局MargingTop需要个给负数如（ -DisplayUtil.dip2px(MainActivity.this,200)），这样就实现了一直拉不到头效果
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适配器轮子
屏幕适配轮子，俩种实现方法
多字体轮子，因为页面不好看，改了一种字体
最后，祝大家开发顺利!
