转载请注明出处: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>