使用RecyclerView打造一个相片廊
2018-10-19 本文已影响18人
树獭非懒
这次我们使用RecyclerView这个强大的控件来实现一个相片廊，就是长这个模样
photogallery.gif
一.自定义一个View继承RecyclerView
public class PhotoGalleryView extends RecyclerView implements GalleryItemDecoration.OnItemSizeMeasuredListener{
private static final String TAG = "PhotoGalleryView";
//滑动方式:一次可以滑动多个item
public static final int LINEAR_SNAP_HELPER = 0;
//滑动方式:一次只滑动一个item
public static final int PAGER_SNAP_HELPER = 1;
//默认滑行速度
private int mFlingSpeed=5000;
private GalleryItemDecoration mDecoration;
private ScrollManager mScrollManager;
//图片的默认值
private int mInitPos=-1;
private AnimManager mAnimManager;
public PhotoGalleryView(Context context) {
this(context,null);
}
public PhotoGalleryView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public PhotoGalleryView(Context context, @Nullable AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.PhotoGalleryView);
int helper = ta.getInteger(R.styleable.PhotoGalleryView_helper,LINEAR_SNAP_HELPER);
ta.recycle();
mAnimManager=new AnimManager();
//添加上装饰
attachDecoration();
//选择滑行的方式
attachToRecyclerHelper(helper);
}
help表示滑动的方式，是我们自定义的一个属性，在我们新建的attrs.xml文件中可以看到它有两个值，一个是LinearSnapHelper，另一个是PagerSnapHelper。
<?xml version="1.0" encoding="utf-8"?>
<resources >
<declare-styleable name="PhotoGalleryView">
<attr name="helper" format="string">
<enum name="LinearSnapHelper" value="0" />
<enum name="PagerSnapHelper" value="1" />
</attr>
</declare-styleable>
</resources>
LinearSnapHelper和PagerSnapHelper是什么？
RecyclerView在24.2.0版本中新增了SnapHelper这个辅助类，用于辅助RecyclerView在滚动结束时将Item对齐到某个位置。特别是列表横向滑动时，很多时候不会让列表滑到任意位置，而是会有一定的规则限制，这时候就可以通过SnapHelper来定义对齐规则了。
SnapHelper是一个抽象类，官方提供了一个LinearSnapHelper的子类，可以让RecyclerView滚动停止时相应的Item停留中间位置。25.1.0版本中官方又提供了一个PagerSnapHelper的子类，可以使RecyclerView像ViewPager一样的效果，一次只能滑一页，而且居中显示。**
它的使用方式很简单：
LinearSnapHelper mLinearSnapHelper=new LinearSnapHelper();
mLinearSnapHelper.attachToRecyclerView(mPhotoGalleryView);
如果你想对LinearSnapHelper的实现原理比较好奇，可以看看这位大佬的博客，写的很好:
让你明明白白的使用RecyclerView——SnapHelper详解
二.设置不同图片的间距距离
为了让滑动过程图片的展示显得更美观，我们需要自己设置图片的间距。需要注意的是第一张和最后一张图片，它们的位置比较特殊，一个没有左图片，一个没有右图片。所以在设置间距时需要和其他图片区分开来。
只需要自定义一个ItemDecoration继承RecyclerView.ItemDecoration并重写getItemOffsets方法，在这个方法里面根据不同的图片位置也就是item的position设置不同的间距。
public class GalleryItemDecoration extends RecyclerView.ItemDecoration {
@Override
public void getItemOffsets(Rect outRect, final View itemView, final RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, itemView, parent, state);
final int position=parent.getChildAdapterPosition(itemView);
final int itemCount=state.getItemCount();
parent.post(new Runnable() {
@Override
public void run() {
if(((PhotoGalleryView)parent).getOrientation()== LinearLayoutManager.HORIZONTAL){
onSetHorizontalParams(parent, itemView, position, itemCount);
}else{
onSetVerticalParams(parent, itemView, position, itemCount);
}
}
});
}
private void onSetHorizontalParams(ViewGroup parent, View itemView, int position, int itemCount) {
int itemNewWidth = parent.getWidth() - OsUtil.dpToPx(4 * mPageMargin + 2 * mPageVisibleWidth);
int itemNewHeight = parent.getHeight();
mItemConsumeX = itemNewWidth + OsUtil.dpToPx(2 * mPageMargin);
// 适配第0页和最后一页没有左页面和右页面，让他们保持左边距和右边距和其他项一样
int leftMargin = position == 0 ? OsUtil.dpToPx(mPageVisibleWidth + 2 * mPageMargin) : OsUtil.dpToPx(mPageMargin);
int rightMargin = position == itemCount - 1 ? OsUtil.dpToPx(mPageVisibleWidth + 2 * mPageMargin) : OsUtil.dpToPx(mPageMargin);
Log.d(TAG, "getItemOffsets---> postion="+position+"itemCount="+itemCount+"leftMargin->"+leftMargin);
setLayoutParams(itemView, leftMargin, 0, rightMargin, 0, itemNewWidth, itemNewHeight);
}
三.实现渐变的动画
滑动时，中间图片滑动到左边时从大变小，右边图片滑动到中间时从小变大这个相对来说比较复杂
1.首先可以根据RecyclerView的OnScrollListener来不断获取滑动的距离。
class GalleryScrollerListener extends RecyclerView.OnScrollListener {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
Log.d(TAG, "ScrollManager newState=" + newState);
super.onScrollStateChanged(recyclerView, newState);
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
if (mPhotoGalleryView.getOrientation() == LinearLayoutManager.HORIZONTAL) {
onHorizontalScroll(recyclerView, dx);
} else {
onVerticalScroll(recyclerView, dy);
}
}
}
2.根据滑动的总距离和滑动每一页理论消耗的距离就能够得到图片的position
位置浮点值=总消耗距离 / 每一页理论消耗距离
由于计算的结果是浮点数，把它取整就是这张图片对应的位置。
它的小数点部分就可以取出来作为我们图片伸缩的条件。（这波操作还是很灵性的），
//水平滚动
private void onHorizontalScroll(RecyclerView recyclerView, int dx) {
mConsumeX+=dx;
// 让RecyclerView测绘完成后再调用，避免GalleryAdapterHelper.mItemWidth的值拿不到
recyclerView.post(new Runnable() {
@Override
public void run() {
int shouldConsumeX=mPhotoGalleryView.getDecoration().mItemConsumeX;
// 位置浮点值（即总消耗距离 / 每一页理论消耗距离 = 一个浮点型的位置值）
float offset=(float) mConsumeX/(float) shouldConsumeX;
// 获取当前页移动的百分值
float percent=offset-((int)offset);
mPosition=(int) offset;
Log.i(TAG, "ScrollManager offset=" + offset + "; percent=" + percent + "; mConsumeX=" + mConsumeX + "; shouldConsumeX=" + shouldConsumeX + "; position=" + mPosition);
//设置由大到小的动画
mPhotoGalleryView.getAnimManager().setAnimation(mPhotoGalleryView,mPosition,percent);
}
});
}
3.根据偏移率也是上面说到小数点部分做动画
private void setBottomToTopAnim(RecyclerView recyclerView, int position, float percent) {
View mCurView = recyclerView.getLayoutManager().findViewByPosition(position); // 中间页
View mRightView = recyclerView.getLayoutManager().findViewByPosition(position + 1); // 左边页
View mLeftView = recyclerView.getLayoutManager().findViewByPosition(position - 1); // 右边页
if (percent <= 0.5) {
if (mLeftView != null) {
// 变大
mLeftView.setScaleX((1 - mAnimFactor) + percent * mAnimFactor);
mLeftView.setScaleY((1 - mAnimFactor) + percent * mAnimFactor);
}
if (mCurView != null) {
// 变小
mCurView.setScaleX(1 - percent * mAnimFactor);
mCurView.setScaleY(1 - percent * mAnimFactor);
}
if (mRightView != null) {
// 变大
mRightView.setScaleX((1 - mAnimFactor) + percent * mAnimFactor);
mRightView.setScaleY((1 - mAnimFactor) + percent * mAnimFactor);
}
} else {
if (mLeftView != null) {
mLeftView.setScaleX(1 - percent * mAnimFactor);
mLeftView.setScaleY(1 - percent * mAnimFactor);
}
if (mCurView != null) {
mCurView.setScaleX((1 - mAnimFactor) + percent * mAnimFactor);
mCurView.setScaleY((1 - mAnimFactor) + percent * mAnimFactor);
}
if (mRightView != null) {
mRightView.setScaleX(1 - percent * mAnimFactor);
mRightView.setScaleY(1 - percent * mAnimFactor);
}
}
}
四.实现背景的高斯模糊
为了让不同的图片和同一张背景放一起显得很突兀，不好看。我们可以使用高斯模糊。我们可以直接使用别人写好的高斯模糊类，它用法也是非常简单
/**
* 设置高斯模糊
* @param forceUpdate
*/
private void setBlurImage(boolean forceUpdate) {
BeautifulPhotoAdapter adapter=(BeautifulPhotoAdapter) mPhotoGalleryView.getAdapter();
final int mCurViewPosition=mPhotoGalleryView.getScrolledPosition();
boolean isSamePosAndNotUpdate = (mCurViewPosition == mLastDraPosition) && !forceUpdate;
if (adapter == null || mPhotoGalleryView == null || isSamePosAndNotUpdate) {
return;
}
mPhotoGalleryView.post(new Runnable() {
@Override
public void run() {
}
});
// 获取当前位置的图片资源ID
int resourceId=adapter.getResId(mCurViewPosition);
// 将该资源图片转为Bitmap
Bitmap bitmap= BitmapFactory.decodeResource(getResources(),resourceId);
// 将该Bitmap高斯模糊后返回到resBlurBmp
Bitmap resBlurBmp = BlurBitmapUtil.blurBitmap(mPhotoGalleryView.getContext(),bitmap,15);
// 再将resBlurBmp转为Drawable
Drawable resBlurDrawable = new BitmapDrawable(resBlurBmp);
// 获取前一页的Drawable
Drawable preBlurDrawable = mTSDraCacheMap.get(KEY_PRE_DRAW) == null ? resBlurDrawable : mTSDraCacheMap.get(KEY_PRE_DRAW);
/* 以下为淡入淡出效果 */
Drawable[] drawableArr = {preBlurDrawable, resBlurDrawable};
TransitionDrawable transitionDrawable = new TransitionDrawable(drawableArr);
mContainer.setBackgroundDrawable(transitionDrawable);
transitionDrawable.startTransition(500);
// 存入到cache中
mTSDraCacheMap.put(KEY_PRE_DRAW, resBlurDrawable);
// 记录上一次高斯模糊的位置
mLastDraPosition = mCurViewPosition;
}
这篇文章的内容大多来自这位大佬的写的博客，对于一些细节在他的博客里写的很详细。
看完博客之后，如果想实现这样一个效果，建议先把github上的clone下来，有很多细节需要在源码中细细体会。
github项目地址:
关于我写的RecyclerView系列的其他文章也可以看看哦
1.值得深入学习的控件-RecyclerView（入门篇） https://www.jianshu.com/p/4260f7c6eb94
2.值得深入学习的控件-RecyclerView（进阶篇）
https://www.jianshu.com/p/3e4f3a44ceba3.值得深入学习的控件-RecyclerView（源码解析篇）
https://www.jianshu.com/p/10298503c1344.值得深入学习的控件-RecyclerView（时间轴篇）
https://www.jianshu.com/p/fc1694308f13
突然觉得自己有点像知识的搬运工，啊哈哈[手打滑稽笑]。
