Android BGABanner轮播图组件

本文介绍了一个适用于Android应用的轮播库BGABanner的使用方法,包括依赖引入、布局配置及多种数据源设置方式。该库支持丰富的自定义选项,如指示器样式、过渡效果等。

BGABanner的GitHub地址:

https://github.com/bingoogolapple/BGABanner-Android

引用:

dependencies {
    compile 'com.android.support:support-v4:latestVersion'
    //latestVersion是最新的版本号
    compile 'cn.bingoogolapple:bga-banner:latestVersion@aar'
}

布局文件添加:

<cn.bingoogolapple.bgabanner.BGABanner
    android:id="@+id/banner_guide_content"
    style="@style/MatchMatch"
    app:banner_pageChangeDuration="1000"
    app:banner_pointAutoPlayAble="false"
    app:banner_pointContainerBackground="@android:color/transparent"
    app:banner_pointDrawable="@drawable/bga_banner_selector_point_hollow"
    app:banner_pointTopBottomMargin="15dp"
    app:banner_transitionEffect="alpha" />

布局属性说明:

<declare-styleable name="BGABanner">
    <!-- 指示点容器背景 -->
    <attr name="banner_pointContainerBackground" format="reference|color" />
    <!-- 指示点背景 -->
    <attr name="banner_pointDrawable" format="reference" />
    <!-- 指示点容器左右内间距 -->
    <attr name="banner_pointContainerLeftRightPadding" format="dimension" />
    <!-- 指示点上下外间距 -->
    <attr name="banner_pointTopBottomMargin" format="dimension" />
    <!-- 指示点左右外间距 -->
    <attr name="banner_pointLeftRightMargin" format="dimension" />
    <!-- 指示器的位置 -->
    <attr name="banner_indicatorGravity">
        <flag name="top" value="0x30" />
        <flag name="bottom" value="0x50" />
        <flag name="left" value="0x03" />
        <flag name="right" value="0x05" />
        <flag name="center_horizontal" value="0x01" />
    </attr>
    <!-- 是否开启自动轮播 -->
    <attr name="banner_pointAutoPlayAble" format="boolean" />
    <!-- 自动轮播的时间间隔 -->
    <attr name="banner_pointAutoPlayInterval" format="integer" />
    <!-- 页码切换过程的时间长度 -->
    <attr name="banner_pageChangeDuration" format="integer" />
    <!-- 页面切换的动画效果 -->
    <attr name="banner_transitionEffect" format="enum">
        <enum name="defaultEffect" value="0" />
        <enum name="alpha" value="1" />
        <enum name="rotate" value="2" />
        <enum name="cube" value="3" />
        <enum name="flip" value="4" />
        <enum name="accordion" value="5" />
        <enum name="zoomFade" value="6" />
        <enum name="fade" value="7" />
        <enum name="zoomCenter" value="8" />
        <enum name="zoomStack" value="9" />
        <enum name="stack" value="10" />
        <enum name="depth" value="11" />
        <enum name="zoom" value="12" />
    </attr>
    <!-- 提示文案的文字颜色 -->
    <attr name="banner_tipTextColor" format="reference|color" />
    <!-- 提示文案的文字大小 -->
    <attr name="banner_tipTextSize" format="dimension" />
    <!-- 加载网络数据时覆盖在 BGABanner 最上层的占位图 -->
    <attr name="banner_placeholderDrawable" format="reference" />
    <!-- 是否是数字指示器 -->
    <attr name="banner_isNumberIndicator" format="boolean" />
    <!-- 数字指示器文字颜色 -->
    <attr name="banner_numberIndicatorTextColor" format="reference|color" />
    <!-- 数字指示器文字大小 -->
    <attr name="banner_numberIndicatorTextSize" format="dimension" />
    <!-- 数字指示器背景 -->
    <attr name="banner_numberIndicatorBackground" format="reference" />
    <!-- 当只有一页数据时是否显示指示器,默认值为 false -->
    <attr name="banner_isNeedShowIndicatorOnOnlyOnePage" format="boolean" />
    <!-- 自动轮播区域距离 BGABanner 底部的距离,用于使指示器区域与自动轮播区域不重叠 -->
    <attr name="banner_contentBottomMargin" format="dimension"/>
</declare-styleable>

使用方式一:
通过传入数据模型并结合 Adapter 的方式配置数据源,这种方式主要用于加载网络图片,以及实现少于3页时的无限轮播

mContentBanner.setAdapter(new BGABanner.Adapter<ImageView, String>() {
    @Override
    public void fillBannerItem(BGABanner banner, ImageView itemView, String model, int position) {
        Glide.with(MainActivity.this)
                .load(model)
                .placeholder(R.drawable.holder)
                .error(R.drawable.holder)
                .centerCrop()
                .dontAnimate()
                .into(itemView);
    }
});

mContentBanner.setData(Arrays.asList("网络图片路径1", "网络图片路径2", "网络图片路径3"), Arrays.asList("提示文字1", "提示文字2", "提示文字3"));

使用方式二:
通过直接传入视图集合的方式配置数据源,主要用于自定义引导页每个页面布局的情况

List<View> views = new ArrayList<>();
views.add(BGABannerUtil.getItemImageView(this, R.drawable.ic_guide_1));
views.add(BGABannerUtil.getItemImageView(this, R.drawable.ic_guide_2));
views.add(BGABannerUtil.getItemImageView(this, R.drawable.ic_guide_3));
mContentBanner.setData(views);

使用方式三:
通过传入图片资源 id 的方式配置数据源,主要用于引导页每一页都是只显示图片的情况

mContentBanner.setData(R.drawable.uoko_guide_foreground_1, R.drawable.uoko_guide_foreground_2, R.drawable.uoko_guide_foreground_3);

使用方式四:
通过自定义 item 布局的方式来配置数据,用于导航页的布局

mContentBanner.setAdapter(new BGABanner.Adapter<CardView, String>() {
            @Override
            public void fillBannerItem(BGABanner banner, CardView itemView, String model, int position) {
                SimpleDraweeView simpleDraweeView = (SimpleDraweeView) itemView.findViewById(R.id.sdv_item_fresco_content);
                simpleDraweeView.setImageURI(Uri.parse(model));
            }
        });
mContentBanner.setData(R.layout.item_fresco, imgs, null);

item的点击事件:

mContentBanner.setDelegate(new BGABanner.Delegate<ImageView, String>() {
    @Override
    public void onBannerItemClick(BGABanner banner, ImageView itemView, String model, int position) {
        Toast.makeText(banner.getContext(), "点击了" + position, Toast.LENGTH_SHORT).show();
    }
});

跳过和进入首页按钮点击事件:

mContentBanner.setEnterSkipViewIdAndDelegate(R.id.btn_guide_enter, R.id.tv_guide_skip, new BGABanner.GuideDelegate() {
    @Override
    public void onClickEnterOrSkip() {
        startActivity(new Intent(GuideActivity.this, MainActivity.class));
        finish();
    }
});
一、简介 基于ViewPager的用户指引,广告图片Gallery,及自动轮播图片Gallery,使用起来超简单! GitHub地址:https://github.com/panxw/android-image-indicator 二、使用示例 1、广告图片Gallery <com.allthelucky.common.view.ImageIndicatorView android:id="@ id/indicate_view" android:layout_width="match_parent" android:layout_height="160dp" /> 代码: imageIndicatorView = (ImageIndicatorView) findViewById(R.id.indicate_view); final Integer[] resArray = new Integer[] { R.drawable.ic_launcher, R.drawable.ic_launcher }; imageIndicatorView.setupLayoutByDrawable(resArray); imageIndicatorView.show(); 2、自动轮播模式 <com.allthelucky.common.view.AutoImageIndicatorView android:id="@ id/auto_indicate_view" android:layout_width="match_parent" android:layout_height="160dp" /> 代码: autoImageIndicatorView = (AutoImageIndicatorView) findViewById(R.id.auto_indicate_view); final Integer[] resArray = new Integer[] { R.drawable.ic_launcher, R.drawable.ic_launcher }; autoImageIndicatorView.setBroadcastEnable(true); autoImageIndicatorView.setBroadCastTimes(5);//循环播放5次 autoImageIndicatorView.setBroadcastTimeIntevel(2 * 1000, 3 * 1000);//播放启动时间及间隔 autoImageIndicatorView.setupLayoutByDrawable(resArray);//图片 autoImageIndicatorView.show(); 效果图: 3、用户指引模式 this.imageIndicatorView = (ImageIndicatorView) findViewById(R.id.guide_indicate_view); final Integer[] resArray = new Integer[] { R.drawable.ic_launcher, R.drawable.ic_launcher }; imageIndicatorView.setupLayoutByDrawable(resArray); imageIndicatorView.setIndicateStyle(ImageIndicatorView.INDICATE_USERGUIDE_STYLE); imageIndicatorView.show(); 效果图: PS: 顺便宣传下自己的GitHub,https://github.com/panxw, 欢迎来Follow~ 标签:android
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值