Android视图滚动差—ParallaxScrollImageView

其实这个控件写了好久，上一周整理完顺手也提交到了github上，算是自己的第一个开源组件吧。

ParallaxScrollImageView 这个控件是做什么的呢？如标题 主要是用于ListView 和RecyclerView中图片的滚动差效果。之前接到这个需求的时候，顺便到网上查了查，发现千篇一律的全是ListView头部的视图滚动差效果，我就想不明白了，他们怎么就取个名字叫做“Parallax ListView”了，加个“head”又不会怎么样，也只好自己动手了。具体的效果如下图：#####

Parallax.gif

没看出效果的,可以下载apk体验一下: https://yunpan.cn/c6yFmtfD9cAyL 访问密码 469d

实现流程：##

1.图片的偏移：

图片的偏移，采用的是Canvas的Matrix Translate操作，具体需要计算的参照物如图显示：

Paste_Image.png

通过提前设置好组件显示的宽高比来计算出‘图片显示区域’和'真实图片区域'的偏差值，再计算距离中线的距离来计算滑动距离，这样item在滚动时不同组件的高度与中线的距离不同，即产生落差。

 if (orientation == Orientation.BOTTOM_TOP) {
  localMatrix.postTranslate(0.0F, (-(targetDis / 2) - (((targetHeight - screenHeight / 2)) * targetDis) / screenHeight));
} else {  
  localMatrix.postTranslate(0.0F,(-(targetDis / 2) + (((targetHeight - screenHeight / 2)) * targetDis) / screenHeight));
}

2.视图的滚动/组件的刷新：

视图的滚动主要是依靠监听Listview 和RecyclerView的滑动事件做到的，因为组件无法知道自己在列表中什么时候会进行滑动，所以需要监听器进行通知，我在组件中写了一个公开方法

public void doWork() {  invalidate();}

而监听器的方法与我们做滑动底部刷新的方法一致，主要是要知道当前在屏幕的的item的数量与坐标，listview 的很简单，这个在网上查一查就知道了。而RecyclerView中由于不同类型的LinearManage获取数量与坐标的方法也有不同，下面来举出：

@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {  
  super.onScrolled(recyclerView, dx, dy);  
  int firstVisibleItem = 0, visibleItemCount = 0;  
  if (GridLayoutManager.class.isInstance(layoutManager)) {   //格子
     
     firstVisibleItem = ((GridLayoutManager) layoutManager).findFirstVisibleItemPosition();     
     visibleItemCount = ((GridLayoutManager) layoutManager).findLastVisibleItemPosition() - firstVisibleItem + 1; 

   } else if (StaggeredGridLayoutManager.class.isInstance(layoutManager)) {//瀑布流

     StaggeredGridLayoutManager staggeredGridLayoutManager = (StaggeredGridLayoutManager) layoutManager;   
     int[] firstVisibleItems = (staggeredGridLayoutManager).findFirstVisibleItemPositions(new int[staggeredGridLayoutManager.getSpanCount()]);   
     int[] lastVisibleItems = (staggeredGridLayoutManager).findLastVisibleItemPositions(new int[staggeredGridLayoutManager.getSpanCount()]);     
     visibleItemCount = getMaxPosition(lastVisibleItems) - getMinPosition(firstVisibleItems);  

  } else if (LinearLayoutManager.class.isInstance(layoutManager)) { //线性       

    firstVisibleItem = ((LinearLayoutManager) layoutManager).findFirstVisibleItemPosition();    
    visibleItemCount = ((LinearLayoutManager) layoutManager).findLastVisibleItemPosition() - firstVisibleItem + 1; 

   }  
    for (int i = 0, count = visibleItemCount; i < count; ++i) {   
     try {           
         ParallaxImageView currentImageView = (ParallaxImageView) recyclerView.getChildAt(i).findViewById(parallaxImageViewId);      
         currentImageView.doWork();    //刷新组件   
         } catch (NullPointerException e) {     
   }    
}
}

如何使用：##

1.添加库

Step 1. 在你工程的根build.gradle下面添加对仓库的描述:

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Step 2. 添加描述

dependencies {
        compile 'com.github.MartinBZDQSM:ParallaxScrollImageView:v1.0'
}

tips: If you already used the appcompat-v7 and recyclerview-v7 try this：

    compile 'com.android.support:appcompat-v7:' + SUPPORT_VERSION
        compile 'com.android.support:recyclerview-v7:' + SUPPORT_VERSION
        compile('com.github.MartinBZDQSM:ParallaxScrollImageView:v1.0')
        {
    exclude group: 'com.android.support', module: 'appcompat-v7'
        exclude group: 'com.android.support', module: 'recyclerview-v7'
    }

2.如何用?###

(1)在布局文件中添加ParallaxImageView 并添加相关参数:###

parallax:img_ratio ：图片预览时所呈现的高与实际宽度的比值

parallax:paralax_ratio：图片预览时偏移距离与实际宽度的比值

所以 img_ratio+paralax_ratio= height(实际高度)/width(实际宽度)

parallax:orientation ： TOP_BOTTOM,BOTTOM_TOP

(2)添加滑动监控器:###

 Listview ： 

        parallaxListViewController = new ParallaxListViewController(R.id.img);
            listView.setOnScrollListener(parallaxListViewController);
    
 Recylerview:(GridLayoutManager,StaggeredGridLayoutManager,LinearLayoutManager) 
    
             GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);
             mParallaxRecyclerViewController = new ParallaxRecyclerViewController(gridLayoutManager, R.id.img);
             mRecyclerView.setLayoutManager(gridLayoutManager);
             mRecyclerView.addOnScrollListener(mParallaxRecyclerViewController);
             mRecyclerView.setAdapter(recyclerViewAdapter);
             
Tips: StaggeredGridLayoutManager 瀑布流与其他的用法稍微有点不同,如果有需要可以看下demo如何写的。

项目地址

https://github.com/MartinBZDQSM/ParallaxScrollImageView#