android滚动布局图片,Android视图滚动差—ParallaxScrollImageView

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

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

Parallax.gif

实现流程：##

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 并添加相关参数:###

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如何写的。

项目地址