• 【Android


    一、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类型,默认为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();
        }

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

  • 相关阅读:
    session一致性架构设计实践.
    从"嘿,今晚..."谈消息安全传输中的技术点
    跨公网调用的大坑与架构优化方案
    “配置”也有架构演进?看完深有痛感
    TCP接入层的负载均衡、高可用、扩展性架构
    究竟啥才是互联网架构“高并发”
    12.Nodes
    11.Layers, Containers and Interfaces
    10.Nodes and Bindings
    9.Hierarchy Editor
  • 原文地址:https://www.cnblogs.com/itgungnir/p/6210891.html
Copyright © 2020-2023  润新知