顶部图片循环播放开源库Android-ConvenientBanner的使用。。。

转载请注明出处：http://blog.csdn.net/xroocky/article/details/50837866
参考源码：http://download.csdn.net/detail/xroocky/9456930

---

库地址：https://github.com/saiwu-bigkoo/Android-ConvenientBanner

自己的技术还不够，所以在需要用的时候就直接找现成的库拿来用了，以后有时间了好好读一下源码学习学习，再自己尝试写一个。
虽然作者在README.md里面已经写得很详细了，但是在使用的过程中遇到了一些小问题，所以把使用方法和使用中遇到的问题记录一下。

gradle依赖：

compile ‘com.bigkoo:convenientbanner:2.0.5’

布局xml：

<code class="hljs avrasm has-numbering"><<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.bigkoo</span><span class="hljs-preprocessor">.convenientbanner</span><span class="hljs-preprocessor">.ConvenientBanner</span>        xmlns:app=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>        android:id=<span class="hljs-string">"@+id/convenientBanner"</span>        android:layout_width=<span class="hljs-string">"match_parent"</span>        android:layout_height=<span class="hljs-string">"200dp"</span>        app:canLoop=<span class="hljs-string">"true"</span> //控制循环与否 /></code>

Java代码：

<code class="hljs java has-numbering">convenientBanner.setPages(<span class="hljs-keyword">new</span> CBViewHolderCreator<NetworkImageHolderView>() {                <span class="hljs-annotation">@Override</span>                <span class="hljs-keyword">public</span> NetworkImageHolderView <span class="hljs-title">createHolder</span>() {                    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> NetworkImageHolderView();                }            }, topNewsItems)    <span class="hljs-comment">//设置需要切换的View</span>            .setPointViewVisible(<span class="hljs-keyword">true</span>)    <span class="hljs-comment">//设置指示器是否可见</span>            .setPageIndicator(<span class="hljs-keyword">new</span> <span class="hljs-keyword">int</span>[]{R.drawable.dot_unselected, R.drawable.dot_selected})   <span class="hljs-comment">//设置指示器圆点</span>            .startTurning(<span class="hljs-number">5000</span>)     <span class="hljs-comment">//设置自动切换（同时设置了切换时间间隔）</span>            .stopTurning()    <span class="hljs-comment">//关闭自动切换</span>            .setManualPageable(<span class="hljs-keyword">false</span>)  <span class="hljs-comment">//设置手动影响（设置了该项无法手动切换）</span>            .setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.ALIGN_PARENT_RIGHT) <span class="hljs-comment">//设置指示器位置（左、中、右）</span>            .setOnItemClickListener(<span class="hljs-keyword">this</span>); <span class="hljs-comment">//设置点击监听事件</span></code>

作者单独把etworkImageHolderView类拿出来了，为了方便使用者改写，来实现复杂布局的切换。原etworkImageHolderView如下：

<code class="hljs axapta has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">NetworkImageHolderView</span> <span class="hljs-inheritance"><span class="hljs-keyword">implements</span></span> <span class="hljs-title">Holder</span><<span class="hljs-title">String</span>> {</span>    <span class="hljs-keyword">private</span> ImageView imageView;    @Override    <span class="hljs-keyword">public</span> View createView(Context context) {        <span class="hljs-comment">//你可以通过layout文件来创建，也可以像我一样用代码创建，不一定是Image，任何控件都可以进行翻页</span>        imageView = <span class="hljs-keyword">new</span> ImageView(context);        imageView.setScaleType(ImageView.ScaleType.FIT_XY);        <span class="hljs-keyword">return</span> imageView;    }    @Override    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> UpdateUI(Context context,<span class="hljs-keyword">int</span> position, String data) {        imageView.setImageResource(R.drawable.ic_default_adimage);        ImageLoader.getInstance().displayImage(data,imageView);    }}</code>

作者是使用universal-image-loader来加载图片的，这里仅放置了一个ImageView，然后通过UpdateUI方法的第三个参数data（图片URL）来加载图片。
在这里可以使用LayoutInflater来加载一个布局，然后通过第三个参数来更新UI。

<code class="hljs axapta has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">NetworkImageHolderView</span> <span class="hljs-inheritance"><span class="hljs-keyword">implements</span></span> <span class="hljs-title">Holder</span><<span class="hljs-title">BannerItem</span>> {</span>    <span class="hljs-keyword">private</span> View view;    @Override    <span class="hljs-keyword">public</span> View createView(Context context) {        view = LayoutInflater.from(context).inflate(R.layout.banner_item, <span class="hljs-keyword">null</span>, <span class="hljs-keyword">false</span>);        <span class="hljs-keyword">return</span> view;    }    @Override    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> UpdateUI(Context context, <span class="hljs-keyword">int</span> position, BannerItem data) {        ((TextView)view.findViewById(R.id.tv_title)).setText(data.getTitle());        ((SimpleDraweeView)view.findViewById(R.id.sdv_background)).setImageURI(Uri.parse(data.getImage()));    }}</code>

其中R.layout.banner_item是需要切换的布局，BannerItem类中存放的是两个String，一个是图片上方的文字，一个是图片的URL

<code class="hljs avrasm has-numbering"><FrameLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>    android:layout_width=<span class="hljs-string">"match_parent"</span>    android:layout_height=<span class="hljs-string">"match_parent"</span>>    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>        android:id=<span class="hljs-string">"@+id/sdv_background"</span>        android:layout_width=<span class="hljs-string">"match_parent"</span>        android:layout_height=<span class="hljs-string">"match_parent"</span> />    <TextView        android:id=<span class="hljs-string">"@+id/tv_title"</span>        android:layout_width=<span class="hljs-string">"match_parent"</span>        android:layout_height=<span class="hljs-string">"match_parent"</span>        android:textSize=<span class="hljs-string">"20sp"</span>        android:textColor=<span class="hljs-string">"@android:color/white"</span>        android:layout_marginBottom=<span class="hljs-string">"20dp"</span>        android:gravity=<span class="hljs-string">"bottom"</span>        android:paddingLeft=<span class="hljs-string">"20dp"</span>        android:paddingRight=<span class="hljs-string">"20dp"</span>/></FrameLayout></code>