一个好玩的轮播图

首先这是转载 官方地址: https://github.com/pinguo-zhouwei/MZBannerView

效果
在这里插入图片描述

下面是对一些能力较弱的程序猿们的步骤和坑
搭建环境:
1.根目录

allprojects {
    repositories {
        //轮播图
        maven { url 'https://jitpack.io' }
    }
}

2.使用model下,这里有一坑就是最低版本要在16以上

//轮播
    implementation 'com.github.pinguo-zhouwei:MZBannerView:v2.0.2'

3.控件

<com.zhouwei.mzbanner.MZBannerView
        android:id="@+id/homefragment_viewpager_pageadapter"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        app:open_mz_mode="true"
        app:canLoop="true"
        app:middle_page_cover="false"
        app:indicatorPaddingLeft="20dp"
        app:indicatorPaddingRight="20dp"/>

在这里插入图片描述

代码:

控件

MZBannerView  mViewPager = mView.findViewById(R.id.homefragment_viewpager_pageadapter);

设置布局等,在给图片设置值的时候要注意宽要写成match要不出不来效果

	//为轮播图设置数据,需要注意不能为list列表
    public static class BannerViewHolder implements MZViewHolder<Bean_HomeFragment_PageBean.ResultBean>{


        private SimpleDraweeView mImage;

        @Override
        public View createView(Context context) {
            View view = View.inflate(context, R.layout.homefragment_pagement_pageimage, null);
            mImage = view.findViewById(R.id.pageadapter_simpledraweeview_image);
            return view;
        }

        @Override
        public void onBind(Context context, int i, Bean_HomeFragment_PageBean.ResultBean resultBean) {
            Uri parse = Uri.parse(resultBean.getImageUrl());
            mImage.setImageURI(parse);
        }
    }	

设置数据

//轮播
                    mViewPager.setPages(数据, new MZHolderCreator<BannerViewHolder>() {

                        @Override
                        public BannerViewHolder createViewHolder() {
                            return new BannerViewHolder();
                        }
                    });

写到这里已经完成了,细节需要看官方网址
方法介绍

/******************************************************************************************************/
    /**                             对外API                                                               **/
    /******************************************************************************************************/
    //开始轮播
     start()
    //停止轮播
     pause()

    //设置BannerView 的切换时间间隔
     setDelayedTime(int delayedTime)
    // 设置页面改变监听器
    addPageChangeLisnter(ViewPager.OnPageChangeListener onPageChangeListener)

    //添加Page点击事件
     setBannerPageClickListener(BannerPageClickListener bannerPageClickListener)
    //设置是否显示Indicator
    setIndicatorVisible(boolean visible)
    // 获取ViewPager
    ViewPager getViewPager()
    // 设置 Indicator资源
    setIndicatorRes(int unSelectRes,int selectRes)
    //设置页面数据
    setPages(List<T> datas,MZHolderCreator mzHolderCreator)
    //设置指示器显示位置
    setIndicatorAlign(IndicatorAlign indicatorAlign)
    //设置ViewPager(Banner)切换速度
    setDuration(int duration)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
现在的APP Banner大多数千篇一律,前几天看到魅族手机上所有魅族自家APP上的Banner效果不错,于是就想着来仿着做一个类似的效果。因此就有了这个库。但是为了使用方便,这个库不仅仅只有仿魅族效果的BannerView 来使用,还可以当作普通的BannerView 来使用,还可以当作一个ViewPager 来使用。使用很方便,具体使用方法和API 请看后面的示例。 ---  左图为魅族APP上的Banner效果,右图是高仿效果。MZBannerView 有以下功能:1 . 仿魅族BannerView 效果。2 . 当普通Banner 使用3 . 当普通ViewPager 使用。4 . 当普通ViewPager使用(有魅族Banner效果)5 . 仿某视频网站Banner效果。Demo APKgif图片有点模糊,可以扫描下方二维码下载APK体验相关博客ViewPager系列之 仿魅族应用的广告BannerView更新日志v1.1.1 : 增加按住Banner 停止轮播,松开开始自动轮播的功能v1.1.0 : fix 在从网上获取数据后,banner 显示 造成 ANR 的bug(如果在onCreate()中设置资源显示则没问题)v1.1.2 : fix 更改数据之后,调用setPages重新刷新数据会crush的bugv2.0.0 :1,add: 添加仿魅族Banner效果,中间Page覆盖两边。 -- 2,fix 部分bug: 添加OnPageChangeListener 回调 pisition 不对的bug.DependencyAdd it in your root build.gradle at the end of repositories:allprojects {      repositories {           ...           maven { url 'https://jitpack.io' }      } }Step 2. Add the dependencydependencies {          compile 'com.github.pinguo-zhouwei:MZBannerView:v2.0.0' }自定义属性属性名属性意义取值open_mz_mode是否开启魅族模式true 为魅族Banner效果,false 则普通Banner效果canLoop是否轮播true 轮播,false 则为普通ViewPagerindicatorPaddingLeft设置指示器距离左侧的距离单位为 dp 的值indicatorPaddingRight设置指示器距离右侧的距离单位为 dp 的值indicatorAlign设置指示器的位置有三个取值:left 左边,center 剧中显示,right 右侧显示middle_page_cover设置中间Page是否覆盖(真正的魅族Banner效果)true 覆盖,false 无覆盖效果使用方法1 . xml 布局文件2 . activity中代码:mMZBanner = (MZBannerViewview.findViewById(R.id.banner);              // 设置数据         mMZBanner.setPages(list, new MZHolderCreator() {             @Override             public BannerViewHolder createViewHolder() {                 return new BannerViewHolder();             }         });  public static class BannerViewHolder implements MZViewHolder {         private ImageView mImageView;         @Override         public View createView(Context cont

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值