造轮子：android自定义专属广告轮播控件

背景

纵观市面上的android app，出现各式各样的广告轮播效果，然而实现却大同小异，为了适应各类需求，我们需要自己造轮子。

目的

造能随需求变化的广告轮播轮子

主题

造一个自定义专属广告轮播控件，有很多很多实现方式，如Viewpager、ViewFlipper等。接下来笔者就从ViewFlipper实现来造一个广告轮播控件。
首先我们写一个CycleViewPager类继承FrameLayout并实现手势监听接口，代码如下图所示：

public class CycleViewPager extends FrameLayout implements GestureDetector.OnGestureListener

接下来实现当前自定义控件的构造方法并初始化view，代码如下图所示：

    /**
     * 初始化View
     * @author leibing
     * @createTime 2016/09/05
     * @lastModify 2016/09/05
     * @param context 上下文
     * @return
     */
    private void initView(Context context) {
        View view = LayoutInflater.from(context).inflate(R.layout.layout_cycle_view, null);
        // FindView
        mCycleViewVf = (ViewFlipper) view.findViewById(R.id.vf_cycle_view);
        mIndicatorsLy = (LinearLayout) view.findViewById(R.id.ly_indicators);
        // 初始化手势
        detector = new GestureDetector(this);
        // 动画效果
        leftInAnimation = AnimationUtils.loadAnimation(context, R.anim.left_in);
        leftOutAnimation = AnimationUtils.loadAnimation(context, R.anim.left_out);
        rightInAnimation = AnimationUtils.loadAnimation(context, R.anim.right_in);
        rightOutAnimation = AnimationUtils.loadAnimation(context, R.anim.right_out);
        this.addView(view);
    }

从上面代码可知，实例化了一个view，并将该view添加作为当前控件的子view，还做了手势初始化，动画效果初始化。

接下来看重头戏，主要是将当前控件的touch事件转交给手势事件处理，代码如下：

  @Override
    public boolean onTouchEvent(MotionEvent event) {
        // touch事件交给手势处理
        return this.detector.onTouchEvent(event);
    }

接下来我们就可以在手势事件的onFling方法中进行手动滑动处理，代码如下：

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float v, float v1) {
        if(e1.getX()-e2.getX()>120){
            // 向右滑动
            onFlingRight();
            return true;
        }else if(e1.getX()-e2.getY()<-120){
            // 向左滑动
            onFlingLeft();
            return true;
        }
        return false;
    }

如何开启自动轮播？
自定义一个Runable，通过Handler.postDelayed方法即可实现自动轮播。
代码如下：

    // 执行自动轮播
    private Runnable mAutoRotationRunnable = new Runnable() {
        @Override
        public void run() {
            if (!isStopAuto) {
                onFlingRight();
                mHandler.postDelayed(mAutoRotationRunnable, autoRotationTime);
            }
        }
    };
    
    /**
     * 启动自动轮播
     * @author leibing
     * @createTime 2016/09/02
     * @lastModify 2016/09/02
     * @param time 自动轮播的间隔时间 单位为毫秒
     * @return
     */
    public void startAutoRotation(int time){
        isStopAuto = false;
        isAuto = true;
        if (time == 0)
            autoRotationTime = AUTO_ROTATION_TIME;
        else
            autoRotationTime = time;
        if (mHandler == null)
            mHandler = new Handler();
        else {
            if (mAutoRotationRunnable != null)
                mHandler.removeCallbacks(mAutoRotationRunnable);
        }
        mHandler.postDelayed(mAutoRotationRunnable, time);
    }
    

感谢评论君的提议，效果图添加如下：

imageswitch.gif

广告轮播造轮子已经分析完了，童鞋们，是不是很简单？
本项目已在github开源，地址：imageSwitcher demo

如有疑问，请联系。

• QQ：872721111
• email：[email protected]
• github:leibing@github