Android APP Banner ,用这一个就够了

作者: 依然范特稀西 | 来源:发表于2017-08-23 22:02 被阅读2856次
Cover.png

MZBannerView

现在的APP Banner大多数千篇一律,前面看到魅族手机上所有魅族自家APP上的Banner效果不错,于是就想着来仿着做一个类似的效果。因此就有了这个库。但是为了使用方便,这个库不仅仅只有仿魅族效果的BannerView 来使用,还可以当作普通的BannerView 来使用,还可以当作一个ViewPager 来使用。使用很方便,具体使用方法和API 请看后面的示例。

Github 地址:https://github.com/pinguo-zhouwei/MZBannerView

魅族APP Banner效果

---


Page 覆盖效果

2 普通banner 使用。

app:open_mz_mode="false"
app:canLoop="true"
普通Banner效果

上图中的底部BannerView 示例。

3 仿魅族Banner 效果,中间Page不覆盖。

 app:open_mz_mode="true"
 app:canLoop="true"
 app:middle_page_cover="false"
Page不覆盖效果

4 仿爱奇艺Banner效果,Page 之间有间隔。

 <com.zhouwei.mzbanner.MZBannerView
       android:id="@+id/banner_normal"
       android:layout_width="match_parent"
       android:layout_height="150dp"
       android:layout_marginTop="10dp"
       app:open_mz_mode="true"
       app:middle_page_cover="false"
       app:canLoop="true"
       app:indicatorAlign="center"
       />

除了上面的代码外,还需要在Page 的item 布局里面设置左右Margin:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ImageView
        android:id="@+id/banner_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        />

效果如下:


仿爱奇艺Banner效果

5 有魅族Banner 效果的普通ViewPager 使用

 app:open_mz_mode="true"
 app:canLoop="false"
魅族Banner效果的普通ViewPager

6 普通ViewPager 使用

 app:canLoop="false"
 app:open_mz_mode="false"
普通ViewPager

上面都是用Banner 展示的本地数据,但是项目中我们一般都是从网络获取Banner 数据,具体参考:RemoteTestFragment.java

从网络获取数据

其他对外API

 /******************************************************************************************************/
    /**                             对外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)

因为是对ViewPager的包装,所有要设置某些ViewPager的属性,可以通过getViewPager 获取到ViewPager再设置对应属性

结尾

MZBannerView 全新升级到 v2.0.0 ,增加了新的两种新的展示效果,和修复一些Bug,如有问题,欢迎提Issues ,或者评论区留言。

相关文章

网友评论

  • 53147b85d661:只有两张图片就没有中间大两边小的效果了
    依然范特稀西:@浮生若梦_e33f 两张图怎么搞呢?中间大两边小最少得3张啊
  • Jay_Lwp:有点像苹果的
  • 鱼__鱼:问题有点多 ,还要磨细一点
  • 当个海贼多好:我是一名新手,看的有点懵逼。设置数据时传的list 是图片的集合吗? 返回页面又返回的那个页面? // 数据绑定
    mImageView.setImageResource(data); 这个又是怎么回事?
    依然范特稀西:请看github上的demo
  • f2b57f7a7e44:开启魅族模式的时候怎么让两边图片显示的宽度缩小呢?我想尽可能的让中间的图片占的比例大一些
    f2b57f7a7e44:额,我找到了,修改一下作者重写的viewpager的左右外边距就可以了
  • 梦龙DRAG0N:我把这个MZbanner作为recyclerView的头布局,特别卡,怎么回事呢?图片的加载框架用的Glide么?
  • bba12f9fde12:问一下,设置自动轮播。用户手势在滑动时,自动轮播还在计时,导致用户滑到下一个没多久又next,用户体验度不是很高。我试图在addPageChangeLisnter中加如pause和start,效果并不明显。
    依然范特稀西:最新版已经修复这个问题了
  • Jimven:为何as依赖远程仓库会报错
    依然范特稀西:@Jimven 报啥错?
  • dlihasa:fix 在从网上获取数据后,banner 显示 造成 ANR 的bug(如果在onCreate()中设置资源显示则没问题),我之前用的,最近也发现了这个问题,请问这个问题是什么原因造成的呢?
  • dfb7f2b129de:指示器的 indicatorPaddingBottom这个属性不起作用
  • ad17ceb64471:用的是Banner,可是不能自动切换,求解
    依然范特稀西:canLoop属性配置了吗?
  • ef7d91509d45:可以请问下:就是使用该banner的时候,我放着不动,它会无限循环,然后导致OOM,也会到一定数量,出现图片不显示的问题。
  • 6f6b938b6355:您好,我在使用MZBannerView的时候,为什么bannerViewYiqidu.setBannerPageClickListener()会无效呢,点击没有反应,有可能是什么原因呢??
    依然范特稀西:@一叶知秋丶lo 在setPages之前设置监听器
  • one1go: 这个能支持 minSdkVersion 能支持 15 吗
  • 53dc43775b95:我怎么没有看到轮播图的点击事件呢,想问一下,哪个方法是轮播图的点击事件呢
    依然范特稀西:@小沈新手 是的。因为要在setPages 里面做的很多设置
    小沈新手:这个监听要设置在 适配器之前才生效,为何会这样呢
    依然范特稀西:有一个OnPageClickListener
  • 拿铁加冰:一般
    依然范特稀西:会持续完善这个库的
  • eagle_ant:开心,又学了一点东西
    依然范特稀西:对你有帮助就好
  • 刘英滕:Flyme 的 banner 貌似还是动态的,内部做了一个工具,让设计师生成特殊的文件,让 banner 的部分元素动起来
    依然范特稀西:@刘英滕 对头,那是banner内部的元素

本文标题:Android APP Banner ,用这一个就够了

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