XBanner的小实现

最新推荐文章于 2024-07-10 19:25:11 发布

默默无闻的程序猿i

最新推荐文章于 2024-07-10 19:25:11 发布

阅读量486

点赞数

文章标签： android XBanner 轮播图

本文链接：https://blog.csdn.net/qq_38933706/article/details/78652667

版权

XBanner是一个非常优秀的无限自动轮播框架，同时也是一个控件，XBanner的主要功能如下：

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

XBanner的用法

一、首先导依赖，需要用到xbanner，还有加载网络图片的依赖，还有在清单文件里面写网络权限。

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

二、创建布局。 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

<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="300dp"
        android:layout_height="400dp"
        android:layout_gravity="center"
        app:AutoPlayTime="3000"
        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>

三、MainActivity.java

找控件

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

创建list集合添加图片地址跟图片描述

images = new ArrayList<>();
        titles = new ArrayList<>();
        images.add("http://img01.sogoucdn.com/app/a/100520024/f4d580ab0d9f5d514c9471b23bba0561");
        titles.add("美女1美女1");
        images.add("http://img03.sogoucdn.com/app/a/100520024/611aff966911ebb8f61df057f4822dd9");
        titles.add("美女2");
        images.add("http://img01.sogoucdn.com/app/a/100520024/2ac6c898d7d768e3aabd72b0fbb62e5a");
        titles.add("美女3");
        images.add("http://img01.sogoucdn.com/app/a/100520024/bc84efff94797560fd239a883712cf71");
        titles.add("美女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的页面切换特效  Default默认的
        banner.setPageTransformer(Transformer.Default);
        // 设置XBanner页面切换的时间，即动画时长
        banner.setPageChangeDuration(1000);

Default是默认的平滑效果，Transformer提供了好几种动画特效。供君选择

public enum Transformer {
    Default,
    Alpha,
    Rotate,
    Cube,
    Flip,
    Accordion,
    ZoomFade,
    ZoomCenter,
    ZoomStack,
    Stack,
    Depth,
    Zoom
}

也可以像我那样为了方便些一排RadioGroup动态的去改变特效

 // 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;
                }
            }
        });

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();
            }
        });

还可以与Activity的生命周期关联起来使用，当Activity失去焦点的时候停止自动轮播，当Activity获得焦点的时候才开始自动轮播

//当Activity失去焦点时立即停止自动轮播；当Activity获得焦点时才开始自动轮播
    @Override
    protected void onResume() {
        super.onResume();
        banner.startAutoPlay();
    }

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

简单的用一下还是可以的

Demo地址

默默无闻的程序猿i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XBanner的小实现

XBanner是一个非常优秀的无限自动轮播框架，同时也是一个控件，XBanner的主要功能如下：根据传入的数据条数自动调整广告页数当图片数量大于一张时，可以无限循环自动播放、手指按下停止轮播、抬起手指继续轮播可以自定义指示器的位置：左下角、下侧中间、右下角自定义指示点：正常状态和选中状态监听Item的点击事件支持设置图片轮播时间间隔可以设置指示器的背景及其显示/
复制链接

扫一扫