可独立拆分使用，设置属性可变为普通banner，修改如需特殊要求可修改源码item_banner.xml布局即可(图片资源在文末)
-
具体效果
效果
- 底部背景图片随着banner滚动实现reveal效果
banner上层图片缩放效果
实现原理
- 上层banner用viewPager实现，通过handler定时发送消息实现可循环自动播放的banner
- 下层背景图片通过多张图片折叠，然后通过viewPager滚动监听来操作底部图片的显示和隐藏
- 缩放动画用属性动画实现，根据viewPager滑动停止和移动判断是否放大或缩小
特性
- 可独立拆分使用，设置属性可变为普通banner，修改如需特殊要求可修改源码item_banner.xml布局即可
在 app的build.gradle 里面引用
implementation 'com.tokiii:reveal-banner:1.0.0'
2、写布局
<com.wikikii.bannerlib.banner.view.BannerBgContainer
android:id="@+id/banner_bg_container"
android:layout_width="match_parent"
android:layout_height="240dp" />
<com.wikikii.bannerlib.banner.LoopLayout
android:id="@+id/loop_layout"
android:layout_width="match_parent"
android:layout_marginTop="@dimen/qb_px_80"
android:layout_height="168dp"
android:layout_gravity="bottom" />
3、实现代码
bannerBgContainer = (BannerBgContainer) inflate.findViewById (R.id.banner_bg_container);
loopLayout = (LoopLayout) inflate.findViewById (R.id.loop_layout);
loopLayout.setLoop_ms (3000);//轮播的速度(毫秒)
loopLayout.setLoop_duration (400);//滑动的速率(毫秒)
loopLayout.setScaleAnimation (true);// 设置是否需要动画
loopLayout.setLoop_style (LoopStyle.Depth);//轮播的样式-默认empty
loopLayout.setIndicatorLocation (IndicatorLocation.Center);//指示器位置-中Center
loopLayout.initializeData (getActivity ());
// 准备数据
ArrayList<BannerInfo> bannerInfos = new ArrayList<> ();
List<Object> bgList = new ArrayList<> ();
bannerInfos.add (new BannerInfo (R.mipmap.banner_1, "first"));
bannerInfos.add (new BannerInfo (R.mipmap.banner_2, "second"));
bgList.add (R.mipmap.banner_bg1);
bgList.add (R.mipmap.banner_bg2);
// 设置监听
loopLayout.setOnLoadImageViewListener (new OnDefaultImageViewLoader () {
@Override
public void onLoadImageView(ImageView view, Object object) {
Glide.with (view.getContext ())
.load (object)
.into (view);
}
});
loopLayout.setOnBannerItemClickListener (this);
if (bannerInfos.size () == 0) {
return;
}
loopLayout.setLoopData (bannerInfos);
bannerBgContainer.setBannerBackBg (getActivity (), bgList);
loopLayout.setBannerBgContainer (bannerBgContainer);
loopLayout.startLoop ();
}
@Override
public void onBannerClick(int index, ArrayList<BannerInfo> banner) {
}
void setFullScreen() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window window = getActivity ().getWindow ();
// Translucent status bar
window.setFlags (
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getActivity ().getWindow ();
window.clearFlags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
| WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
window.getDecorView ().setSystemUiVisibility (View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
window.addFlags (WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor (Color.TRANSPARENT);
}
图片
banner_1.png
banner_2.png
banner_bg1.png
banner_bg2.png
转载至tokiii
