Android轮播图效果的各种实现

前言

很多APP的首页通常会有一个带有动画切换的各种轮播图效果，刚好新项目中也要实现轮播图的效果，于是便研究了Android平台下各种轮播效果，网上也有很多实现轮播相关的方案，但是质量参差不齐，为此踩了不少的坑。下面就来关于轮播图实现方面的一些学习心得，希望对大家有所帮助。

**（一）使用ViewPager实现轮播图切换效果 **

开源项目：Android-Coverflow
GitHub地址：https://github.com/crosswall/Android-Coverflow
其效果如下：

Gif_20170430_114547.gif

**(1)ViewPager切换动画实现原理 **

使用View.PageTransformer实现动画切换效果，ViewPager的动画切换效果都是重写PageTransformer这个类来实现的。PageTransformer方法中就一个transformPage方法，里面有两个参数，viewPager的滑动时的子View，这个很好理解，最难理解的是这个position参数。切换时的动画实现主要靠position来显示。下面来介绍其中含义。

 public interface PageTransformer {
        void transformPage(View page, float position);
    }

ViewPager左右切换时，position的值范围说明：

**(-oo,-1) 相对于左边第一页，其左边的所有页面 **
*** [-1, 0 ) 相对于当前选中页，其左边的第一页**
*** [0, 1 ）相对于当前选中页，其右边第一页 **
[1,+oo）相对于右边第一页，其右边的所有页面

下面举例说明:

**当前ViewPage选中的页为，其右边的页面为B，现在向左滑动A,慢慢由页面A切换到页面B **

**页面A的position值是由 0 慢慢减小到 -1 [0,-1] **
**页面B的position值是由 1 慢慢减小到 0 [1,0] **

**此时页面B为ViewPage当前选中的页面 **

**再向右滑动页面B，慢慢由页面B切换到页面A **

**页面A的position值由 -1 慢慢增加到 0 [-1，0] **
页面B的position值由 0 慢慢增加到 1 [ 0，1]

理解了transformPage方法中position的含义，那么ViewPager动画切换效果的实现就很好理解了。下面是项目中我实现的一个ViewPager切换效果，如果所示：

代码：

public class ZoomPageTransformer implements ViewPager.PageTransformer {
    private static final float MAX_SCALE = 1.0f;

    private static final float MIN_SCALE = 0.85f;//0.85f

    private static final  float MIN_ALPHA = 0.3f;

    private static final String TAG = "PageTransformer";
    @Override
    public void transformPage(View view, float position) {
        //setScaleY只支持api11以上
        if (position < -1) {
            view.setScaleX(MIN_SCALE);
            view.setScaleY(MIN_SCALE);
            view.setAlpha(MIN_ALPHA);//左边的左边的Page
        } else if (position <= 1) {
            float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);
            if (position > 0) {
                view.setTranslationX(-scaleFactor);
            } else if (position < 0) {
                view.setTranslationX(scaleFactor);
            }
            view.setScaleY(scaleFactor);
            view.setScaleX(scaleFactor);

           // float alpha = 1f -  Math.abs(position) * (1 - );

            float alpha = MIN_ALPHA + (1 - MIN_ALPHA) * (1 - Math.abs(position));
            view.setAlpha(alpha);

            Log.i(TAG,"position = " + position + " alpha = " + alpha);

        } else { // (1,+Infinity]

            view.setScaleX(MIN_SCALE);
            view.setScaleY(MIN_SCALE);
            view.setAlpha(MIN_ALPHA);
        }
    }
}

当position的范围在(-oo,-1) 和[1,+oo）时，view的比例缩小MIN_SCALE(0.85f)，透明度缩小到 MIN_ALPHA(0.3f)

当position的范围在 [-1,1]的时候，View的scale值和position绝对值成反比

 float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);
            if (position > 0) {
                view.setTranslationX(-scaleFactor);
            } else if (position < 0) {
                view.setTranslationX(scaleFactor);
            }
            view.setScaleY(scaleFactor);
            view.setScaleX(scaleFactor);

当position的值等于-1或者1的时候，此时View就是左边第一页和右边第一页，此时scale值就是MIN_SCALE(0.85f)
当position的值范围在[-1,0]时，scale的值慢慢由MIN_SCALE变大到MAX_SCALE，也就是说ViewPager右滑动时，左边第一个View是慢慢放大的，直到其放大到MAX_SCALE。
当position的值范围在（0,1]时，scale的值由MAX_SCALE变小到MIN_SCALE，也就是说ViewPager右滑动时，右边第一个View是慢慢缩小的，直到其比例缩放到MIN_SCALE。

透明度变化也是同样一个原理。

**(2)让ViewPager显示多页 **

一般情况下，ViewPager只能显示一页，那如何让其显示多个子页面呢？那就不得不说setClipChildren(false)这个方法了。

默认情况下为setClipChildren(true)，如果子View的布局范围超过了父View，那么它的边界将会被裁减掉，也就是说超过父View的部分是看不到的。
当setClipChildren(false)的情况下，子View的布局范围超过了父View部分将不会被裁减掉，而将会以动画的形式显示出来。

     <me.crosswall.lib.coverflow.core.PagerContainer
        android:id="@+id/pager_container"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:clipChildren="false"
        android:background="?attr/colorPrimary">

        <android.support.v4.view.ViewPager
          android:id="@+id/overlap_pager"
            android:layout_width="300dp"
            android:layout_height="200dp"
            android:layout_gravity="center" />

    </me.crosswall.lib.coverflow.core.PagerContainer>

Layout.xml

<com.mtime.cinema.business.recommend.widget.BannerView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/recommend_banner_height"
    android:clipChildren="false">

    <android.support.v4.view.ViewPager
        android:id="@+id/fragment_recommend_viewPager"
        android:layout_width="@dimen/recommend_banner_image_width"
        android:layout_height="@dimen/recommend_banner_image_height"
        android:layout_centerHorizontal="true"
        android:clipChildren="false" />

    <LinearLayout
        android:id="@+id/fragment_recommend_banner_indicator"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="25dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal" />


</com.mtime.cinema.business.recommend.widget.BannerView>

JAVA代码

/**
 * Created by liuyu on 2017/4/17.
 * 推荐页轮播图控件
 */

public class BannerView extends RelativeLayout {

    private static final String TAG = "BannerView";

    private LinearLayout mBannerIndicator;

    private ViewPager mViewPager;

    private long VIEWPAGER_SWITCH_DURING = 8000;//轮播时间

    private int MSG_START_SCROLL = 100;//消息的名称

    private int mPointRadius;

    private int mPointTotalCount;//小圆点真正个数，有可能接口返回数据记录 < DEFAULT_POINT_COUNT

    private Drawable mNormalColor, mSelectedColor;

    private BannerAdapter mBannerAdapter;
    private int mPointMarginTop;

    public BannerView(Context context) {
        super(context);
        initBanner();
    }

    public BannerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initBanner();
    }

    private void initBanner() {
        this.setClipChildren(false);
        mPointRadius = getContext().getResources().getDimensionPixelSize(R.dimen.recommend_banner_point_radius);
        mPointMarginTop = getContext().getResources().getDimensionPixelSize(R.dimen.recommend_banner_point_margin_top);

        mNormalColor = getResources().getDrawable(R.drawable.bg_shape_recommend_banner_point_normal);
        mSelectedColor = getResources().getDrawable(R.drawable.bg_shape_recommend_banner_point_selected);
    }

    public BannerView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initBanner();
    }

    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == MSG_START_SCROLL) {
                if (mHandler != null) {
                    mHandler.removeMessages(MSG_START_SCROLL);
                    mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);
                    mHandler.sendEmptyMessageDelayed(MSG_START_SCROLL, VIEWPAGER_SWITCH_DURING);
                }
            }
        }
    };


    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mBannerIndicator = (LinearLayout) findViewById(R.id.fragment_recommend_banner_indicator);
        mViewPager = (ViewPager) findViewById(R.id.fragment_recommend_viewPager);
    }

    /**
     * 添加小圆点
     */
    private void addDots(int count) {
        mPointTotalCount = count;
        // mBannerIndicator.removeAllViews();
        Logger.i(TAG, "addDots count = " + count);
        //加点
        for (int i = 0; i < count; i++) {
            ImageView pointView = new ImageView(getContext());

            pointView.setImageDrawable(getResources().getDrawable(R.drawable.bg_shape_recommend_banner_point_normal));
            //点的大小
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(mPointRadius * 2, mPointRadius * 2);
            //点的间隔
            layoutParams.leftMargin = mPointRadius * 2;
            //居中显示
            layoutParams.topMargin = mPointMarginTop;

            Logger.i(TAG, "addDots index = " + i);

            pointView.setLayoutParams(layoutParams);
            //把点添加到容器中
            mBannerIndicator.addView(pointView);
        }

    }

    /**
     * @param dataList
     */
    public void show(List<BannerBean> dataList) {

        Logger.i(TAG, "start show banner");

        if (dataList == null || dataList.size() == 0) {
            return;
        }

      /*  if (mViewPager.getChildCount() > 0 && mBannerIndicator.getChildCount() > 0) {
            mBannerAdapter.notifyDataSetChanged();
        }*/


        //重置数据

        if (mViewPager.getChildCount() > 0) {
            mViewPager.removeAllViews();
        }

        if (mBannerIndicator.getChildCount() > 0) {
            mBannerIndicator.removeAllViews();
        }


        addDots(dataList.size());

        /**** 重要部分  ******/
        //clipChild用来定义他的子控件是否要在他应有的边界内进行绘制。 默认情况下，clipChild被设置为true。 也就是不允许进行扩展绘制。
        mViewPager.setClipChildren(false);
        //父容器一定要设置这个，否则看不出效果


        //mViewPager.setPageMargin(getResources().getDimensionPixelOffset(R.dimen.recommend_banner_image_space));

        mViewPager.setOffscreenPageLimit(5);


        final List<String> imageList = new ArrayList<>();
      //add image url

        mBannerAdapter = new BannerAdapter(getContext(), dataList);
        mBannerAdapter.setImageList(imageList);

        mViewPager.setAdapter(mBannerAdapter);

        int currentItem = Integer.MAX_VALUE / 2;

        mViewPager.setCurrentItem(currentItem);

        changeIndicatorStatus(currentItem);

        //设置ViewPager切换效果，即实现画廊效果
        mViewPager.setPageTransformer(true, new ZoomPageTransformer());


        //将容器的触摸事件反馈给ViewPager
        this.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                // dispatch the events to the ViewPager, to solve the problem that we can swipe only the middle view.
                return mViewPager.dispatchTouchEvent(event);
            }

        });
        //图片数量大于1的时候，才进行自动轮播
        if (dataList.size() > 1) {
            startAutoScroll();
        }

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                changeIndicatorStatus(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }


    /**
     * 开始自动切换
     */
    public void startAutoScroll() {
        if (mHandler != null) {
            mHandler.removeMessages(MSG_START_SCROLL);
            mHandler.sendEmptyMessageDelayed(MSG_START_SCROLL, VIEWPAGER_SWITCH_DURING);
        }
    }

    /**
     * 停止自动切换
     */
    public void stopScroll() {
        mHandler.removeMessages(MSG_START_SCROLL);
    }

    public void changeIndicatorStatus(int position) {
        if (position == 0) {
            return;
        }

        int realPos = position % mPointTotalCount;

        for (int i = 0; i < mPointTotalCount; i++) {
            if (i == realPos) {
                ((ImageView) mBannerIndicator.getChildAt(i)).setImageDrawable(mSelectedColor);
            } else {
                ((ImageView) mBannerIndicator.getChildAt(i)).setImageDrawable(mNormalColor);
            }
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        clear();
    }

    /**
     * 数据清理
     */
    public void clear() {
        if (mHandler != null) {
            mHandler.removeCallbacksAndMessages(null);
        }
    }
}

（二）使用FancyCoverFlow实现轮播图切换效果

Github地址：https://github.com/davidschreiber/FancyCoverFlow

(1) FancyCoverFlow的使用

Java代码

    this.fancyCoverFlow.setUnselectedAlpha(0.0f);

         // 未选中的饱和度
         this.fancyCoverFlow.setUnselectedSaturation(0.0f);

         // 未选中的比例
         this.fancyCoverFlow.setUnselectedScale(0.8f);

         // child间距
         this.fancyCoverFlow.setSpacing(-60);

         // 旋转度数
         this.fancyCoverFlow.setMaxRotation(0);

         // 非选中的重心偏移,负的向上
         this.fancyCoverFlow.setScaleDownGravity(-1f);

         // 作用距离
         this.fancyCoverFlow.setActionDistance(FancyCoverFlow.ACTION_DISTANCE_AUTO);

XML布局文件

<at.technikum.mti.fancycoverflow.FancyCoverFlow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        fcf:maxRotation="45"
        fcf:unselectedAlpha="0.3"
        fcf:unselectedSaturation="0.0"
        fcf:unselectedScale="0.4" />

(2) 实现无限循环效果

FancyCoverFlow是通过继承Galley实现的，那么我们可以利用Galley的setSelection()方法实现一些特殊的效果，例如打造无限循环的录播图。

FancyCoverFlowSampleAdapter.java

public class FancyCoverFlowSampleAdapter extends FancyCoverFlowAdapter {

    // =============================================================================
    // Private members
    // =============================================================================

    private int[] images = {
            R.drawable.image1,  R.drawable.image2,  R.drawable.image3,
            R.drawable.image6, R.drawable.image5,  R.drawable.image4

           };

    // =============================================================================
    // Supertype overrides
    // =============================================================================

    @Override
    public Integer getItem(int i) {
        return images[ i];
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }

    @Override
    public View getCoverFlowItem(int i, View reuseableView, ViewGroup viewGroup) {
        ImageView imageView = null;

        if (reuseableView != null) {
            imageView = (ImageView) reuseableView;
        } else {
            imageView = new ImageView(viewGroup.getContext());
            imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
            imageView.setLayoutParams(new FancyCoverFlow.LayoutParams(300, 400));

        }

        imageView.setImageResource(this.getItem(i % images.length));
        return imageView;
    }


}

MainActivity.java


        this.fancyCoverFlow = (FancyCoverFlow) this.findViewById(R.id.fancyCoverFlow);

        this.fancyCoverFlow.setAdapter(new FancyCoverFlowSampleAdapter());
        this.fancyCoverFlow.setUnselectedAlpha(1.0f);
        this.fancyCoverFlow.setUnselectedSaturation(0.0f);
        this.fancyCoverFlow.setUnselectedScale(0.6f);
        this.fancyCoverFlow.setSpacing(-20);
        this.fancyCoverFlow.setMaxRotation(40);
        this.fancyCoverFlow.setScaleDownGravity(0.2f);
        this.fancyCoverFlow.setActionDistance(FancyCoverFlow.ACTION_DISTANCE_AUTO);
        this.fancyCoverFlow.setSelection(Integer.MAX_VALUE/2);

效果如下：

Gif_20170514_171512.gif

(三)使用RecyclerCoverFlow实现轮折叠的轮播图效果

Github地址：https://github.com/ChenLittlePing/RecyclerCoverFlow

效果如下：

Gif_20170514_172656.gif

** (1) RecyclerCoverFlow的使用**

xml布局

    <recycler.coverflow.RecyclerCoverFlow
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    </recycler.coverflow.RecyclerCoverFlow>

Activity中引入

 mList = (RecyclerCoverFlow) findViewById(R.id.list);
    //        mList.setFlatFlow(true); //平面滚动
    mList.setAdapter(new Adapter(this));
    mList.setOnItemSelectedListener(new CoverFlowLayoutManger.OnSelected() {
        @Override
        public void onItemSelected(int position) {
            ((TextView)findViewById(R.id.index)).setText((position+1)+"/"+mList.getLayoutManager().getItemCount());
        }
    });

(2) 实现原理

RecyclerCoverFlow是通过集成RecyclerView实现的，由于默认情况下，ViewGroup中的子view绘制顺序，index越大，其绘制顺序会越靠后，所以后面的子View会遮住前面的子view，导致居中显示的子View右边重叠部分会被靠后的子View遮住。


    @Override
    protected int getChildDrawingOrder(int childCount, int i) {
        int center = getCoverFlowLayout().getCenterPosition()
                - getCoverFlowLayout().getFirstVisiblePosition(); //计算正在显示的所有Item的中间位置
        if (center < 0) center = 0;
        else if (center > childCount) center = childCount;
        int order;
        if (i == center) {
            order = childCount - 1;
        } else if (i > center) {
            order = center + childCount - 1 - i;
        } else {
            order = i;
        }
        return order;
    }

最后编辑于：2017.12.07 01:54:53

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,311评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,339评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,671评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,252评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,253评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,031评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,340评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,973评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,466评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,937评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,039评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,701评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,254评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,259评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,485评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,497评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,786评论 2赞 345

Android轮播图效果的各种实现

前言

推荐阅读更多精彩内容