不用涉及到各种冲突常规打造酷炫下拉视差效果SmartRefres
首先看下效果
效果图.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, -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下载地址稍后上传
最后，祝大家开发顺利!
