android首页新颖,Android仿转转首页banner
banner_g--.gif
效果由来
我司设计一向比较喜欢高大上的东西(我也喜欢...),无意中看到转转首页banner动画不错,想得之,由于项目工期和人手限制,遭到IOS开发和我的强烈反对,设计也即将妥协,我抱着猎奇心态(手欠)搜了下网上看看有没有类似效果,结果让我搜到了iOS版本 ,iOS开发欢心集成,我则愁眉苦展,辗转两天之久,出此代码.
具体效果
底部背景图片随着banner滚动实现reveal效果
banner上层图片缩放效果
实现原理
上层banner用viewPager实现,通过handler定时发送消息实现可循环自动播放的banner
下层背景图片通过多张图片折叠,然后通过viewPager滚动监听来操作底部图片的显示和隐藏
缩放动画用属性动画实现,根据viewPager滑动停止和移动判断是否放大或缩小
特性
可独立拆分使用,设置属性可变为普通banner,修改如需特殊要求可修改源码item_banner.xml布局即可
部分关键代码
private class ViewPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 判断viewPager左右滑动相关
if (mViewPagerIndex == position) {
if (bannerBgContainer.getBannerBgViews().size() > position % bannerBgContainer.getBannerBgViews().size() + 1) {
bannerBgContainer.getBannerBgViews().get(position % bannerBgContainer.getBannerBgViews().size() + 1).bringToFront();
bannerBgContainer.getBannerBgViews().get(position % bannerBgContainer.getBannerBgViews().size() + 1)
.hideClipAnimation((positionOffset - reduceValue) * upValue > 1 ? 1 : (positionOffset - reduceValue) * upValue);
} else if (bannerBgContainer.getBannerBgViews().size() == position % bannerBgContainer.getBannerBgViews().size() + 1) {
bannerBgContainer.getBannerBgViews().get(0).bringToFront();
bannerBgContainer.getBannerBgViews().get(0)
.hideClipAnimation((positionOffset - reduceValue) * upValue > 1 ? 1 : (positionOffset - reduceValue) * upValue);
}
} else {
if (position / bannerBgContainer.getBannerBgViews().size() >= 0) {
bannerBgContainer.getBannerBgViews().get(position % bannerBgContainer.getBannerBgViews().size()).bringToFront();
bannerBgContainer.getBannerBgViews().get(position % bannerBgContainer.getBannerBgViews().size())
.showClipAnimation(0, bannerBgContainer.getHeight() / 2,
(1 - (positionOffset + reduceValue)) * upValue > 1 ? 1 : (1 - (positionOffset + reduceValue)) * upValue);
}
}
}
@Override
public void onPageSelected(int position) {
int i = position % bannerInfos.size();
if (i == 0) {
animIndicator.setTranslationX(totalDistance * 0.0f);
} else if (i == bannerInfos.size() - 1) {
animIndicator.setTranslationX(totalDistance * 1.0f);
}
// 不是手动拖拽时, 当前position 减1 因为setCurrentItem方法会在滑动之前把position设置成当前位置(此处是坑)
mViewPagerIndex = position - 1;
}
@Override
public void onPageScrollStateChanged(int state) {
// 如果是手动拖拽,则取当前位置
if (state == 1) {
if (loopViewPager != null) {
mViewPagerIndex = loopViewPager.getCurrentItem();
}
}
}
}
使用方法
在 app的build.gradle 里面引用
implementation 'com.tokiii:reveal-banner:1.0.0'
布局文件
android:layout_width="match_parent"
android:layout_height="240dp">
android:id="@+id/banner_bg_container"
android:layout_width="match_parent"
android:layout_height="240dp" />
android:id="@+id/loop_layout"
android:layout_width="match_parent"
android:layout_height="168dp"
android:layout_gravity="bottom" />
代码设置属性
// 设置轮播图属性
loopLayout.setLoop_ms(3000);//轮播的速度(毫秒)
loopLayout.setLoop_duration(400);//滑动的速率(毫秒)
loopLayout.setScaleAnimation(true);// 设置是否需要动画
loopLayout.setLoop_style(LoopStyle.Empty);//轮播的样式-默认empty
loopLayout.setIndicatorLocation(IndicatorLocation.Center);//指示器位置-中Center
loopLayout.initializeData(this);
// 设置轮播图属性end
// 准备数据
ArrayList bannerInfos = new ArrayList<>();
List 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(this, bgList);// 背景容器设置轮播图片
loopLayout.setBannerBgContainer(bannerBgContainer);// 联动
loopLayout.startLoop();// 开始循环
后记
详细请看具体代码已经上传到Github ,由于时间仓促,实际效果与转转还是多少有些不同,代码注释较少,等后续优化接近完美会补上关键代码逻辑和原理(也没有多复杂),敬请期待.....
android首页新颖,Android仿转转首页banner相关推荐
- Android开发笔记(一百六十四)仿京东首页的下拉刷新
上一篇文章介绍了高仿京东的沉浸式状态栏,可是跟京东首页的头部轮播图相比,依然有三处缺憾: 1.京东的头部Banner上方,除了有悬浮着的状态栏,状态栏下面还有一行悬浮工具栏,内嵌扫一扫图标.搜索框,以 ...
- android 高仿京东首页,android 粗略的 仿京东首页 嵌套方式滚动
简单述说 最近没有什么事情,就看到了京东的首页,感觉还不错,但是我目前也只是粗略的模仿了出来. github 地址 V2版本 仿京东首页.gif 设计思路 简单画图.png 滚动黄色的recycleV ...
- android高仿京东秒杀,Android仿京东首页秒杀倒计时
本文实例为大家分享了Android仿京东首页秒杀倒计时的具体代码,供大家参考,具体内容如下 xml配置 android:layout_width="wrap_content" an ...
- android支付宝动态更新,Android仿支付宝首页下拉刷新
题外话 学习了Behavior之后,发现效果都可以通过Behavior来实现,包括支付宝首页的下拉刷新效果,其重点效果指标在于下滑上部分的布局,同样能够进行下拉刷新,其下拉刷新的布局展开的位置在中间部 ...
- android仿微博首页布局,Android仿微博首页Tab加号弹窗功能
本文实例为大家分享了Android微博首页Tab加号弹窗展示的具体代码,供大家参考,具体内容如下 Activity部分的代码 package com.ting.tab; import android. ...
- android仿支付宝首页更多、应用编辑界面
[github地址](https://github.com/oldbirdy/recyclerdemo "github地址") 项目越来越大,模块越来越多,首页上展示的东西又不能全 ...
- Android:自定义CoordinatorLayout.behavior 简单的仿UC首页
CoordinatorLayout顾名思义协调布局,是用来协调该布局下的子控件,最简单地使用就是头部伸缩和折叠了,配合着TabLayout,只需要设置一下AppBarLayout子控件的layout_ ...
- android高仿美团筛选控件,Android高仿美团首页分类按钮
惯例,先上GIF 栗子.gif更新v1.1版本 2017-6-2 11:55:30 详见github 一.使用姿势 1.引入(使用Gradle或者Maven) 1)Gradleallprojects ...
- android 仿蘑菇街首页,高仿蘑菇街欢迎页
蘑菇街欢迎页 蘑菇街欢迎页.gif 高仿效果 高仿版本.gif 前言 本文将介绍如何对蘑菇街欢迎页效果进行分析,拆分,并一步步实现1个高仿版本,最重要的设计思路包括以下2点: 1.ViewPager切 ...
最新文章
- AI也能「抽象派」作画,圆形+方块组合,可微2D渲染下生成抽象人脸
- 第十五届全国大学生智能车竞赛室外光电创意组别进入线下比赛的队伍名单
- 还是两个数的交换问题
- GDCM:gdcm::Decoder的测试程序
- python邮件发送哪个好_python发邮件(一)
- sqoop的安装和使用
- Nodejs全局安装模块后找不到命令的解决方法
- maven 的 oracle的Missing artifact com.oracle:******:jar:11.2.0.2.0
- 乌拉、利用python实现tree命令
- python程序设计实验报告实验一_Python程序设计实验报告一
- 敏捷团队章程的实践精要
- Pano2VR生成的HTML文件打开为黑屏
- cesium api 学习之旋转角 heading(yaw)、pitch、roll
- jquery validate插件onfocosout/onkeyup出错的解决方法
- 一直都以为阿里的程序员待遇是最好的,结果真正的土豪竟然是……
- 网易云音乐的歌词无法在桌面歌词显示
- 什么蓝牙耳机打游戏好?打游戏好用的无线蓝牙耳机
- 恒生电子(杭州、武汉、上海、、、)来实习来春招
- Noise-contrastive Estimation(NCE)学习
- XiaoHu日志 7/29~8/9