Android轮播图

Posted 2020-09-12 魏超

轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考
目前测试图片为mipmap中的图片 没有写从网络加载图片 可自行根据需求在getShowView()方法中修改

1.定时切换

通过handle延时发送通知改变界面 然后在切换viewpage的界面之后 再次发送此延时通知 就ok咯 还可以通过timer定时器实现

2.无限轮播效果

如果我们只是在自动轮播到最后一页 然后进行判断让切换到第一页 这样是可以实现轮播的效果
但是 有两个问题

1. 切换从最后一页切换到第一页的时候有一个很明显的回滚效果 不是我们想要的
2. 当我们手动滑动的时候 在第一页和最后一页的时候 无法继续左右滑动 因为已经没有下一页了

先看张图（偷来的）

不得不说这位兄弟的图p的很形象 简直完美

虽然看到的是三张图 实际上是五张 数据多的时候也按照这种方式添加数据 当view4的时候自动切换到view5时 进行判断让到切换到view2 这样造成的感觉就是最后一张下来是第一张
我们利用viewpage自带的方法切换界面立即切换没有滚动效果 当图片一样的时候是看不出图片变化的
setCurrentItem(int item, boolean smoothScroll)
第二个参数设置false 界面切换的时候无滚动效果 默认true

好啦 接下来看代码

public class BannerViewPager extends FrameLayout {

    private ViewPager viewPager;
    private TextView tvTitle;
    private LinearLayout indicatorGroup;
    private BannerAdapter adapter;
    private List<String> titles;//标题集合
    private List imageUrls;//图片数据
    private List<View> views;//轮播图显示
    private ImageView [] tips;//保存显示的小圆点
    private int count;//保存imageUrls的总数
    private int bannerTime=2500;//轮播图的间隔时间
    private int currentItem=0;//轮播图的当前选中项
    private long releaseTime = 0;//保存触发时手动滑动的时间 进行判断防止滑动之后立即轮播
    private final int START=10;
    private final int STOP=20;
    private Context context;
    private Handler handler;

    private final Runnable runnable=new Runnable() {
        @Override
        public void run() {
            long now=System.currentTimeMillis();
            if (now-releaseTime>bannerTime-500){
                handler.sendEmptyMessage(START);
            }else{
                handler.sendEmptyMessage(STOP);
            }
        }
    };


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

    public BannerViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
        titles=new ArrayList<>();
        titles.add("标题1");
        titles.add("标题2");
        titles.add("标题3");
        imageUrls=new ArrayList();
        views=new ArrayList<>();
        init(context,attrs);
    }


    private void init(final Context context, AttributeSet attrs){
        View view= LayoutInflater.from(context).inflate(R.layout.layout_banner,this);
        viewPager= (ViewPager) view.findViewById(R.id.banner_view_pager);
        tvTitle= (TextView) view.findViewById(R.id.banner_title);
        indicatorGroup= (LinearLayout) view.findViewById(R.id.banner_indicator);
        handler=new Handler(){
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                switch (msg.what){
                    case START:
                        viewPager.setCurrentItem(currentItem+1);
                        handler.removeCallbacks(runnable);
                        handler.postDelayed(runnable,bannerTime);
                        break;
                    case STOP:
                        releaseTime=0;
                        handler.removeCallbacks(runnable);
                        handler.postDelayed(runnable,bannerTime);
                        break;
                }
            }
        };
    }

    /**
     * 初始化数据 以及拿到数据后的各种设置
     * 可以是网络地址  也可是项目图片数据
     * @param imageUrls
     */
    public void setData(List<?> imageUrls){
        this.imageUrls.clear();
        this.count=imageUrls.size();
        this.imageUrls.add(imageUrls.get(count-1));
        this.imageUrls.addAll(imageUrls);
        this.imageUrls.add(imageUrls.get(0));

        initIndicator();
        getShowView();
        setUI();
    }

    /**
     * 设置标题
     * @param titles
     */
    public void setTitles(List<String> titles){
        this.titles.clear();
        this.titles.addAll(titles);
    }
    /**
     * 设置小圆点指示器
     */
    private void initIndicator(){
        tips=new ImageView[count];
        LinearLayout.LayoutParams layoutParams = new LinearLayout.
                LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        layoutParams.height=10;
        layoutParams.width=10;
        layoutParams.leftMargin = 5;// 设置点点点view的左边距
        layoutParams.rightMargin = 5;// 设置点点点view的右边距
        for (int i=0;i<count;i++){
            ImageView imageView=new ImageView(context);
            if (i == 0) {
                imageView.setBackgroundResource(R.drawable.shape_circle_red);
            } else {
                imageView.setBackgroundResource(R.drawable.shape_circle_white);
            }

            tips[i] = imageView;
            indicatorGroup.addView(imageView, layoutParams);
        }
    }

    /**
     * 获取显示图片view
     */
    private void getShowView(){
        for (int i=0;i<imageUrls.size();i++){
            ImageView imageView=new ImageView(context);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            if (imageUrls.get(i) instanceof String){

            }else{
                imageView.setImageResource((Integer) imageUrls.get(i));
            }
            views.add(imageView);
        }
    }

    /**
     * 设置UI
     */
    private void setUI(){
        adapter=new BannerAdapter();
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(onPageChangeLis);
        viewPager.setCurrentItem(1);
        handler.postDelayed(runnable,bannerTime);
    }

    /**
     * viewPage改变监听
     */
    private ViewPager.OnPageChangeListener onPageChangeLis=new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            //计算当前页的下标
            int max = views.size() - 1;
            int temp = position;
            currentItem = position;
            if (position == 0) {
                currentItem = max - 1;
            } else if (position == max) {
                currentItem = 1;
            }
            temp = currentItem - 1;
            setIndicatorAndTitle(temp);
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            currentItem=viewPager.getCurrentItem();
            switch (state) {
                case 0:
                    //Log.e("aaa","=====静止状态======");
                    if (currentItem == 0) {
                        viewPager.setCurrentItem(count, false);
                    } else if (currentItem == count + 1) {
                        viewPager.setCurrentItem(1, false);
                    }
                    break;
                case 1:
//                Log.e("aaa","=======手动拖拽滑动时调用====");
                    releaseTime = System.currentTimeMillis();
                    if (currentItem == count + 1) {
                        viewPager.setCurrentItem(1, false);
                    } else if (currentItem == 0) {
                        viewPager.setCurrentItem(count, false);
                    }
                    break;
                case 2:
//                Log.e("aaa","=======自动滑动时调用====");
                    break;
            }
        }
    };



    /**
     * 设置指示器和标题切换
     * @param position
     */
    private void setIndicatorAndTitle(int position){
        tvTitle.setText(titles.get(position));

        for (int i=0;i<tips.length;i++){
            if (i==position){
                tips[i].setBackgroundResource(R.drawable.shape_circle_red);
            }else{
                tips[i].setBackgroundResource(R.drawable.shape_circle_white);
            }
        }
    }

    /**
     * 适配器
     */
    class BannerAdapter extends PagerAdapter{
        @Override
        public int getCount() {
            return views.size();
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(views.get(position));
            return views.get(position);
        }

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

Activity代码

BannerViewPager banner= (BannerViewPager) findViewById(R.id.banner);
        List<Integer> imageUrl=new ArrayList<>();
        imageUrl.add(R.mipmap.aiyo);
        imageUrl.add(R.mipmap.dipang1);
        imageUrl.add(R.mipmap.ic_launcher);
        banner.setData(imageUrl);

最后提供两个github上大神封装好的轮播图

建议不太会的同学先搞清楚基本的逻辑在使用第三方库

https://github.com/youth5201314/banner
https://github.com/bingoogolapple/BGABanner-Android