其实这个控件写了好久，上一周整理完顺手也提交到了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 并添加相关参数:###
<martinbzdqsm.com.parallaxscrollimageview_master.ParallaxImageView
xmlns:parallax="http://schemas.android.com/apk/res-auto"
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
parallax:img_ratio="0.6"
parallax:orientation="bottom_top"
parallax:paralax_ratio="0.2" />
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如何写的。
