轮播图bunner控件ConvenientBanner

来源：互联网发布：淘宝运费模板删不了编辑：程序博客网时间：2024/06/05 01:55

首先添加依赖
gradle依赖：

compile ‘com.bigkoo:convenientbanner:2.0.5’

布局xml：

<com.bigkoo.convenientbanner.ConvenientBanner        xmlns:app="http://schemas.android.com/apk/res-auto"        android:id="@+id/convenientBanner"        android:layout_width="match_parent"        android:layout_height="200dp"        app:canLoop="true" //控制循环与否 />

Java代码：

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

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

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

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

public class NetworkImageHolderView implements Holder<BannerItem> {    private View view;    @Override    public View createView(Context context) {        view = LayoutInflater.from(context).inflate(R.layout.banner_item, null, false);        return view;    }    @Override    public void UpdateUI(Context context, int 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()));    }}

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <com.facebook.drawee.view.SimpleDraweeView        android:id="@+id/sdv_background"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <TextView        android:id="@+id/tv_title"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:textSize="20sp"        android:textColor="@android:color/white"        android:layout_marginBottom="20dp"        android:gravity="bottom"        android:paddingLeft="20dp"        android:paddingRight="20dp"/></FrameLayout>

0 0