美文网首页android开发效果Android开发
【Android】三行代码实现一个轮播BannerView

【Android】三行代码实现一个轮播BannerView

作者: blink_dagger | 来源:发表于2017-03-21 09:22 被阅读13143次

    自己简单封装了一个带hint的轮播ViewPager,用来展示app首页的Banner,先看效果图吧。

    ezgif-1-437f7aee24.gif

    具体源码及demo地址

    • dependencies(依赖)
    compile 'com.coldmoqiuli:banners:1.0.0'
    

    使用起来非常方便~~2至3行代码就能实现上述效果,只要传入一个list就可以(其中是你需要展示的ImageView),当然也可以自己在这基础上添加各种Transform动画。

            bannerView = (BannerView) findViewById(R.id.banner);
            bannerView.setViewList(viewList);
            bannerView.startLoop(true);
    

    实现原理相信大家应该都知道,就是可能懒得去封装这种东西。

    具体思路:

      1. 继承自FrameLayout,在下层填充一个ViewPager
    • 2.根据ViewPager的itemCount去动态生成底部hint小圆点

               if (mLinearPosition.getChildCount() != viewSize) {
                    int diffCnt = mLinearPosition.getChildCount() - viewSize;
                    boolean needAdd = diffCnt < 0;
                    diffCnt = Math.abs(diffCnt);
                    for (int i = 0; i < diffCnt; i++) {
                        if (needAdd) {
                            ImageView img = new ImageView(getContext());
                            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                            layoutParams.rightMargin = getResources().getDimensionPixelOffset(R.dimen.dimen_9dp);
                            img.setLayoutParams(layoutParams);
                            img.setBackgroundResource(R.drawable.banner_point);
                            mLinearPosition.addView(img);
                        } else {
                            mLinearPosition.removeViewAt(0);
                        }
                    }
                }
    
    • 3.通过Handler去控制轮播的频率,重新设置ViewPager的currentItem以及hint小圆点的背景
    private static class BannerHandler extends Handler {
            private WeakReference<BannerView> weakReference = null;
    
            public BannerHandler(BannerView bannerView) {
                super(Looper.getMainLooper());
                this.weakReference = new WeakReference<BannerView>(bannerView);
            }
    
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                if (this.weakReference == null) {
                    return;
                }
                BannerView bannerView = this.weakReference.get();
                if (bannerView == null || bannerView.mViewPager == null || bannerView.mViewPager.getAdapter() == null || bannerView.mViewPager.getAdapter().getCount() <= 0) {
                    sendEmptyMessageDelayed(MSG_LOOP, LOOP_INTERVAL);
                    return;
                }
                int curPos = bannerView.mViewPager.getCurrentItem();
                curPos = (curPos + 1) % bannerView.mViewPager.getAdapter().getCount();
                bannerView.mViewPager.setCurrentItem(curPos);
                sendEmptyMessageDelayed(MSG_LOOP, LOOP_INTERVAL);
            }
        }
    
    • 4.具体细节,如无限轮播adapter的创建,handler中的弱引用,启动销毁loop等等

    相关文章

      网友评论

      • pupil_code:那么漂亮的妹子 没人感兴趣吗 给我来个地址
      • 095aef7ff6af:大神,怎么给他设置按键监听
      • 淡入星空:支持,好用
      • 筱宓dawnLing:楼主,size=1的时候会滑动到空白页,怎么取消或者控制?
        blink_dagger:@筱宓 hello~刚跑了个demo,发现1的时候应该不会滑动的,因为我强制在adapter里return 1;了,当size == 2时如果想避免滑动白屏问题,可以这么修改:
        public void setViewList(List<YourImageBean> viewList) {
        this.viewList = viewList;
        if (viewList != null && viewList.size() != 0) {
        viewSize = viewList.size();
        if (viewSize == 2) {
        viewList.add(viewList.get(0));
        viewList.add(viewList.get(1));
        }
        }
        List<View> imageViews = new ArrayList<>();
        for (int i = 0; i < viewList.size(); i++) {
        ImageView image = new ImageView(getContext());
        image.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        //设置显示格式
        image.setScaleType(ImageView.ScaleType.FIT_XY);
        image.setImageResource(viewList.get(i));
        imageViews.add(image);
        }
        BannerAdapter bannerAdapter = new BannerAdapter(imageViews);
        setAdapter(bannerAdapter);
        }

        把new ImageView的操作放在bannerview里面就可以了,直接list.get会出错
        筱宓dawnLing:@blink_dagger 您好!添加之后没效果,请问如下这样对吗?
        public void setViewList(List<View> viewList) {
        this.viewList = viewList;
        if (viewList != null && viewList.size() != 0) {
        viewSize = viewList.size();
        if (viewSize == 1){
        viewList.add(viewList.get(0));
        }else if(viewSize == 2){
        viewList.add(viewList.get(0));
        viewList.add(viewList.get(1));
        }
        BannerAdapter bannerAdapter = new BannerAdapter(viewList);
        setAdapter(bannerAdapter);
        }
        }
        blink_dagger:当size为1或者2的时候都会出现空白页,这是因为viewpager的机制导致,你可以在BannerView的 setViewList()方法中去判断一下,当size ==1时,viewList.add(viewList.get(0));两次就可以了
      • 2505ffecdcc0:adapter.registerDataSetObserver(mDataObserver);这个我感觉可以去掉,因为Viewpager已经设置addOnPageChangeListener,在里面的onPageSelected中设置的有updateLinearPosition()
        blink_dagger:谢谢啦~是可以去掉,最初写的时候是准备把adapter放在外部的,考虑到adapter数据变化后需要notify才加的mDataObserver,现在已经把setadapter内置进来了,完全可以去掉~
      • 2505ffecdcc0:clone下来了,感觉不错,棒棒哒

      本文标题:【Android】三行代码实现一个轮播BannerView

      本文链接:https://www.haomeiwen.com/subject/epvinttx.html