Android基础控件——Banner轮播图的无限循环轮播功能、手动滑动功能

Banner轮播图的无限循环轮播功能、手动滑动功能

轮播图实现：（假如5张图轮播）

1、在List中存好这5张图，传到ViewPager的Adapter中，相当于5张图片横铺在ViewPager控件中。

2、设置ViewPager一开始的起始位置为5*1000=5000，并用seletedBanner记录该位置。

3、在PagerAdapter中将其getCount方法返回Integer的最大值，让它向左向右滑都不会越界。

4、在PagerAdapter中必须对当前位置%5（由于5张图，%5结果在0-4之间，刚好是图片集合的下标，如5002%5=2，就是List[2]中的对象）。

5、ViewPager监听滚动事件，用seletedBanner记录新位置。

6、在onResume中开始轮播。

圆点实现：

1、在一个水平的布局中添加5个圆点View对象，并存入一个List中。

2、遍历圆点List，在ViewPager滚动回调中判断seletedBanner（当前位置）%5，则该得到的值为选中圆点，其他为未选中圆点。

其效果图：

实现步骤

1、自定义RelativeLayout，编写固定的构造方法

public class MyBannerView extends RelativeLayout implements View.OnTouchListener, ViewPager.OnPageChangeListener {

    public MyBannerView(Context context) {
        this(context, null);
    }

    public MyBannerView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyBannerView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //初始化工作
        initBannerViews(context, attrs, defStyleAttr);
    }
}

2、声明需要用到的变量

    //轮播图控件
    private ViewPager targetVp;
    //轮播图集合
    private ArrayList<View> bannerList;
    //指示器图集合
    private ArrayList<View> indicationList;
    //上下文
    private Context context;
    //当前轮播图位置
    private int selectedBanner;
    //提示轮播
    private final static int BANNER_CHANGE = 0;
    //是否为网络图片加载，作用是：如果是网络图片加载就不滚动轮播图，让用户自己手动滑动轮播图
    boolean isNetImg = false;

3、初始化用到的组件

    private void initBannerViews(Context context, AttributeSet attrs, int defStyleAttr) {
        this.context = context;
        //初始化ViewPager
        targetVp = new ViewPager(context);
        targetVp.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        targetVp.setOnTouchListener(this);
        targetVp.setOnPageChangeListener(this);
        //添加到View中
        addView(targetVp);
    }

4、提供方法加载图片和指示器

这里有两个方法，加载本地图片和加载网络图片，加载网络图片用到Glide第三方框架，Glide的学习可以查看我的博客

    /**
     * 在本地Drawable中加载轮播图
     *
     * @param activity
     * @param img_urls 轮播图drawable的ID
     */
    public void initShowImageForLocal(Activity activity, int[] img_urls) {
        //指示器布局
        LinearLayout ly_indication = new LinearLayout(activity);
        LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        //指示器边距
        params.bottomMargin = 15;
        //指示器位置
        params.addRule(ALIGN_PARENT_BOTTOM);
        params.addRule(CENTER_HORIZONTAL);
        //添加到View中
        addView(ly_indication, params);
        //图片集合和指示器集合
        bannerList = new ArrayList<View>();
        indicationList = new ArrayList<View>();
        for (int i = 0; i < img_urls.length; i++) {
            //初始化图片
            ImageView iv = new ImageView(activity);
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            iv.setBackgroundResource(img_urls[i]);
            bannerList.add(iv);
            //初始化指示器
            ImageView iv2 = new ImageView(activity);
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            lp.setMargins(8, 0, 0, 0);
            iv2.setLayoutParams(lp);
            //初始化指示器默认为第一张高亮
            if (i == 0) {
                iv2.setBackgroundResource(R.drawable.home_top_ic_point_on);
            } else {
                iv2.setBackgroundResource(R.drawable.home_top_ic_point_off);
            }
            indicationList.add(iv2);
            //添加到圆点布局
            ly_indication.addView(iv2);
        }
        //初始化轮播Adapter
        HomeBannerAdapter bannerAdapter = new HomeBannerAdapter(bannerList, activity);
        targetVp.setAdapter(bannerAdapter);
        //初始化当前位置
        targetVp.setCurrentItem(bannerList.size() * 1000);
        //当前position
        selectedBanner = bannerList.size() * 1000;
    }

    /**
     * 通过网络Url加载轮播图
     *
     * @param activity
     * @param img_urls 网络图片的URL
     */
    public void initShowImageForNet(Activity activity, List<String> img_urls) {
        //标识是网络加载
        isNetImg = true;
        //指示器布局
        LinearLayout ly_indication = new LinearLayout(activity);
        LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        // 指示器边距
        params.bottomMargin = 15;
        //指示器位置
        params.addRule(ALIGN_PARENT_BOTTOM);
        params.addRule(CENTER_HORIZONTAL);
        //添加到View中
        addView(ly_indication, params);
        //图片集合和指示器集合
        bannerList = new ArrayList<View>();
        indicationList = new ArrayList<View>();
        for (int i = 0; i < img_urls.size(); i++) {
            //初始化图片
            ImageView iv = new ImageView(activity);
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            GlideUtils.setImageView(context, img_urls.get(i), iv);
            bannerList.add(iv);
            //初始化指示器
            ImageView iv2 = new ImageView(activity);
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            lp.setMargins(8, 0, 0, 0);
            iv2.setLayoutParams(lp);
            if (i == 0) {
                iv2.setBackgroundResource(R.drawable.home_top_ic_point_on);
            } else {
                iv2.setBackgroundResource(R.drawable.home_top_ic_point_off);
            }
            indicationList.add(iv2);
            //添加到圆点布局
            ly_indication.addView(iv2);
        }
        //初始化轮播数据
        HomeBannerAdapter bannerAdapter = new HomeBannerAdapter(bannerList, activity);
        targetVp.setAdapter(bannerAdapter);
        //初始化当前位置
        targetVp.setCurrentItem(bannerList.size() * 1000);
        //当前position
        selectedBanner = bannerList.size() * 1000;
    }

5、实现监听事件

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        //改变当前位置指针
        selectedBanner = position;
        //改变指示器变化
        bannerPointLight(position % indicationList.size());
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }


    @Override
    public boolean onTouch(View v, MotionEvent event) {
        //如果是网络加载则没必要监听
        if (isNetImg) {
            return false;
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //结束轮播
                mHandler.removeCallbacksAndMessages(null);
                break;
            case MotionEvent.ACTION_UP:
                //开启轮播
                mHandler.sendEmptyMessageDelayed(BANNER_CHANGE, 3000);
                break;
            case MotionEvent.ACTION_CANCEL:
                //开启轮播
                mHandler.sendEmptyMessageDelayed(BANNER_CHANGE, 3000);
                break;
        }
        return false;
    }

6、提供开启轮播和结束轮播的方法

    /**
     * 开始轮播
     */
    public void startBanner() {
        //开启轮播
        mHandler.sendEmptyMessageDelayed(BANNER_CHANGE, 3000);
    }

    /**
     * 结束轮播
     */
    public void endBanner() {
        //结束轮播
        mHandler.removeCallbacksAndMessages(null);
    }

7、处理轮播

    /**
     * 消息处理器
     */
    private Handler mHandler = new Handler() {
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case BANNER_CHANGE:
                    //形成轮播循环
                    targetVp.setCurrentItem(selectedBanner + 1);
                    mHandler.sendEmptyMessageDelayed(BANNER_CHANGE, 3000);
                    break;
            }
        }
    };

8、编写HomeBannerAdapter

    /**
     * 适配器
     */
    public class HomeBannerAdapter extends PagerAdapter {

        private List<View> views;
        private Context context;

        public HomeBannerAdapter(List<View> views, Context context) {
            this.context = context;
            this.views = views;
        }

        public Object instantiateItem(View container, int position) {
            final int currentItem = position % views.size();
            ((ViewPager) container).addView(views.get(currentItem));
            return views.get(currentItem);
        }

        public void destroyItem(View container, int position, Object object) {
            ((ViewPager) container).removeView((View) object);
        }

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

        public boolean isViewFromObject(View arg0, Object arg1) {
            return (arg0 == arg1);
        }
    }

9、编写两个圆点的xml文件

① 红点

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="#FF5000"/>

    <stroke
        android:width="0.1dp"
        android:color="#8888" />
    <size
        android:width="6dp"
        android:height="6dp" />
</shape>

② 灰点

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="#88ffffff"/>

    <stroke
        android:width="0.1dp"
        android:color="#8888" />
    <size
        android:width="6dp"
        android:height="6dp" />
</shape>

10、接着就可以在Acitivity中使用我们的自定义的BannerView

① 编写布局文件，使用我们的自定义BannerView

        <com.handsome.didi.View.MyBannerView
                android:id="@+id/vp_banner"
                android:layout_width="match_parent"
                android:layout_height="120dp" />

② 在代码中找到对应ID控件，并且初始化

vp_banner = findView(R.id.vp_banner);
vp_banner.initShowImageForNet(getActivity(), new ArrayList<String>{"","","",""});

③ 开启轮播和停止轮播

    @Override
    public void onResume() {
        super.onResume();
        //开始轮播
        vp_banner.startBanner();
    }

    @Override
    public void onPause() {
        super.onPause();
        //停止轮播
        vp_banner.endBanner();
    }

源码下载

源码下载说明

1、网络图片加载要用到第三库Glide

2、网络加载默认是不会自动轮播的，如果需要自动轮播需要将if(isNetImg){return false};去掉