Android APP Banner ，用這一個就夠了

時間 2019-11-16

標籤 android app banner 一個夠了欄目 Android 简体版

原文原文鏈接

MZBannerView

如今的APP Banner大多數千篇一概，前面看到魅族手機上全部魅族自家APP上的Banner效果不錯，因而就想着來仿着作一個相似的效果。所以就有了這個庫。可是爲了使用方便，這個庫不單單隻有仿魅族效果的BannerView 來使用，還能夠看成普通的BannerView 來使用，還能夠看成一個ViewPager 來使用。使用很方便，具體使用方法和API 請看後面的示例。java

Github 地址：MZBannerViewandroid

－－－

左圖爲魅族APP上的Banner效果，右圖是高仿效果。git

MZBannerView 有如下功能：github

1 . 仿魅族BannerView 效果。bash

2 . 當普通Banner 使用網絡

3 . 當普通ViewPager 使用。app

4 . 當普通ViewPager使用(有魅族Banner效果)maven

5 . 仿愛奇藝 APP Banner 效果 ide

Dependency

Add it in your root build.gradle at the end of repositories:oop

allprojects {
     repositories {
          ...
          maven { url 'https://jitpack.io' }
     }
}複製代碼

Step 2. Add the dependency

dependencies {
         compile 'com.github.pinguo-zhouwei:MZBannerView:v2.0.0'
}複製代碼

自定義屬性

屬性名	屬性意義	取值
open_mz_mode	是否開啓魅族模式	true 爲魅族Banner效果，false 則普通Banner效果
canLoop	是否輪播	true 輪播，false 則爲普通ViewPager
indicatorPaddingLeft	設置指示器距離左側的距離	單位爲 dp 的值
indicatorPaddingRight	設置指示器距離右側的距離	單位爲 dp 的值
indicatorAlign	設置指示器的位置	有三個取值：left 左邊，center 劇中顯示，right 右側顯示
middle_page_cover	設置中間Page是否覆蓋（真正的魅族Banner效果）	true 覆蓋，false 無覆蓋效果

###使用方法
1 . xml 佈局文件

<com.zhouwei.mzbanner.MZBannerView
       android:id="@+id/banner"
       android:layout_width="match_parent"
       android:layout_height="200dp"
       android:layout_marginTop="10dp"
       app:open_mz_mode="true"
       app:canLoop="true"
       app:indicatorAlign="center"
       app:indicatorPaddingLeft="10dp"
       />複製代碼

2 . activity中代碼：

mMZBanner = (MZBannerView) view.findViewById(R.id.banner);

       // 設置數據
        mMZBanner.setPages(list, new MZHolderCreator<BannerViewHolder>() {
            @Override
            public BannerViewHolder createViewHolder() {
                return new BannerViewHolder();
            }
        });

 public static class BannerViewHolder implements MZViewHolder<Integer> {
        private ImageView mImageView;
        @Override
        public View createView(Context context) {
            // 返回頁面佈局
            View view = LayoutInflater.from(context).inflate(R.layout.banner_item,null);
            mImageView = (ImageView) view.findViewById(R.id.banner_image);
            return view;
        }

        @Override
        public void onBind(Context context, int position, Integer data) {
            // 數據綁定
            mImageView.setImageResource(data);
        }
    }複製代碼

3 .若是是當Banner使用，注意在onResume 中調用start()方法，在onPause中調用 pause() 方法。若是當普通ViewPager使用，則不須要。

@Override
    public void onPause() {
        super.onPause();
        mMZBanner.pause();//暫停輪播
    }

    @Override
    public void onResume() {
        super.onResume();
        mMZBanner.start();//開始輪播
    }複製代碼

經過open_mz_mode、middle_page_cover和canLoop這3個屬性來控制MZBannerView 是用做Banner仍是普通ViewPager,能控制多種Banner展現效果：

1 . 魅族Banner 效果，中間Page覆蓋兩邊。

app:open_mz_mode="true"
 app:canLoop="true"
 app:middle_page_cover="true"複製代碼

2 普通banner 使用。

app:open_mz_mode="false"
app:canLoop="true"複製代碼

上圖中的底部BannerView 示例。

3 仿魅族Banner 效果，中間Page不覆蓋。

app:open_mz_mode="true"
 app:canLoop="true"
 app:middle_page_cover="false"複製代碼

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"
        />複製代碼

效果以下：

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

app:open_mz_mode="true"
 app:canLoop="false"複製代碼

6 普通ViewPager 使用

app:canLoop="false"
 app:open_mz_mode="false"複製代碼

上面都是用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)複製代碼