Android之convenientBanner的運用

我們做android的app的時候，經常會用到一個輪播的banner來做頂部的設計。

我們之前做的時候可能大多數會用viewpager+fragment，不管你們是不是，反正我之前是這麼做的。

然而今天我發現了一個新的封裝好的比較方便的框架，就迫不及待的分享給大家了。

convenientBanner這個開源框架的使用。

那麼開始說具體部分吧。

1.首先就是進行gradle文件的配置。讓我們集成convenientBanner。

compile 'com.bigkoo:convenientbanner:2.0.5'

2.然後，就是我們的代碼部分：

在你用到convenientBanner的地方用如下佈局：

<com.bigkoo.convenientbanner.ConvenientBanner
    android:id="@+id/convenientBanner"
    android:layout_width="match_parent"
    android:layout_height="240dp"
    app:canLoop="true" />

3. 佈局結束就是我們的activity。

private ConvenientBanner convenientBanner;
private String[] images = {
        "http://pic3.zhimg.com/da1fcaf6a02d1223d130d5b106e828b9.jpg",
        "http://p1.zhimg.com/dd/f1/ddf10a04227ea50fd59746dbcd13c728.jpg",
        "http://p3.zhimg.com/64/5c/645cde143c9a371005f3f749366cffad.jpg"
};
private List<BannerItem> bannerItems = new ArrayList<>();

然後添加輪播圖片的代碼：

convenientBanner = (ConvenientBanner)findViewById(R.id.convenientBanner);
//生成所需的數據
for (int i = 0; i < images.length; i ++) {
    bannerItems.add(new BannerItem("第" + i + "張", images[i]));
}

convenientBanner.setPages(new CBViewHolderCreator<NetworkImageHolderView>() {
    @Override
    public NetworkImageHolderView createHolder() {
        return new NetworkImageHolderView();
    }
}, bannerItems)
.setPageIndicator(new int[] {R.drawable.dot_unselected, R.drawable.dot_selected});

這裏的代碼很好理解。重要的地方解釋一下吧。

setPageIndicator就是輪播的時候那個小圓點。後面的資源就是你小圓點的圖標樣式。

大家也可以set別的屬性。

說一下常用的吧：

startTurning（）設置輪播的時間，也就是多長時間對圖片進行切換。

setOnClickListener() 設置點擊事件

setManualPageable() 設置手動影響，裏面是true 或者 false。即是否允許手動切換。

等等。主要就說這些方法吧。其餘的大家也可以繼續試試研究。本人就用到了這些。

還有就是NetworkImageHolderView的代碼啦：

public class NetworkImageHolderView implements Holder<Banner> {
    private ImageView view;

    @Override
    public ImageView createView(Context context) {
        view = (ImageView) LayoutInflater.from(context).inflate(R.layout.item_viewpager, null);
        return view;
    }

    @Override
    public void UpdateUI(Context context, int position, Banner data) {
        Glide.with(context).load(data.getImgUrl()).into(view);
        Glide.with(context).load(data.getImgUrl()).placeholder(R.mipmap.banner_top).error(R.mipmap.banner_top).into(view);
    }
}

大家參考使用，這裏我對圖片的處理是使用的glide框架，我之前也記錄過glide的使用方法，大家也可以使用imageloader等圖片框架對圖片來進行處理。

data就是我們的實體類。裏面定義方法包括構造函數。

貼一下吧：

public class Banner {
    //banner圖片的url
    private String imgUrl;
  

    public Banner( String image) {
        this.imgUrl = image;
    }

}

大家可以酌情進行修改使用。

希望可以讓需要的朋友得到幫助。