【Android

来源：互联网发布：大庆seo推广编辑：程序博客网时间：2024/05/28 19:24

一、XBanner简介

XBanner是一个非常优秀的无限自动轮播框架，也是一个控件。这里是XBanner的GitHub地址

XBanner的主要功能如下：

根据传入的数据条数自动调整广告页数
当图片数量大于一张时，可以无限循环自动播放、手指按下停止轮播、抬起手指继续轮播
可以自定义指示器的位置：左下角、下侧中间、右下角
自定义指示点：正常状态和选中状态
监听Item的点击事件
支持设置图片轮播时间间隔
可以设置指示器的背景及其显示/隐藏
可以显示提示性文字并设置其颜色、大小
支持改变图片切换动画，框架中默认支持10中动画
可以设置图片切换动画的时长

二、XBanner用法

1、导入依赖

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

    compile 'com.xhb:xbanner:1.2.2'    compile 'com.nineoldandroids:library:2.4.0'

由于XBanner中有可能从网络加载图片，因此也需要导入一些图片加载框架的依赖，如Glide，代码如下：

    compile 'com.github.bumptech.glide:glide:3.7.0'    compile 'jp.wasabeef:glide-transformations:1.0.6'

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

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

2、布局

XBanner控件的部分属性如下表所示：属性名属性说明属性值isAutoPlay是否支持自动轮播boolean类型，默认为trueautoPlayTime图片轮播事件间隔int类型，默认5000mspointNormal指示器未选中时的状态drawable类型，不指定的话使用默认状态点pointSelect指示器选中时的状态drawable类型，不指定的话使用默认状态点pointsVisible是否显示指示器boolean类型，默认为truepointsPosition指示点位置CENTER、LEFT、RIGHT，默认CENTERpointsContainerBackground指示器条背景color类型、drawable类型、mipmap类型等pointContainerPosition指示器条位置TOP、BOTTOM，默认BOTTOMpointContainerLeftRightPadding指示点容器左右内间距dimension类型，默认10.0dippointTopBottomPadding指示点上下内间距dimension类型，默认6.0dippointLeftRightPadding指示点左右内间距dimension类型，默认3.0diptipTextColor提示文字的颜色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();    }

以上都是从GitHub的代码中学习总结的，留给自己看，也给作者宣传一下~~

三、XBanner的代码跟效果展示

在编写代码之前需要导入一个xbanner的依赖还有一个加载图片的依赖，我用的是glide的依赖

compile 'com.github.bumptech.glide:glide:3.7.0'compile 'jp.wasabeef:glide-transformations:1.0.6'compile 'com.xhb:xbanner:1.2.2'

添加联网的权限才可以

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

1、activity_main布局

<com.stx.xhb.xbanner.XBanner    android:id="@+id/xBanner"    android:layout_width="match_parent"    android:layout_height="300dp"    android:gravity="center"    app:AutoPlayTime="2500"    app:pointsVisibility="true"    app:pointsContainerBackground="#44AAAAAA"    app:pointsPosition="CENTER"    app:tipTextColor="#FFFFFFFF"    app:tipTextSize="16sp"    ></com.stx.xhb.xbanner.XBanner>

2、MainActivity主页代码

public class MainActivity extends AppCompatActivity {    private XBanner xBanner;    private ArrayList<String> list_image;    private ArrayList<String> list_title;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        xBanner = (XBanner) findViewById(R.id.xBanner);        //装图片的集合        list_image = new ArrayList<String>();        //装标题的集合        list_title = new ArrayList<String>();        list_image.add("http://img3.fengniao.com/forum/attachpics/913/114/36502745.jpg");        list_title.add("这只是第一张图片");        list_image.add("http://imageprocess.yitos.net/images/public/20160910/99381473502384338.jpg");        list_title.add("这只是第二张图片");        list_image.add("http://imageprocess.yitos.net/images/public/20160910/77991473496077677.jpg");        list_title.add("这只是第三张图片");        list_image.add("http://imageprocess.yitos.net/images/public/20160906/1291473163104906.jpg");        list_title.add("这也是第四张图片");        //为XBanner绑定数据        xBanner.setData(list_image,list_title);        //XBanner适配数据        xBanner.setmAdapter(new XBanner.XBannerAdapter() {            @Override            public void loadBanner(XBanner banner, View view, int position) {                Glide.with(MainActivity.this).load(list_image.get(position)).into((ImageView) view);            }        });        // 设置XBanner的页面切换特效  Default默认的        xBanner.setPageTransformer(Transformer.Default);        // 设置XBanner页面切换的时间，即动画时长        xBanner.setPageChangeDuration(1000);        // XBanner中某一项的点击事件        xBanner.setOnItemClickListener(new XBanner.OnItemClickListener() {            @Override            public void onItemClick(XBanner banner, int position) {                Toast.makeText(MainActivity.this, "点击了第" + (position + 1) + "张图片", Toast.LENGTH_SHORT).show();            }        });    }    @Override    protected void onResume() {        super.onResume();        xBanner.startAutoPlay();    }    @Override    protected void onStop() {        super.onStop();        xBanner.stopAutoPlay();    }}

阅读全文

0 0