Android 最完善的自定义Banner轮播图之一，带给你最全面的体验（三）

Android 最完善的自定义Banner轮播图之一，带给你最全面的体验

Android 最完善的自定义Banner轮播图之一，带给你最全面的体验（三）

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

1.使用BGABanner-Android来实现一屏三页效果（显示三页banner图片，中间大两边小的缩放效果）

其他的效果在上面的源码链接中都有，就不展示了，可以下载看看是不是自己需要的。

依赖：

//banner
    implementation 'cn.bingoogolapple:bga-banner:2.1.7@aar'

或

 

dependencies {
    implementation 'androidx.legacy:legacy-support-v4:2.2.7'
    implementation 'cn.bingoogolapple:bga-banner:2.2.7@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" />

 

2.主要代码（JAVA）：

private void refreshBanner(List<BannerInfo> bannerInfos){
       
        banner.setAdapter(new BGABanner.Adapter<ImageView, BannerInfo>() {
            @Override
            public void fillBannerItem(BGABanner banner, ImageView itemView, @Nullable BannerInfo model, int position) {
                Glide.with(BannerTestActivity.this).load(model.getImagePath())
                        .into(itemView);

            }
        });
        banner.setData(bannerInfos, null);
        banner.setClipChildren(false);//用来定义他的子控件是否要在他应有的边界内进行绘制。 默认情况下，clipChild被设置为true。 也就是不允许进行扩展绘制。
        //viewPager的设置一定要在setData之后，因为BGABanner是在setData之后添加的viewPager,否则获取到的只会是null
        BGAViewPager viewPager = banner.getViewPager();
        //viewPager.setClipChildren(false);
        viewPager.setPageMargin(ScreenUtil.dp2px(this,15));
        viewPager.setOffscreenPageLimit(3);
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) viewPager.getLayoutParams();
        layoutParams.leftMargin = ScreenUtil.dp2px(this,40);
        layoutParams.rightMargin = ScreenUtil.dp2px(this,40);
        viewPager.setLayoutParams(layoutParams);
        viewPager.setPageTransformer(true,new ScaleInTransformer());
    }

 Kotlin实现方式：（这里只是实现了kotlin实现banner,一屏三页效果请参考上面代码写法）

 binding!!.banner2.setAdapter(object : BGABanner.Adapter<ImageView, Ad> {
                override fun fillBannerItem(
                    banner: BGABanner?,
                    itemView: ImageView?,
                    model: Ad?,
                    position: Int
                ) {
                    //使用Glide设置圆角矩形，和banner的圆角设置一起使用,使用自定义RoundRectImageView圆角矩形图片无效
                    //设置图片圆角角度
                    val roundedCorners = RoundedCorners(30);
//通过RequestOptions扩展功能,override:采样率,因为ImageView就这么大,可以压缩图片,降低内存消耗
                    val options = RequestOptions.bitmapTransform(roundedCorners)
                    Glide.with(this@HomeFragment).load(model?.img).apply(options).into(itemView!!)
//                    Glide.with(this@HomeFragment).load(model?.img).fitCenter().apply(options).into(itemView!!)
                }
            })//setdata
//            binding!!.banner.setData(R.layout.item_ad) setAllowUserScrollable
            //sgf注意此轮播图数量小于3时不能自动轮播，这是bug的存在,需要替换控件或自己添加数据使其大于4方可自动轮播
            binding!!.banner2.setData(it, null)
            //自动轮播间隔
            binding!!.banner2.setAutoPlayInterval(3000)
            //点击自动播放
            binding!!.banner2.setAutoPlayAble(true)
//            binding!!.banner.setTransitionEffect(BGABanner.TransitionEffect.Rotate);
            //是否允许滚动
            binding!!.banner2.setAllowUserScrollable(true)
            //开始自动播放
            binding!!.banner2.startAutoPlay()
            //设置轮播图圆角的方法
            binding!!.banner2.setOutlineProvider(object : ViewOutlineProvider() {
                override fun getOutline(view: View, outline: Outline) {
                    outline.setRoundRect(0, 0, view.width, view.height, 30f)
                }
            })
            binding!!.banner2.clipToOutline = true
            //监听广告 item 的单击事件
            binding!!.banner2.setDelegate(object : BGABanner.Delegate<ImageView, Ad> {
                override fun onBannerItemClick(
                    banner: BGABanner?,
                    itemView: ImageView?,
                    model: Ad?,
                    position: Int
                ) {
                    val get = it?.get(position)
                    if (get?.article_id != 0) {

                        get?.article?.content?.let { it1 ->
                            WebViewActivity.jumpToCurrentPage(
                                mActivity!!,
                                it1,
                                get?.title,
                                DateUtils.formatYMDHM(get?.updated.toLong())
                            )
                        }
                    } else {
                        WebViewActivity.jumpToCurrentPage(
                            mActivity!!,
                            get.url,
                            get.title,
                            DateUtils.formatYMDHM(get?.updated?.toLong())
                        )
                    }
                }

            })

3.自定义一屏三页效果：（ScaleInTransformer是viewPager的切换动画，view切换到两边时变小，在中间是最大）

import android.view.View;

import android.support.v4.view.ViewPager;

public class ScaleInTransformer implements ViewPager.PageTransformer {
    private static final float DEFAULT_MIN_SCALE = 0.85f;
    private float mMinScale = DEFAULT_MIN_SCALE;//view缩小值
    public static final float DEFAULT_CENTER = 0.5f;
    private int pageWidth;
    private int pageHeight;
    @Override
    public void transformPage(View view, float position) {
        pageWidth = view.getWidth();
        pageHeight = view.getHeight();

        view.setPivotY(pageHeight / 2);
        view.setPivotX(pageWidth / 2);
        if (position < -1.0f) {
            // [-Infinity,-1)
            // view移动到最左边，在屏幕之外
            handleInvisiblePage(view, position);
        } else if (position <= 0.0f) {
            // [-1,0]
            // view移动到左边
            handleLeftPage(view, position);
        } else if (position <= 1.0f) {
            // view移动到右边
            handleRightPage(view, position);
        } else {
            // (1,+Infinity]
            //  view移动到右边，在屏幕之外
            view.setPivotX(0);
            view.setScaleX(mMinScale);
            view.setScaleY(mMinScale);
        }
    }

    public void handleInvisiblePage(View view, float position) {

        view.setScaleX(mMinScale);
        view.setScaleY(mMinScale);
        view.setPivotX(pageWidth);
    }
   
    public void handleLeftPage(View view, float position) {

        float scaleFactor = (1 + position) * (1 - mMinScale) + mMinScale;
        view.setScaleX(scaleFactor);
        view.setScaleY(scaleFactor);

        view.setPivotX(pageWidth * (DEFAULT_CENTER + (DEFAULT_CENTER * -position)));
    }

    public void handleRightPage(View view, float position) {

        float scaleFactor = (1 - position) * (1 - mMinScale) + mMinScale;
        view.setScaleX(scaleFactor);
        view.setScaleY(scaleFactor);
        view.setPivotX(pageWidth * ((1 - position) * DEFAULT_CENTER));

    }
}

4.自定义属性说明：

<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_pointGravity">
        <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" />
</declare-styleable>

• 软件首页: https://github.com/bingoogolapple/BGABanner-Android
• 软件文档: https://github.com/bingoogolapple/BGABanner-Android/blob/master/README.md
• 官方下载: https://github.com/bingoogolapple/BGABanner-Android/archive/master.zip

一个不错的仿转转的Banner无限轮播图： 

https://github.com/tokiii/RevealBanner