xbanner无限轮播

XBanner用法

1、导入依赖

        使用XBanner框架之前，需要先导入其引用：在build.gradle文件中加入依赖，代码如下：

     

dependencies {
    compile 'com.xhb:xbanner:latestVersion'//将latestVersion替换成上面最新的版本号
}

        如果是从网络加载数据，还需要在Manifest文件中注册网络访问权限，代码如下：

<uses-permission android:name="android.permission.INTERNET" />

 

2、布局

        XBanner控件的部分属性如下表所示：

属性名	属性说明	属性值
isAutoPlay	是否支持自动轮播	boolean类型，默认为true
autoPlayTime	图片轮播事件间隔	int类型，默认5000ms
pointNormal	指示器未选中时的状态	drawable类型，不指定的话使用默认状态点
pointSelect	指示器选中时的状态	drawable类型，不指定的话使用默认状态点
pointsVisible	是否显示指示器	boolean类型，默认为true
pointsPosition	指示点位置	CENTER、LEFT、RIGHT，默认CENTER
pointsContainerBackground	指示器条背景	color类型、drawable类型、mipmap类型等
pointContainerPosition	指示器条位置	TOP、BOTTOM，默认BOTTOM
pointContainerLeftRightPadding	指示点容器左右内间距	dimension类型，默认10.0dip
pointTopBottomPadding	指示点上下内间距	dimension类型，默认6.0dip
pointLeftRightPadding	指示点左右内间距	dimension类型，默认3.0dip
tipTextColor	提示文字的颜色	reference类型
tipTextSize	提示文字的大小	dimension类型，默认10.0dp

        本DEMO中布局文件中的代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.stx.xhb.xbanner.XBanner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="200.0dip"
        app:AutoPlayTime="3000"
        app:pointNormal="@drawable/shape_pointer_normal"
        app:pointSelect="@drawable/shape_pointer_selected"
        app:pointsContainerBackground="#44AAAAAA"
        app:pointsPosition="RIGHT"
        app:tipTextColor="#FFFFFFFF"
        app:tipTextSize="16.0sp" />

    <!-- 翻页动画单选按钮组 -->
    <RadioGroup
        android:id="@+id/transforms"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RadioButton
            android:id="@+id/rb_default"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Default"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_alpha"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Alpha"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_rotate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Rotate"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_cube"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Cube"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_flip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Flip"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_accordion"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Accordion"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_zoomfade"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ZoomFade"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_zoomcenter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ZoomCenter"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_zoomstack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ZoomStack"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_depth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Depth"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_stack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Stack"
            android:textSize="16.0sp" />
    </RadioGroup>
</LinearLayout>

 

3、绑定数据

        在Activity中通过XBanner控件在布局文件中的id属性找到控件，代码如下：

banner = (XBanner) findViewById(R.id.banner);

        初始化XBanner中需要展示的数据，分为一个图片URL的集合和一个提示性文字的集合：

        // 初始化XBanner中展示的数据
        images = new ArrayList<>();
        titles = new ArrayList<>();
        images.add("http://img3.fengniao.com/forum/attachpics/913/114/36502745.jpg");
        titles.add("这是第1张图片这是第1张图片这是第1张图片这是第1张图片这是第1张图片这是第1张图片这是第1张图片这是第1张图片这是第1张图片");
        images.add("http://imageprocess.yitos.net/images/public/20160910/99381473502384338.jpg");
        titles.add("这是第2张图片这是第2张图片这是第2张图片这是第2张图片这是第2张图片这是第2张图片这是第2张图片这是第2张图片这是第2张图片");
        images.add("http://imageprocess.yitos.net/images/public/20160910/77991473496077677.jpg");
        titles.add("这是第3张图片这是第3张图片这是第3张图片这是第3张图片这是第3张图片这是第3张图片这是第3张图片这是第3张图片这是第3张图片");
        images.add("http://imageprocess.yitos.net/images/public/20160906/1291473163104906.jpg");
        titles.add("这是第4张图片这是第4张图片这是第4张图片这是第4张图片这是第4张图片这是第4张图片这是第4张图片这是第4张图片这是第4张图片");

        XBanner绑定数据并适配：

        // 为XBanner绑定数据
        banner.setData(images, titles);
        // XBanner适配数据
        banner.setmAdapter(new XBanner.XBannerAdapter() {
            @Override
            public void loadBanner(XBanner banner, View view, int position) {
                Glide.with(MainActivity.this).load(images.get(position)).into((ImageView) view);
            }
        });

        设置XBanner默认的页面切换动画及动画时长：

        // 设置XBanner的页面切换特效
        banner.setPageTransformer(Transformer.Default);
        // 设置XBanner页面切换的时间，即动画时长
        banner.setPageChangeDuration(1000);

        当选中RadioGroup中的某个RadioButton时，切换XBanner的页面切换动画：

        // RadioGroup中选中某个RadioButton时回调的方法
        transforms.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.rb_default:
                        banner.setPageTransformer(Transformer.Default);
                        break;
                    case R.id.rb_alpha:
                        banner.setPageTransformer(Transformer.Alpha);
                        break;
                    case R.id.rb_rotate:
                        banner.setPageTransformer(Transformer.Rotate);
                        break;
                    case R.id.rb_cube:
                        banner.setPageTransformer(Transformer.Cube);
                        break;
                    case R.id.rb_flip:
                        banner.setPageTransformer(Transformer.Flip);
                        break;
                    case R.id.rb_accordion:
                        banner.setPageTransformer(Transformer.Accordion);
                        break;
                    case R.id.rb_zoomfade:
                        banner.setPageTransformer(Transformer.ZoomFade);
                        break;
                    case R.id.rb_zoomcenter:
                        banner.setPageTransformer(Transformer.ZoomCenter);
                        break;
                    case R.id.rb_zoomstack:
                        banner.setPageTransformer(Transformer.ZoomStack);
                        break;
                    case R.id.rb_stack:
                        banner.setPageTransformer(Transformer.Stack);
                        break;
                    case R.id.rb_depth:
                        banner.setPageTransformer(Transformer.Depth);
                        break;
                }
            }
        });

 

4、点击事件

        当点击XBanner中的某一项时触发的事件：

        // XBanner中某一项的点击事件
        banner.setOnItemClickListener(new XBanner.OnItemClickListener() {
            @Override
            public void onItemClick(XBanner banner, int position) {
                Toast.makeText(MainActivity.this, "点击了第" + (position + 1) + "张图片", Toast.LENGTH_SHORT).show();
            }
        });

 

5、与Activity生命周期联动

        当Activity失去焦点时立即停止自动轮播；当Activity获得焦点时才开始自动轮播。代码如下：

    @Override
    protected void onResume() {
        super.onResume();
        banner.startAutoPlay();
    }

    @Override
    protected void onStop() {
        super.onStop();
        banner.stopAutoPlay();

    }

6.当使用Fresco加载图片时，需要自定义布局文件

1.自定义xml布局文件 image_fresco.layout

 <?xml version="1.0" encoding="utf-8"?>
 <com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  />

2.使用setData()方法进行设置

   mXBanner.setData(R.layout.image_fresco.layout,mOthersList,tips);