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'}

布局：

2.主要代码（JAVA）：

private void refreshBanner(List bannerInfos){               banner.setAdapter(new BGABanner.Adapter() {            @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 {                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 {                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.自定义属性说明：

软件首页: 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

更多相关文章

随机推荐