Android 最完善的自定义Banner轮播图之一，带给你最全面的体验
Posted 冰糖葫芦三剑客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
以上是关于Android 最完善的自定义Banner轮播图之一，带给你最全面的体验的主要内容，如果未能解决你的问题，请参考以下文章