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