翻翻git之---效果鮮明的類ViewPager庫 ConvenientBanner（對圖片載入部分進行改動）

轉載請注明出處：王亟亟的大牛之路

昨天寫了篇基礎的View繪制的內容貌似觀眾老爺們不怎么喜歡。那再這里再安利下自己定義View時。用到Paint Canvas的一些溫故。講講用路徑繪畫實現動畫效果（基礎篇 三）

ViewPager相比大家都用爛了，實現也有多種多樣，那為什么我又要貼這篇呢？

第一。表明態度，跟陳舊的universal-image-loader說再見

第二，確實內容寫得不錯

---

先來看下效果圖：

這是默認的翻轉模式，這里不做過多演示了。大家喜歡能夠自己去嘗試，動畫庫來源於

  compile 'com.ToxicBakery.viewpager.transforms:view-pager-transforms:1.2.32@aar'

原Demo里面有所有的動畫實現，想看的能夠下載看下https://github.com/saiwu-bigkoo/Android-ConvenientBanner/archive/master.zip

OH，再補下項目用到的資源

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.3.0'
    compile 'com.apkfuns.logutils:library:1.2.2'
    compile 'com.ToxicBakery.viewpager.transforms:view-pager-transforms:1.2.32@aar'
    compile 'com.github.bumptech.glide:glide:3.7.0'
    compile 'com.github.mrengineer13:snackbar:1.2.0'
}

重點說下為什么要替換掉universal-image-loader和怎么替換

理由1：維護，老項目在興許持續更近的不多，最明顯的是 volley,如今所比較的二者的優劣我就只是多分析了，別人也有些過很多。我給出傳送門就好http://blog.csdn.net/richiezhu/article/details/46968569

理由2 ：universal-image-loader配置太麻煩，在使用前必須做Config操作，雖然config有多有少，可是總得做。顯得麻煩。

像以下這段代碼大家都看膩了

 private void initImageLoader() {
        //網絡圖片樣例,結合經常使用的圖片緩存庫UIL,你能夠依據自己需求自己換其它網絡圖片庫
        DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder().
                showImageForEmptyUri(R.drawable.ic_default_adimage)
                .cacheInMemory(true).cacheOnDisk(true).build();

        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
                getApplicationContext()).defaultDisplayImageOptions(defaultOptions)
                .threadPriority(Thread.NORM_PRIORITY - 2)
                .denyCacheImageMultipleSizesInMemory()
                .diskCacheFileNameGenerator(new Md5FileNameGenerator())
                .tasksProcessingOrder(QueueProcessingType.LIFO).build();
        ImageLoader.getInstance().init(config);
    }

Glide僅僅須要

 Glide.with(context).load(data).placeholder(R.mipmap.ic_default_adimage).into(imageView);

OK。那再來說下我改了些什么。順便把怎樣使用ConvenientBanner一起說了

布局文件中引用和正常使用一樣，拽進去即可了

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".activity.MainActivity">

    <wjj.com.viewpagerwithglide.lib.ConvenientBanner  android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="200dp" app:canLoop="true" />
</RelativeLayout>

//自己定義標簽這里是詢問是否循環滾動。當然在java代碼里也能夠做這些事

在接下來就是獲取控件對象

private void findID() {
        banner = (ConvenientBanner) findViewById(R.id.banner);
    }

再接下來就是對控件進行初始化操作。這邊是調用public ConvenientBanner setPages(CBViewHolderCreator holderCreator, List<T> datas)來給予我們控件所需的數據源和布局內容

第一個參數就是我們的布局內容他封裝成了一個Holder這里先不詳解。后面會說的，事實上也就是像item之類的東西

第二個參數就是我們的數據源了。這里事實上就是我們這些圖片的URL

 private void init() {
        banner.setPages(new CBViewHolderCreator<BannerHolder>() {
            @Override
            public BannerHolder createHolder() {
                return new BannerHolder();
            }
        }, Arrays.asList(getResources().getStringArray(R.array.imagesArray)))//設置兩個點圖片作為翻頁指示器，不設置則沒有指示器，能夠依據自己需求自行配合自己的指示器,不須要圓點指示器可用不設
                .setPageIndicator(new int[]{R.mipmap.ic_page_indicator, R.mipmap.ic_page_indicator_focused})
                //設置指示器的方向
                .setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.ALIGN_PARENT_RIGHT)
                .setOnItemClickListener(this)//點擊監聽
                .setOnPageChangeListener(this);//監聽翻頁事件
    }

這些東西都設置完會有一些對應的回調來處理我們的邏輯，樣例里的點擊事件就是一個自己定義的回調。使用例如以下

  @Override
    public void onItemClick(int position) {
        LogUtils.d("--->點擊了第 " + position);
        showToast(position);
    }

    private void showToast(int position) {
        short time = 2000;
        new SnackBar.Builder(this)
                .withMessage("點擊了第" + position + "個頁面")
                .withActionMessage("確認")
                .withDuration(time)
                .show();
    }

實現例如以下：

public interface OnItemClickListener {
    public void onItemClick(int position);
}

實現事實上就是在控件的onTouchEvent事件里觸發了這個回調。

---

使用大致就是如此，不是太麻煩僅僅要熟悉流程就非常清楚了（配置的項還有非常多比如動畫效果之類的就沒提，我都用的默認的）

OK我們來詳細來解釋下上面提到的Holder

在這里我們所構建的布局都是活的。都是在Holder里動態創建的我們來看一下，樣例中是怎么做的

public class BannerHolder implements Holder<String> {

    private ImageView imageView;

    @Override
    public View createView(Context context) {
        imageView = new ImageView(context);
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        return imageView;

    }

    @Override
    public void UpdateUI(Context context, int position, String data) {
// LogUtils.d("UpdateUI --->position" + position + " ---> dataURL: " + data);
        Glide.with(context).load(data).placeholder(R.mipmap.ic_default_adimage).into(imageView);
    }
}

在createView中我們創建了所需的控件而且返回給了調用他的地方

UpdateUI，看名字就知道。是我們詳細操作邏輯和繪制UI的地方

這2個方法看起來非常像adapter里getView里的操作，那我們往上讀一讀他是怎樣實現的

往上一看果然是在adapter的getView里進行了操作，怪不得 用戶不須要去重寫adapter就能夠實現ViewPager填充數據以及繪制UI的操作

 public View getView(int position, View view, ViewGroup container) {
        Holder holder = null;
        if (view == null) {
            holder = (Holder) holderCreator.createHolder();
            view = holder.createView(container.getContext());
            view.setTag(R.id.cb_item_tag, holder);
        } else {
            holder = (Holder<T>) view.getTag(R.id.cb_item_tag);
        }
        if (mDatas != null && !mDatas.isEmpty())
            holder.UpdateUI(container.getContext(), position, mDatas.get(position));
        return view;
    }

大致分析就到這里，詳細內容能夠看下源代碼。我已經把代碼拆好了

包地址：https://github.com/ddwhan0123/BlogSample/tree/master/ViewPagerwithGlide

源代碼下載地址：https://github.com/ddwhan0123/BlogSample/blob/master/ViewPagerwithGlide/ViewPagerwithGlide.zip

原作者git:https://github.com/saiwu-bigkoo

大字誇獎，我們的UI大美女提供了一系列美美的圖，微博地址

假設有一些生活或者技術上想交流的也能夠微信我，掃以下畢竟是活人。所以認為自己會騷擾我的就別來了，謝主隆恩（最好有私活，來點生活費最好，Web or 移動端都行）