具有立体感的Material风格循环滚动Banner

摘要

最近在项目中要实现如下效果,在GitHub上搜了一下找到一个很不错的案例,但是没有实现自动循环,所以我决定来在该项目基础上修改一番,下图是我实现的两个效果。

一场APP界面

滑动动画

GitHub项目地址:https://github.com/yarolegovich/DiscreteScrollView

基础使用

gradle.build中引入库

1
compile 'com.yarolegovich:discrete-scrollview:1.2.0'

在需要添加的地方的布局文件中添加

1
2
3
4
5
<com.yarolegovich.discretescrollview.DiscreteScrollView
android:id="@+id/main_scroll_picker"
android:layout_marginTop="5dip"
android:layout_width="match_parent"
android:layout_height="110dip"/>

在代码中进行基本设置

1
2
3
4
5
6
7
8
9
mScrollPick = getView(R.id.main_scroll_picker);
mScrollPick.setOrientation(Orientation.HORIZONTAL);
//mTeamPick.addOnItemChangedListener(this);
mScrollAdapter = new MainScrollPickAdapter(mScrollBanners);
mScrollPick.setAdapter(mScrollAdapter);
mScrollPick.setItemTransitionTimeMillis(500);
mScrollPick.setItemTransformer(new ScaleTransformer.Builder()
.setMinScale(0.9f)
.build());

内容由自定义的适配器决定

1
2
3
4
5
6
7
8
9
10
11
public class MainScrollPickAdapter extends BaseQuickAdapter<ScrollBanner, BaseViewHolder> {

public MainScrollPickAdapter(List<ScrollBanner> data) {
super(R.layout.item_main_scroll_banner, data);
}

@Override
protected void convert(BaseViewHolder helper, ScrollBanner item) {
helper.getView(R.id.item_root).setBackgroundColor(Color.parseColor(item.getBannerBg()));
}
}

初始化一些测试数据

1
2
3
4
5
6
7
mScrollBanners.add(new ScrollBanner("#f24fc9"));
mScrollBanners.add(new ScrollBanner("#bd60f5"));
mScrollBanners.add(new ScrollBanner("#6a63e6"));
mScrollBanners.add(new ScrollBanner("#df3b3b"));
mScrollBanners.add(new ScrollBanner("#f1e599"));

mScrollAdapter.notifyDataSetChanged();

好了,这样就可以用手滑动了,效果是不是很棒呢?此时并没有满足我们最初的需求,我们需要让它自动滚动并且首位的内容要相接。

满足需求的改写

在上面的代码基础上,我们接下来要完成下面这几件事情就可以满足我们的需求

  1. 让它能每隔一段时间滚动到下一个页面。
  2. 让初始的页面左右两边都有露出的前后页。
  3. 让自动滚动首位相接,滚动到最后一个后可以看到第一个露出的头。
  4. 当手指放到上面的时候停止滚动,抬起的时候恢复自动滚动。
  5. 当离开该页面的时候停止滚动,进来的时候恢复滚动。

接下来我们来分三个步骤来完成

第一步

第一个问题很好解决,我们可以写个定时器,我这里使用Handle的delay来实现的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
static class MyWeakReferenceHandler extends WeakRefrenceHandler<MainFragment1>{

public MyWeakReferenceHandler(MainFragment1 ref) {
super(ref);
}

@Override
protected void handleMessage(MainFragment1 ref, Message msg) {
switch (msg.what){
case HAND_BANNER_DELAY_SCROLL:
int position = ref.mScrollPick.getCurrentItem();
ref.mScrollPick.smoothScrollToPosition(position + 1);
removeMessages(HAND_BANNER_DELAY_SCROLL);
sendEmptyMessageDelayed(HAND_BANNER_DELAY_SCROLL, BANNER_DELAY_TIME);
break;
}
}
}

上面我使用的一个弱引用的Handle每隔一段时间发送消息,接收到消息后就获取当前位置然后加1向后移动。

第二步

第二个问题我是通过前后补数据来完成的,这样既简单而且可以资源重复利用

图片切换示意图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Override
protected void initData() {
mScrollBanners.add(new ScrollBanner("#f24fc9"));
mScrollBanners.add(new ScrollBanner("#bd60f5"));
mScrollBanners.add(new ScrollBanner("#6a63e6"));
mScrollBanners.add(new ScrollBanner("#df3b3b"));
mScrollBanners.add(new ScrollBanner("#f1e599"));

ScrollBanner last = mScrollBanners.get(mScrollBanners.size() - 1);
mScrollBanners.add(mScrollBanners.get(0));
mScrollBanners.add(mScrollBanners.get(1));
mScrollBanners.add(0, last);
mScrollAdapter.notifyDataSetChanged();
}

在Handle中等滚动到倒数第二个数据的时候,我们瞬间切换到第二个数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Override
protected void handleMessage(MainFragment1 ref, Message msg) {
switch (msg.what){
case HAND_BANNER_DELAY_SCROLL:
int position = ref.mScrollPick.getCurrentItem();
if(position == -1) return;
if(ref.mScrollBanners.size() <= 1) return;
if(position == ref.mScrollBanners.size() - 2) {
ref.mScrollPick.scrollToPosition(1);
removeMessages(HAND_BANNER_DELAY_SCROLL);
sendEmptyMessageDelayed(HAND_BANNER_DELAY_SCROLL, 500);
return;
}
ref.mScrollPick.smoothScrollToPosition(position + 1);
ref.sendDelayScrollMsg();
break;
}
}

第三步

我们重写它的onTouchLisenter方法来拦截事件,实现手指悬停停止的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
mScrollPick.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
mHandler.removeMessages(HAND_BANNER_DELAY_SCROLL);
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
sendDelayScrollMsg();
break;
}
return false;
}
});

重写onPause和onResume来取消Handle消息,发送Handle消息来实现停止和播放,这样就可以了。

修改

上面实现有一个bug,如果用手指滑动到最后一个就会出问题,针对这个问题对上面代码进行了修改。

1
2
3
4
5
6
7
8
9
10
11
12
@Override
protected void handleMessage(MainFragment1 ref, Message msg) {
switch (msg.what){
case HAND_BANNER_DELAY_SCROLL:
int position = ref.mScrollPick.getCurrentItem();
if(position == -1) return;
if(ref.mScrollBanners.size() <= 1) return;
ref.mScrollPick.smoothScrollToPosition(position + 1);
ref.sendDelayScrollMsg();
break;
}
}

实现ScrollPick的滚动监听,将之前Handle中对最后替换位置的判断放到这里,就可以实现自动滚动和手动拨动的位置计算了。

1
2
3
4
5
6
7
8
9
 mScrollPick.addOnItemChangedListener(new DiscreteScrollView.OnItemChangedListener<RecyclerView.ViewHolder>() {
@Override
public void onCurrentItemChanged(@Nullable RecyclerView.ViewHolder viewHolder, int adapterPosition) {
XLog.d("adapterPosition == " + adapterPosition);
if(adapterPosition == mScrollBanners.size() - 2) {
mScrollPick.scrollToPosition(1);
}
}
});

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage Element Error Exception Extensions File FileProvider Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code ValueAnimator ViewPropertyAnimator Web Web前端 Workbench api apk bookmark by关键字 compileOnly css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指针 插件 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 源码 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×