博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
纵享丝滑滑动切换的周月日历,水滴效果,丰富自定义日历样式,仿小米日历(ViewDragHelper实现)...
阅读量:7071 次
发布时间:2019-06-28

本文共 7296 字,大约阅读时间需要 24 分钟。

本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发

老规矩先贴效果图

github地址,觉得有帮助的可以给个 star 呗

添加依赖

compile 'com.github.idic779:monthweekmaterialcalendarview:1.7'

具体如何使用看

这个库可以做什么?

  • 可以控制是否允许左右滑动,上下滑动,切换年月

  • 流畅的上下周月模式切换

  • 自定义日历样式

  • 基于 这个库实现,可以根据需求定制效果

    之前开发任务中有涉及到年月日日历的切换效果,由于是需要联动,想到的方向大概有3种,要么通过处理viewtouch事件,要么是通过自定义behavior去实现,要么是通过ViewDragHelper这个神器去实现,网上比较多的是通过自定义behavior去实现,本文使用的是第三种方法,实现的是一个可高度定制自由切换的周月日历视图,提供一种思路去实现页面联动效果。 ##准备

    由于重点实现的是年月切换的效果,本来想着说可以自己写一个日历组件然后再加上ViewDragHelper,应该可以实现周月联动的效果吧?后面想了想,重点在切换那就干脆直接找个开源库稳定性好点的日历组件,所以用快4000start的库吧, ViewDragHelper,作为一个神器可以做很多的事情,官方的DrawerLayoutBottomSheetBehavior用他来实现,为什么用它?对于拖动某个View,如果是自己去重写touch事件的,计算滑动距离再去移动View会需要处理比较多繁琐的代码去实现。如果我们用ViewDragHelper的话能很轻易的实现这样的效果。 简单的介绍下ViewDragHelper

ViewDragHelper helper= ViewDragHelper.create(this, 1.0f, new ViewDragHelper.Callback() {        @Override        public boolean tryCaptureView(View child, int pointerId) {            return true;        }        @Override        public int clampViewPositionHorizontal(View child, int left, int dx)        {            return left;        }        @Override        public int clampViewPositionVertical(View child, int top, int dy)        {            return top;        }        @Override        public int getViewHorizontalDragRange(View child) {            return super.getViewHorizontalDragRange(child);        }        @Override        public int getViewVerticalDragRange(View child) {            return super.getViewVerticalDragRange(child);        }        @Override        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {            super.onViewPositionChanged(changedView, left, top, dx, dy);        }        @Override        public void onViewReleased(View releasedChild, float xvel, float yvel) {            super.onViewReleased(releasedChild, xvel, yvel);        }    });复制代码
  • tryCaptureView():如果返回true,则说明可以捕获该view,我们可以在这里设置捕获的条件
  • clampViewPositionHorizontal ()``clampViewPositionVertical(): 分别对child水平和竖直方向移动的边界进行控制,例如限制周月移动的距离可以在这里做处理
  • onViewPositionChanged() : 当child的位置发生移动时候会回调这个方法
  • onViewReleased():手指释放时候的回调
  • getViewHorizontalDragRange()``getViewVerticalDragRange():返回child横向或者纵向移动的范围,大于0才能捕获。

更多的可以参考鸿洋的

如何实现

既然选择ViewDragHelper要实现周月联动呢,我们来理一理要实现的效果,在月视图的时候,能够把下面的recyclerView上移拖到到周视图的高度,上移过程如果超过一定距离就默认滚动到周视图。 在周视图的的时候又能把recyclerView下移拖动到月视图的高度位置,下移过程如果超过一定距离就默认滚动到月视图。

整体分析

整个页面是由顶部的周名字的View、周模式的MaterialCalendarView、月模式的MaterialCalendarView和最下面的recyclerView组成 需要注意的是MaterialCalendarView 这个库原来是有周名字还有顶部显示日期的, 需要注意的是这里稍微做了下修改把这些给隐藏掉了,具体可以看MaterialCalendarView.setTopbarVisible()。并且做了下修改增加了获得单行的高度方法MaterialCalendarView.getItemHeight() ,即为周模式时显示的高度。

具体实现

  • 拖动前处理 整个页面只有recyclerView ,月模式下如果向上拖动时候如果recyclerView不是滚动到了顶部的话那么就不允许拖动,相关代码
@Override        public boolean tryCaptureView(View child, int pointerId) {            return !mDragHelper.continueSettling(true)                    &&child == mRecyclerView && !animatStart                    && isAtTop(mRecyclerView) &&                                                        !ViewCompat.canScrollVertically(mRecyclerView, -1);        }复制代码
  • 限制recyclerView移动的高度在周模式和月模式之间
@Override       public int clampViewPositionVertical(View child, int top, int dy) {           //决定竖直方向上能移动的距离为 finalWeekModeHeight到finalMonthModeHeight           int topBound = finalWeekModeHeight;           int bottomBound = finalMonthModeHeight;           int newTop = Math.min(Math.max(top, topBound), bottomBound);           return newTop;       }复制代码
  • onMeasure获得初始的一些数据值,包括周模式的高度,月模式的高度,最大移动的距离,单行的高度
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {     super.onMeasure(widthMeasureSpec, heightMeasureSpec);     calendarItemHight = mCalendarViewMonth.getItemHeight();     calendarWeekHight = calendarItemHight;     if (defaultStopHeight == 0) {         defaultStopHeight = getCurrentItemPosition(CalendarDay.today()) * calendarItemHight;     }     calendarMonthHight = mCalendarViewMonth.getMeasuredHeight();     weekViewHight = mTopWeekView.getMeasuredHeight();     finalMonthModeHeight = weekViewHight + calendarMonthHight;     finalWeekModeHeight = calendarItemHight + weekViewHight;     maxOffset = calendarMonthHight - calendarItemHight; }复制代码
  • 然后在onlayout()把布局里的View绘制到对应的位置上面

  • 最大移动的距离defaultStopHeight在选中日期时候就会通过 getCurrentItemPosition()计算出它点击所在的行数再调用setStopItemPosition()就可以得到要停止下来的高度,

  • 接下来说下最关键的地方 既然是周月联动我们发现在拖动recyclerView视图的时候我们会不停回调onViewPositionChanged()这个方法,我们在这个方法里面就可以根据recyclerView移动的距离来移动对应的月视图,

//滑动处理       private void HandlerOffset(View changedView, int left, int top, int dx, int dy) {           //获取日历相对手指移动的相对距离 dy向上移动小于0           transY = transY + dy;           if (transY > 0) {               transY = 0;           }           if (transY < -calendarMonthHight - calendarItemHight) {               transY = -calendarMonthHight - calendarItemHight;           }           float abstransY = Math.abs(transY);           if (dy < 0) {               //如果上滑动,并且滑向动的绝对值距离在超过calendarHight-defaultStopHeight               // 并且小于可以滑动的距离calendarHight-calendarItemHight之间的话               if (abstransY >= (calendarMonthHight - defaultStopHeight) && abstransY < calendarMonthHight - calendarItemHight) {                   if (!animatStart) {                       mCalendarViewMonth.setTranslationY(getOffset((int) mCalendarViewMonth.getTranslationY() + dy, calendarItemHight - defaultStopHeight));                   }               }           }           if (dy > 0) {               if (abstransY < maxOffset                       && currentMode.equals(Mode.WEEK)) {                   mCalendarViewWeek.setVisibility(INVISIBLE);               }               if (abstransY < maxOffset) {                   mCalendarViewMonth.setTranslationY(getOffset((int) mCalendarViewMonth.getTranslationY() + dy, 0));               }           }       }复制代码

月视图的移动我们是通过setTranslationY来移动的,为了防止滑动时候过快通过getOffset()限制一下它滑动的最大距离。

  • 在松开手指的时候我们在onViewReleased()做相关状态的改变,如果滑动的距离超过一定的值就把当前视图置为月模式还是周模式
    @Override      public void onViewReleased(View releasedChild, float xvel, float yvel) {          int moveY = finalMonthModeHeight - mRecyclerView.getTop();          //周模式距离滑动为一行的高度,超过就滑动到周位置          int weekdistance = calendarItemHight;          //最大滑动距离          int maxDistance = calendarMonthHight;          if (currentMode == Mode.MONTH) {              //如果滑动距离超过当前选中项和最大滑动距离之间的距离              if (moveY > weekdistance && moveY < maxDistance) {                  //变为周模式                  setMode(Mode.WEEK);              } else if (moveY <= weekdistance) {                  //变为月模式                  setMode(Mode.MONTH);              }          } else {              //周模式下距离顶部选中日期的距离小于最大滑动距离-10的话就让它变为月模式              if (moveY > maxOffset - 10) {                  //变为周模式                  setMode(Mode.WEEK);              } else if (moveY <= maxOffset - 10) {                  //变为月模式                  setMode(Mode.MONTH);              }          }      }复制代码

需要注意的是在onInterceptTouchEvent()如果是月模式并且可以拖动的时候, 底部的recyclerView是不允许滑动的

if (currentMode == Mode.MONTH&& canDrag) {               setRecyclerViewCanScroll(false);}复制代码

还可以怎么用

接下来说下你可以怎么去定制?如果你想替换项目中的月和周视图的话,不想用 ,很简单,只需要你自己的周月视图必须有一个方法获得单行日历的高度(例如我的库中的MaterialCalendarView.getItemHeight() ),然后把这个月视图和周视图,分别在MonthWeekMaterialCalendarView里面按照顺序放到对应位置即可。然后再setListener()里面设置相关的回调处理,例如日期选中或者月份切换的回调等。

好的大工告成。

转载地址:http://frhll.baihongyu.com/

你可能感兴趣的文章
Drill-on-YARN之部署
查看>>
致我们再也回不去的 Github ...
查看>>
zabbix监控进程存活
查看>>
Generator的正确打开方式
查看>>
机器学习实战-边学边读python代码(3)
查看>>
PostgreSQL jdbc driver的一个不完善之处
查看>>
vue使用vue-router beforEach实现判断用户登录跳转路由筛选
查看>>
JAVAFX之tableview界面实时刷新导致的内存溢出(自己挖的坑,爬着也要出来啊0.0)...
查看>>
软件工程概论项目——第7天
查看>>
LINUX下mysql安装踩过的坑
查看>>
Google 成为 Safari 默认搜索引擎今年需要 90 亿美元
查看>>
UML统一建模语言
查看>>
Kotlin:使用Kotlin开发一个命令行计算器
查看>>
计算机操作系统之存储管理
查看>>
超详细动手搭建一个Vuepress站点及开启PWA与自动部署
查看>>
soap 简单的例子
查看>>
WPF控件
查看>>
社科院报告:建议全国2030年起实行4天工作制
查看>>
基于redis的分布式ID生成器
查看>>
Python之计算24点
查看>>