实用知识android开发技巧Android开发干货集中营

Android APP Banner ,用这一个就够了

2017-08-23  本文已影响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 ,或者评论区留言。

上一篇下一篇

猜你喜欢

热点阅读