Android自定义View（七）--很low的bannerView

最近公司的项目需要实现类似淘宝、京东首页的广告banner，作为一个专业的“拷贝型”程序猿，在github上搜了一下，还是挺多的，其中还有两个比较好的，扩展性和特效都不错，看得我很是羡慕啊，有兴趣的童鞋请移步：

1.FlycoBanner_Master

2.Android-ConvenientBanner

作为一个长期“拷贝”的程序猿，偶尔还是有点小失落的，偶尔也会有大神梦，即使那么遥不可及。。。
于是乎，在一个月黑风高的夜晚，有史以来最low的广告banner诞生了。

先谈谈整体的思路吧，看到有些大神用AdapterView实现的，而我这种渣，首先想到的就是viewpager，虽然viewpager没有那么完美，不过能勉强将就也还是极好的。

当然只有viewpager是不够的，还有viewpager上面的那几个小点点，这个我就更简单粗暴的用一个Layout装载了结果imageview，然后viewpager改变item的时候，改变小点点的图片就可以啦。

还有一个问题就是循环播放啦，这个就要从viewpager的adapter入手了，上网查了很多，得到的结论就是在adapter的getCount方法上做手脚，即返回一个很大的数，使viewpager的item数量大于你看到的实际数量，而多的item中显示与前面item相同的内容，这样看起来就是循环的啦。

剩下的要解决自动循环就更简单啦，管你用timer还是handler还是thread都可以简单搞定。最后要解决的就是使这个东西用起来比较简单，所以我就简单的对它进行了一层小包装。

主要的视图类

package com.drivingassisstantHouse.library.widget.bannerview;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Interpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Scroller;

import com.drivingassisstantHouse.library.R;
import com.drivingassisstantHouse.library.tools.SLog;
import com.drivingassisstantHouse.library.tools.ToolUnit;

import java.lang.reflect.Field;
import java.util.ArrayList;

/**
 * 包名：com.drivingassisstantHouse.library.widget.bannerview
 * 描述：广告banner
 * 创建者：yankebin
 * 日期：2016/2/27
 */
public class BannerView extends RelativeLayout {
    public static final int BANNER_TYPE_GUIDE = 1;
    public static final int BANNER_TYPE_ADVERT = BANNER_TYPE_GUIDE + 1;

    protected int type = BANNER_TYPE_GUIDE;
    private BaseBannerViewpager viewPager;
    private LinearLayout indicator;
    private boolean isAutoLoop = false;
    private long loopDelayTime = 4000;
    private long scrollDuration=1200;
    private ArrayList<ImageView> dots = new ArrayList<>();

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

    public BannerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.BannerView);
        type = typedArray.getInt(R.styleable.BannerView_bannerType, BANNER_TYPE_GUIDE);
        isAutoLoop = typedArray.getBoolean(R.styleable.BannerView_autoPlay, false);
        loopDelayTime = typedArray.getInt(R.styleable.BannerView_loopTime, 4000);
        scrollDuration=typedArray.getInt(R.styleable.BannerView_scrollDuration, 1200);
        if (null != typedArray) {
            typedArray.recycle();
        }
        init();
    }

    @Override
    protected void onVisibilityChanged(@NonNull View changedView, int visibility) {
        super.onVisibilityChanged(changedView, visibility);
        if (visibility != VISIBLE) {
            removeCallbacks(autoRunner);
        } else {
            if (isAutoLoop) {
                startAutoPlay();
            }
        }
    }

    private Runnable autoRunner = new Runnable() {
        @Override
        public void run() {
            if (!isAutoLoop) {
                return;
            }
            int position=viewPager.getCurrentItem();
            viewPager.setCurrentItem(++position, true);
            postDelayed(this, loopDelayTime);
        }
    };

    private Runnable indicatorRunner=new Runnable() {
        @Override
        public void run() {
            int currentPosition = viewPager.getCurrentItem();
            for (int i = 0; i < dots.size(); i++) {
                ImageView imageView = dots.get(i);
                if (currentPosition % dots.size() == i) {
                    imageView.setImageResource(R.drawable.banner_dot_shape_selected);
                } else {
                    imageView.setImageResource(R.drawable.banner_dot_shape_normal);
                }
            }
        }
    };

    public void setIsAutoLoop(boolean isLoop) {
        this.isAutoLoop = isLoop;
    }

    public boolean isAutoLoop() {
        return isAutoLoop;
    }

    public void setBannerAdapter(PagerAdapter adapter) {
        viewPager.setAdapter(adapter);
    }

    private void init() {
        viewPager = new BaseBannerViewpager(getContext());
        viewPager.setLayoutParams(new LayoutParams(-1, -1));

        indicator = new LinearLayout(getContext());
        LayoutParams params = new LayoutParams(-2, -2);
        params.addRule(ALIGN_PARENT_BOTTOM);
        params.addRule(CENTER_HORIZONTAL);
        params.bottomMargin = 10;
        indicator.setLayoutParams(params);
        indicator.setOrientation(LinearLayout.HORIZONTAL);

        addView(viewPager);
        addView(indicator);

        initPagerListener();
    }

    private void initPagerListener() {
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

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

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }

    private void initDots(int size) {
        if (size <= 0) {
            throw new IllegalArgumentException("size必须大于0");
        }
        removeCallbacks(autoRunner);
        dots.clear();
        LinearLayout.LayoutParams pointViewParams = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        pointViewParams.setMargins(ToolUnit.dipTopx(8), 0,
                ToolUnit.dipTopx(8), ToolUnit.dipTopx(8));

        for (int i = 0; i < size; i++) {
            ImageView pointView = new ImageView(getContext());
            pointView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
            pointView.setLayoutParams(pointViewParams);
            dots.add(pointView);
            indicator.addView(pointView);
        }
        changeDotsColors();
        if (isAutoLoop) {
            startAutoPlay();
        }
    }

    private void startAutoPlay() {
        removeCallbacks(autoRunner);
        postDelayed(autoRunner, loopDelayTime);
    }

    public void changeDotsColors() {
       postDelayed(indicatorRunner,scrollDuration+500);
    }

    private class BaseBannerViewpager extends ViewPager {
        private int childId;

        public class FixedSpeedScroller extends Scroller {
            private int mDuration = (int)scrollDuration;

            public FixedSpeedScroller(Context context) {
                super(context);
            }

            public FixedSpeedScroller(Context context, Interpolator interpolator) {
                super(context, interpolator);
            }

            @Override
            public void startScroll(int startX, int startY, int dx, int dy, int duration) {
                // Ignore received duration, use fixed one instead
                super.startScroll(startX, startY, dx, dy, mDuration);
            }

            @Override
            public void startScroll(int startX, int startY, int dx, int dy) {
                // Ignore received duration, use fixed one instead
                super.startScroll(startX, startY, dx, dy, mDuration);
            }

            public void setmDuration(int time) {
                mDuration = time;
            }

            public int getmDuration() {
                return mDuration;
            }
        }

        public BaseBannerViewpager(Context context) {
            super(context);
            resetScroller(context);
        }

        public BaseBannerViewpager(Context context, AttributeSet attrs) {
            super(context, attrs);
            resetScroller(context);
        }

        private void resetScroller(Context context){
            try {
                Field field = ViewPager.class.getDeclaredField("mScroller");
                field.setAccessible(true);
                FixedSpeedScroller scroller = new FixedSpeedScroller(context,
                        new AccelerateInterpolator());
                field.set(this, scroller);
            } catch (Exception e) {
                SLog.e(e);
            }
        }

        @Override
        public boolean onInterceptTouchEvent(MotionEvent event) {
            if (childId > 0) {
                ViewPager pager = (ViewPager) findViewById(childId);

                if (pager != null) {
                    pager.requestDisallowInterceptTouchEvent(true);
                }

            }
            return super.onInterceptTouchEvent(event);
        }

        public void setAllowChildMovement(int id) {
            this.childId = id;
        }

        @Override
        public void setAdapter(PagerAdapter adapter) {
            initDots(((BaseBannerPagerAdapter)adapter).getRealCount());
            super.setAdapter(adapter);
        }
    }
}

viewpager的adapter

package com.drivingassisstantHouse.library.widget.bannerview;

import android.util.SparseArray;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;

/**
 * 包名：com.simpletour.client.activity
 * 描述：banner适配器
 * 创建者：yankebin
 * 日期：2016/2/27
 */
public abstract class BaseBannerPagerAdapter<T> extends android.support.v4.view.PagerAdapter {
    protected SparseArray<View> views = new SparseArray<>();
    private boolean isLoop;
    protected ArrayList<T> datas;

    public BaseBannerPagerAdapter() {
        datas = new ArrayList<>();
    }

    public BaseBannerPagerAdapter(ArrayList<T> datas) {
        this.datas = datas;
    }

    @Override
    public final int getCount() {
        return isLoop ? Integer.MAX_VALUE : datas.size();
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        position = position % datas.size();
        View view = views.get(position);
        if (view == null) {
            view = newView(position % getCount());
            views.put(position, view);
        }
        container.addView(view);
        return view;
    }

    public void notifyUpdateView(int position) {
        View view = updateView(views.get(position), position);
        views.put(position, view);
        notifyDataSetChanged();
    }

    public View updateView(View view, int position) {
        return view;
    }

    public abstract View newView(int position);

    public final int getRealCount() {
        return datas.size();
    }

    public void subscribe(BannerView bannerView) {
        isLoop =bannerView.isAutoLoop()|| bannerView.type == BannerView.BANNER_TYPE_ADVERT;
        bannerView.setBannerAdapter(this);
    }
}

一些自定义属性

<declare-styleable name="BannerView">
        <attr name="autoPlay" format="boolean"/>
        <attr name="bannerType" format="integer">
            <flag name="typeGuide" value="1"/>
            <flag name="typeAdvert" value="2"/>
        </attr>
        <attr name="loopTime" format="integer"/>
        <attr name="scrollDuration" format="integer"/>
    </declare-styleable>

代码里调用

首先定义好xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.drivingassisstantHouse.library.widget.bannerview.BannerView
        xmlns:banner="http://schemas.android.com/apk/res-auto"
        android:layout_weight="1"
        banner:autoPlay="true"
        banner:loopTime="3000"
        banner:bannerType="typeAdvert"
        banner:scrollDuration="800"
        android:id="@+id/bannerView"
        android:layout_width="match_parent"
        android:layout_height="0dp">

    </com.drivingassisstantHouse.library.widget.bannerview.BannerView>

</LinearLayout>

其次实现BaseBannerPagerAdapter

 private class MBannerPagerAdapter extends BaseBannerPagerAdapter<String> {
        public MBannerPagerAdapter() {
            super(imageUrlList);
            initImageLoader();
        }

        private void initImageLoader() {
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return null != object && object == view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(views.get(position % views.size()));
        }

        @Override
        public View newView(final int position) {
            ImageView imageView = new ImageView(GuideActivity.this);
            imageView.setLayoutParams(new ViewGroup.LayoutParams(-1, -1));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

            ImageLoader.getInstance().displayImage(
                    datas.get(position),
                    imageView);

            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent=new Intent(GuideActivity.this,FloatActivity.class);
                    intent.putExtra("uri", imageUrlList.get(position));
                    Intent newIntent=new Intent(GuideActivity.this,PayDemoActivity.class);
                    intent.putExtra("intent",newIntent);
                    startActivity(intent);
                }
            });

            return imageView;
        }
    }

最后

 new MBannerPagerAdapter().subscribe(bannerView);

这个效果和淘宝、京东的还有差距：

1.对于用户干预滑动的处理，我所能想到就是在touch事件中控制autorunner的执行，至于实现的细节，我还没有想好怎么去弄得更完美。

2.圆点指示器的实现方式，要是着色的圆点可以随viewpager相同的效果滑动而不是瞬间改变颜色就更好了。这个效果我也在viewpager的listener的onpagescrolled方法里尝试过了，但是当人为干预后，圆点就会错位，目前还没想到办法解决，希望有大神可以指点一二。