轮播控件——BGABanner

最新推荐文章于 2024-03-21 09:51:54 发布

qq_38250682

最新推荐文章于 2024-03-21 09:51:54 发布

阅读量8.8k

点赞数 1

分类专栏： Android 文章标签：导航控件轮播

Android 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

BGABanner的功能：引导界面导航效果;支持图片指示器和数字指示器;支持自定义指示器位置和广告文案位置;支持 ViewPager 各种切换动画;支持监听 item 点击事件

效果图

这里写图片描述

在gradle中引入

compile 'cn.bingoogolapple:bga-banner:2.1.7'

xml中使用

<cn.bingoogolapple.bgabanner.BGABanner
    android:id="@+id/poitBanner"
    android:layout_width="match_parent"
    android:layout_height="150dp"

    app:banner_pageChangeDuration="1000"
    app:banner_pointAutoPlayInterval="3000"
    app:banner_pointAutoPlayAble="true"
    app:banner_transitionEffect="defaultEffect"
    app:banner_placeholderDrawable="@mipmap/holder"
    app:banner_indicatorGravity="bottom|center_horizontal"

    app:banner_pointContainerBackground="@android:color/transparent"
    app:banner_pointDrawable="@drawable/bga_banner_selector_point_hollow"
    app:banner_pointContainerLeftRightPadding="10dp"
    app:banner_pointTopBottomMargin="5dp"
    app:banner_pointLeftRightMargin="3dp"/>

<cn.bingoogolapple.bgabanner.BGABanner
    android:id="@+id/numBanner"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    app:banner_pageChangeDuration="1000"
    app:banner_pointAutoPlayInterval="3000"
    app:banner_pointAutoPlayAble="true"
    app:banner_transitionEffect="defaultEffect"
    app:banner_indicatorGravity="bottom|right"
    app:banner_placeholderDrawable="@mipmap/holder"

    app:banner_isNumberIndicator="true"
    app:banner_numberIndicatorBackground="@drawable/shape_number_indicator_background"
    app:banner_numberIndicatorTextColor="@android:color/white"
    app:banner_numberIndicatorTextSize="10sp"
    app:banner_isNeedShowIndicatorOnOnlyOnePage="true"/>

bgabanner常用属性简绍：

<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>
    <!-- 加载网络数据时覆盖在 BGABanner 最上层的占位图 -->
    <attr name="banner_placeholderDrawable" format="reference" />
    <!-- 提示文案的文字颜色 -->
    <attr name="banner_tipTextColor" format="reference|color" />
    <!-- 提示文案的文字大小 -->
    <attr name="banner_tipTextSize" format="dimension" />

    /*
    *数字容器相关属性
    */

    <!-- 是否是数字指示器 -->
    <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>

代码

poitBanner = (BGABanner) rootView.findViewById(R.id.poitBanner);
numBanner = (BGABanner) rootView.findViewById(R.id.numBanner);
 //轮播图点击事件
 poitBanner.setDelegate(this);
 numBanner.setDelegate(this);

 //加载本地图片
 poitBanner.setData(R.mipmap.uoko_guide_background_1, R.mipmap.uoko_guide_background_2, R.mipmap
         .uoko_guide_background_3);

//设置是否开启自动轮播，需要在 setData 方法之前调用，并且调了该方法后必须再调用一次 setData 方法
 //banner.setAutoPlayAble(bannerModel.imgs.size() > 1);

 //加载网络图片  <ImageView,String>
 numBanner.setAdapter(new BGABanner.Adapter<ImageView,String>() {
     @Override
     public void fillBannerItem(BGABanner banner, ImageView itemView, String model, int position) {
         Log.e(TAG, "==="+model);
         Glide.with(MusicFragment.this)
                 .load(model)
                 .placeholder(R.mipmap.holder)
                 .error(R.mipmap.ic_launcher)
                 .dontAnimate()
                 .centerCrop()
                 .into(itemView);
     }
 });
 numBanner.setData(Arrays.asList(urls),null);


点击事件
@Override
public void onBannerItemClick(BGABanner banner, ImageView itemView, String model, int position) {
    Toast.makeText(banner.getContext(), "点击了第" + (position + 1) + "页", Toast.LENGTH_SHORT).show();
}

注意点
1.点击事件需要在implements BGABanner.Delegate< ImageView , String >的时候，添写Delegate的泛型（第一个参数是控件的类型，第二个参数是图片数据地址的类型）
2.设置是否开启自动轮播，需要在 setData 方法之前调用，并且调了后面方法后必须再调用一次 setData 方法 banner.setAutoPlayAble(bannerModel.imgs.size() > 1);

混淆

//bgabanner混淆
-keep class cn.bingoogolapple.bgabanner.BGAViewPager { *; }


//Glide 相关
-keep class com.bumptech.glide.Glide { *; }
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public enum com.bumptech.glide.load.resource.bitmap.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}
-dontwarn com.bumptech.glide.**

导航页的使用（Activity可以,Fragment中事件会出错）

xml

<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"
            style="@style/MatchMatch">

<cn.bingoogolapple.bgabanner.BGAGuideLinkageLayout style="@style/MatchMatch">

    <cn.bingoogolapple.bgabanner.BGABanner
        android:id="@+id/banner_guide_background"
        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="fade"/>

    <cn.bingoogolapple.bgabanner.BGABanner
        android:id="@+id/banner_guide_foreground"
        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"/>
</cn.bingoogolapple.bgabanner.BGAGuideLinkageLayout>

<TextView
    android:id="@+id/tv_guide_skip"
    style="@style/WrapWrap"
    android:layout_alignParentRight="true"
    android:layout_marginRight="8dp"
    android:layout_marginTop="8dp"
    android:clickable="true"
    android:padding="4dp"
    android:text="跳过 >"
    android:textColor="@android:color/white"
    android:textSize="16sp"/>

<Button
    android:id="@+id/btn_guide_enter"
    style="@style/WrapWrap"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="60dp"
    android:background="@drawable/selector_btn_test"
    android:padding="8dp"
    android:text="进入主界面"
    android:textColor="@android:color/white"
    android:textSize="20sp"
    android:visibility="gone"
    tools:visibility="visible"/>
</RelativeLayout>

Activity

public class GuideActivity extends Activity {
    private static final String TAG = GuideActivity.class.getSimpleName();
    private BGABanner mBackgroundBanner;
    private BGABanner mForegroundBanner;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        initView();
        setListener();
        processLogic();
    }

    private void initView() {
        setContentView(R.layout.activity_guide);
        mBackgroundBanner = (BGABanner) findViewById(R.id.banner_guide_background);
        mForegroundBanner = (BGABanner) findViewById(R.id.banner_guide_foreground);
    }

    private void setListener() {
        /**
         * 设置进入按钮和跳过按钮控件资源 id 及其点击事件
         * 如果进入按钮和跳过按钮有一个不存在的话就传 0
         * 在 BGABanner 里已经帮开发者处理了防止重复点击事件
         * 在 BGABanner 里已经帮开发者处理了「跳过按钮」和「进入按钮」的显示与隐藏
         */
        mForegroundBanner.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();
            }
        });
    }

    private void processLogic() {
        // 设置数据源
        mBackgroundBanner.setData(R.drawable.uoko_guide_background_1, R.drawable.uoko_guide_background_2, R.drawable.uoko_guide_background_3);

        mForegroundBanner.setData(R.drawable.uoko_guide_foreground_1, R.drawable.uoko_guide_foreground_2, R.drawable.uoko_guide_foreground_3);
    }

    @Override
    protected void onResume() {
        super.onResume();

        // 如果开发者的引导页主题是透明的，需要在界面可见时给背景 Banner 设置一个白色背景，避免滑动过程中两个 Banner 都设置透明度后能看到 Launcher
        mBackgroundBanner.setBackgroundResource(android.R.color.white);
    }
}

参考链接：https://github.com/bingoogolapple/BGABanner-Android

Glide的参考：http://blog.csdn.net/mchenys/article/details/51599039