Android 轮播控件第三方(XBanner)使用

现在都知道Android界大部分应用都少不了一样东西，那就是轮播图，对于轮播图大家也不陌生，就是一个图片翻到另一个图片中间可以设置轮播的时间，还可以设置轮播图的点击。以前我做轮播图是使用ViewPage做轮播，但现在发现这个XBanner以后发现这个轮播图第三方非常简单，而又容易懂，代码也非常少。好了接下在进入正题。

1.既然是第三方那肯定会有第三方依赖：

implementation 'com.github.xiaohaibin:XBanner:1.6.1'   //第三方框架XBanner轮播

implementation 'com.github.bumptech.glide:glide:4.9.0'   //Glide请求图片依赖

引入依赖以后还需要在Model多添加一样东西 ：

allprojects {
        repositories {
            google()
            jcenter()

            maven { url 'https://jitpack.io' }  //导入Xbanner是需要导的

        }
    }

 

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

布局代码如下：

<?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"
    tools:context=".MainActivity">

<com.stx.xhb.xbanner.XBanner
    android:id="@+id/xbanner_view"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    app:isAutoPlay="true"         //支持自动轮播
    app:AutoPlayTime="3000"       //设置轮播延时
    app:pointsContainerBackground="#44BE54F7"  //设置指示器背景颜色
    app:pointNormal="@drawable/shape_noraml"   //设置指示器未选中时的状态 
    app:pointSelect="@drawable/shape_selected" //设置指示器选中时的状态 
    app:pointsPosition="RIGHT"   //设置指示点位置
    app:tipTextSize="12sp"       //设置提示文字的大小 
    />

</RelativeLayout>

3.在Activity或者Fragment中配置Xbanner，以上的属性设置其实也可以在activity或Frament里面进行设置，代码如下：

public class MainActivity extends AppCompatActivity {

    private XBanner xbanner_view;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        xbanner_view = findViewById(R.id.xbanner_view);

        //图片集合,模拟一下数据
        final List<String> imgesUrl = new ArrayList<>();
        imgesUrl.add("http://www.pptok.com/wp-content/uploads/2012/08/xunguang-7.jpg");
        imgesUrl.add("http://imageprocess.yitos.net/images/public/20160910/99381473502384338.jpg");
        imgesUrl.add("http://imageprocess.yitos.net/images/public/20160910/77991473496077677.jpg");
        imgesUrl.add("http://imageprocess.yitos.net/images/public/20160906/1291473163104906.jpg");

        //数据集合导入banner里
        xbanner_view.setData(imgesUrl,null);

        //图片加载
        xbanner_view.loadImage(new XBanner.XBannerAdapter() {
            @Override
            public void loadBanner(XBanner banner, Object model, View view, int position) {
                //glide请求网络图片
                Glide.with(MainActivity.this).load(imgesUrl.get(position)).into((ImageView) view);
            }
        });

        //图片加载，跟上面的loadImage一样，不过setmAdapter已经标识着过时了，上面的和这个用一个就行
        xbanner_view.setmAdapter(new XBanner.XBannerAdapter() {
            @Override
            public void loadBanner(XBanner banner, Object model, View view, int position) {
                //glide请求网络图片
                Glide.with(MainActivity.this).load(imgesUrl.get(position)).into((ImageView) view);
            }
        });

        //设置切换延时,单位sm，默认5000sm
        xbanner_view.setPageChangeDuration(3000);

        // 设置XBanner的页面切换特效，有多个，其他的可以到网上去查
        //xbanner_view.setPageTransformer(Transformer.Default);//横向移动

        xbanner_view.setPageTransformer(Transformer.Alpha); //渐变，效果不明显

        //设置轮播图点击监听
        xbanner_view.setOnItemClickListener(new XBanner.OnItemClickListener() {
            @Override
            public void onItemClick(XBanner banner, Object model, View view, int position) {
                Toast.makeText(MainActivity.this, "点击了"+position, Toast.LENGTH_SHORT).show();
            }
        });

        //-----------一下可以在控件里面进行设置，也可以在当前执行页面进行设置-------------------------
        xbanner_view.setAutoPlayAble(true);   //设置自动轮播

        xbanner_view.setAutoPalyTime(5000);   //图片轮播事件间隔,int类型，默认5000ms
        //………………详细设置属性可以看下面
    }
}

 效果图：无法做动态图，所以只能用图片代替