用RecyclerView打造一个轮播图(进阶版)

姚丽冰 学号:16050120089

转载:

https://juejin.im/entry/5a154b21f265da431d3c53d6

【嵌牛导读】:前几天写了篇《用RecyclerView打造一个轮播图》(以下简称基础版),看到有读者评论说相比Viewpager,用RecyclerView看起来没什么特别的优势。究其原因,目前只用到了RecyclerView最基础的一部分功能。其实相比Viewpager实现的轮播图,RecyclerView版的最大优势就在于它的灵活多变性,可定制性高。本篇文章将通过利用LayoutManger、SnapHelper等RecyclerView的辅助类来实现一系列更为炫酷的轮播图。

【嵌牛鼻子】:RecyclerView,Viewpager,youtManger,SnapHelper,轮播图

【嵌牛提问】:如何利用LayoutManger、SnapHelper等RecyclerView的辅助类来实现一系列更为炫酷的轮播图。

【嵌牛正文】:

初试:竖直轮播图

基础版中,RecyclerView设置了默认横向的LinearLayoutManager:

LinearLayoutManager indicatorLayoutManager = new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false);

那么我们再来加个属性:

<attr name="orientation" format="enum">

            <enum name="horizontal" value="0"/>

            <enum name="vertical" value="1" />

</attr>

同时在布局文件中设置app:orientation="vertical",让LinearLayoutManager的布局方向变为竖直(为了保持统一,标示点也设置为同一方向),就是这么简单,一款竖直滑动的无限轮播图就打造完成了!

实战:仿魅族轮播图

之前有篇文章ViewPager系列之 仿魅族应用的广告BannerView,不过这是用ViewPager实现的,那我们就来个RecyclerView版的,而实现重点的就在于自定义LayoutManger(如果不太了解这部分的知识,请先移步学习下(╯︵╰))。

这次先上成果图,再慢慢分析:

以上的效果仅仅是换了一个LayoutManger和一个itemview(为了显示效果,imageview外面套了cardview)。

首先我们做准备工作,定义几个常量:

private  float SCALE_RATE ;当前图片放大比例

private  int mOrientation;布局方向(HORIZONTAL or VERTICAL)

private  int itemSpace;图片之间的间距

自定layoutmanager第一步当然是实现唯一必须要实现的方法:

  @Override

    public RecyclerView.LayoutParams generateDefaultLayoutParams() {

        return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,

                ViewGroup.LayoutParams.WRAP_CONTENT);

    }

然而并没有什么用,99%的自定义layoutmanager都是这么写的,因为我们没有把view添加到 RecyclerView中。所以接下来就是重写onLayoutChildren()来进行布局,这个方法的作用相当于普通Viewgroup中的onLayout()方法,在RecyclerView滚动,数据改变等情况都会调用此方法来重新布局。

@Override

    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {

        if (state.getItemCount() == 0) {

            removeAndRecycleAllViews(recycler);

            mOffset = 0;

            return;

        }//没有Itemitemview,不做处理

        ensureLayoutState();

        if (getChildCount() == 0) {//没有可见的itemview,初始化需要用到的一些参数

            View scrap = recycler.getViewForPosition(0);

            measureChildWithMargins(scrap, 0, 0);

            mDecoratedMeasurement = mOrientationHelper.getDecoratedMeasurement(scrap);

            mDecoratedMeasurementInOther = mOrientationHelper.getDecoratedMeasurementInOther(scrap);

            mSpaceMain = (mOrientationHelper.getTotalSpace() - mDecoratedMeasurement) / 2;

            mSpaceInOther = (mOrientationHelper.getTotalSpaceInOther() - mDecoratedMeasurementInOther) / 2;

            mInterval = setInterval();

            setUp();

            mLeftItems = (int) Math.abs(minRemoveOffset() / mInterval) + 1;

            mRightItems = (int) Math.abs(maxRemoveOffset() / mInterval) + 1;

        }

        if (mPendingScrollPosition != NO_POSITION) {

            mOffset = mReverseLayout ?

                    mPendingScrollPosition * -mInterval : mPendingScrollPosition * mInterval;

        }

        //开始布局

        detachAndScrapAttachedViews(recycler);

        layoutItems(recycler);

    }

上面只是做一些初始化工作,接下来是layoutItems方法,就贴一些重要代码:

取当前可见的view进行放置,遍历计算位置

final int currentPos = mReverseLayout ?

                -getCurrentPositionOffset() : getCurrentPositionOffset();

        int start = currentPos - mLeftItems;

        int end = currentPos + mRightItems;

  for (int i = start; i < end; i++) {

    if (findViewByPosition(adapterPosition) == null) {

                    final View scrap = recycler.getViewForPosition(adapterPosition);

                    measureChildWithMargins(scrap, 0, 0);

                    resetViewProperty(scrap);

                    final float targetOffset = getProperty(i) - mOffset;

                    layoutScrap(scrap, targetOffset);

具体的布局方法,主要就是,回收不可见的itemview,遍历可见的itemview进行位置计算并放置:

private void layoutScrap(View scrap, float targetOffset) {

        final int left = calItemLeft(scrap, targetOffset);

        final int top = calItemTop(scrap, targetOffset);

        if (mOrientation == VERTICAL) {

            layoutDecorated(scrap, mSpaceInOther + left, mSpaceMain + top,

                    mSpaceInOther + left + mDecoratedMeasurementInOther, mSpaceMain + top + mDecoratedMeasurement);

        } else {

            layoutDecorated(scrap, mSpaceMain + left, mSpaceInOther + top,

                    mSpaceMain + left + mDecoratedMeasurement, mSpaceInOther + top + mDecoratedMeasurementInOther);

        }

        setItemViewProperty(scrap, targetOffset);

    }

    //在滚动时根据距离动态缩放itemView(在这里你可以自定义滑动动画,改变 itemView的属性,透明度,大小,角度等等)

    private void setItemViewProperty(View itemView, float targetOffset) {

        float scale = calculateScale(targetOffset + mSpaceMain);

        itemView.setScaleX(scale);

        itemView.setScaleY(scale);

    }

接下来是处理滚动,让recyclerview可以滚动起来:

  @Override

    public boolean canScrollHorizontally() {

        return mOrientation == HORIZONTAL;

    }

    @Override

    public boolean canScrollVertically() {

        return mOrientation == VERTICAL;

    }

@Override

    public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {

        //位移0、没有子View 当然不移动

      if (getChildCount() == 0 || dy == 0) {

            return 0;

        }

          int willScroll = dy;

          float realDx = dy / getDistanceRatio();//真正滑动的距离

      // 从新布局可见的view

        for (int i = 0; i < getChildCount(); i++) {

            final View scrap = getChildAt(i);

            final float delta = propertyChangeWhenScroll(scrap) - realDx;

            layoutScrap(scrap, delta);

        }

    }

因为在我们在布局和滚动时考虑了横向和竖向的情况,所以设置竖直的无限轮播图也很简单:

new BannerLayoutManager(BannerLayoutManager.VERTICAL, Util.dp2px(10));(方向竖直,图片间距10dp)

总结

看到这,我想大家都能看到用RecyclerView实现无限轮播图的强大的指出了吧:

adapter可以处理无限轮播;layoutmanager可以处理布局和滑动动画;SnapHelper可以让iremview滑动起来像viewpager一样(一般用PagerSnapHelper就行了)。

而上面的所有动画效果仅仅都是通过改动layoutmanager,然后再通过设置不同itemview,就可以做出各种效果。最后感谢以下文章,上面的实现思路大部分来自于他们。

github地址

参考资料

http://blog.csdn.net/zxt0601/article/details/52956504

http://www.jianshu.com/p/7bb7556bbe10

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容

  • 前言 前几天写了篇《用RecyclerView打造一个轮播图》(以下简称基础版),看到有读者评论说相比Viewpa...
    大头呆阅读 5,722评论 1 13
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,563评论 25 707
  • 这篇文章分三个部分,简单跟大家讲一下 RecyclerView 的常用方法与奇葩用法;工作原理与ListView比...
    LucasAdam阅读 4,320评论 0 27
  • 在高峰时,就要打算 怎么走下坡路了
    胡一飘阅读 81评论 0 0
  • 饺子店里听见了这么一句话"我来这里都快四年了"。听到这句的我不禁在想,到底是什么,让人可以坚持留在深圳四年,而我仅...
    嘉雯雯Karmen阅读 209评论 0 0