仿MIUI日历

前言

这个日历是一个仿MIUI交互的日历，尽可能实现MIUI日历的交互设计，加入了一些自定义属性，如设置默认视图，设置一周的第一天是周日还是周一等。这个日历是在之前我写的那个日历基础上改的，里面的关于绘制的部分和之前是一样的，这篇文章就不再说了，这次主要说一下怎么实现miui日历的滑动效果。

效果图

项目地址

https://github.com/yannecer/NCalendar

下载Demo

点击下载demo

日历实现思路

1、视图切换。周日历显示的位置是不变的，一直都在布局的顶部，可以固定在顶部，NCalendar类主要控制月日历MonthCalendar和NestedScrollingChild，随着滑动位置的变化控制周日历的显示和隐藏。

2、滑动的处理。计算不同选中日期月日历MonthCalendar和NestedScrollingChild的子类所需要滑动的距离，使用View的offsetTopAndBottom(int offset)方法完成滑动。

具体实现

1、初始化NCalendar类

在NCalendar类的构造方法中，首先new了一个月日历MonthCalendar和一个周日历WeekCalendar，并确定这两个日历的高度，月日历的高度可以通过自定义属性设置，默认为300dp，周日历则为月日历的五分之一，然后把月日历MonthCalendar和周日历WeekCalendar通过addView方法添加到NCalendar中，在onLayout中排列各自的位置。代码

public NCalendar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        monthCalendar = new MonthCalendar(context, attrs);        weekCalendar = new WeekCalendar(context, attrs);        weekHeigh = monthHeigh / 5;        monthCalendar.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, monthHeigh));        weekCalendar.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, weekHeigh));        addView(monthCalendar);        addView(weekCalendar);        post(new Runnable() {            @Override            public void run() {                weekCalendar.setVisibility(STATE == MONTH ? INVISIBLE : VISIBLE);            }        });    }

实际项目中，构造方法中还有设置默认视图，初始化动画等，这里只贴出来关键代码。

2、onNestedPreScroll

NCalendar实现了NestedScrollingParent，主要的交互都在这两个方法中完成，onNestedPreScroll和onStopNestedScroll，前一个是嵌套滑动时调用，后一个是停止滑动的回调。我们需要在onNestedPreScroll中完成上滑和下滑时，改变月日历MonthCalendar和NestedScrollingChild的位置，在onStopNestedScroll中完成手指离开后自动滑动。miui日历的上滑操作是先让月日历滑动到选中的选中的那一行，再向上移动NestedScrollingChild，下滑时也是先移动月日历，再移动NestedScrollingChild。NClendar在处理这个滑动时分了四种情况：

月日历和NestedScrollingChild同时上滑。月日历上滑到一定位置后，NestedScrollingChild单独上滑。月日历和NestedScrollingChild同时下滑。月日历下滑到一定位置后，NestedScrollingChild单独下滑。

这四种情况判断的条件就是月日历和NestedScrollingChild距离顶部的位置。NestedScrollingChild距顶部距离的判断比较简单，月视图时，距离就是月日历的高度，周视图时就是周日历的高度。月日历距顶部的距离稍微复杂一下，需要先计算出来月日历总共需要滑动的距离monthCalendarOffset，再通过offsetTopAndBottom移动，移动的时候，不断获取月日历的getTop()，当getTop()达到总的偏移量时，就说明月日历已经移动到指定位置，接下来就是NestedScrollingChild单独滑动。上滑下滑都是这个逻辑。代码：

 @Override    public void onNestedPreScroll(View target, int dx, int dy, int[] consumed) {        int monthTop = monthCalendar.getTop();        int nestedScrollingChildTop = nestedScrollingChild.getTop();        monthCalendarOffset = getMonthCalendarOffset();        //4种情况        if (dy > 0 && Math.abs(monthTop) < monthCalendarOffset) {            //月日历和nestedScrollingChild同时上滑            int offset = getOffset(dy, monthCalendarOffset - Math.abs(monthTop));            monthCalendar.offsetTopAndBottom(-offset);            nestedScrollingChild.offsetTopAndBottom(-offset);            consumed[1] = dy;        } else if (dy > 0 && nestedScrollingChildTop > weekHeigh) {            //月日历滑动到位置后，nestedScrollingChild继续上滑，覆盖一部分月日历            int offset = getOffset(dy, nestedScrollingChildTop - weekHeigh);            nestedScrollingChild.offsetTopAndBottom(-offset);            consumed[1] = dy;        } else if (dy < 0 && monthTop != 0 && !ViewCompat.canScrollVertically(target, -1)) {            //月日历和nestedScrollingChild下滑            int offset = getOffset(Math.abs(dy), Math.abs(monthTop));            monthCalendar.offsetTopAndBottom(offset);            nestedScrollingChild.offsetTopAndBottom(offset);            consumed[1] = dy;        } else if (dy < 0 && monthTop == 0 && nestedScrollingChildTop != monthHeigh && !ViewCompat.canScrollVertically(target, -1)) {            //月日历滑动到位置后，nestedScrollingChild继续下滑            int offset = getOffset(Math.abs(dy), monthHeigh - nestedScrollingChildTop);            nestedScrollingChild.offsetTopAndBottom(offset);            consumed[1] = dy;        }        //nestedScrollingChild滑动到周位置后，标记状态，同时周日显示        if (nestedScrollingChildTop == weekHeigh) {            STATE = WEEK;            weekCalendar.setVisibility(VISIBLE);        }        //周状态，下滑显示月日历，把周日历隐掉        if (STATE == WEEK && dy < 0 && !ViewCompat.canScrollVertically(target, -1)) {            weekCalendar.setVisibility(INVISIBLE);        }        //彻底滑到月日历，标记状态        if (nestedScrollingChildTop == monthHeigh) {            STATE = MONTH;        }    }

根据需求，需要判断NestedScrollingChild的条目已经不能再滑动时才移动NestedScrollingChild本身。在滑动过程中，要标记当前视图的状态 MONTH 或者WEEK。其中计算monthCalendarOffset的方法：

    //月日历需要滑动的距离，    private int getMonthCalendarOffset() {        NMonthView currectMonthView = monthCalendar.getCurrectMonthView();        //该月有几行        int rowNum = currectMonthView.getRowNum();        //现在选中的是第几行        int selectRowIndex = currectMonthView.getSelectRowIndex();        //month需要移动selectRowIndex*h/rowNum ,计算时依每个行高的中点计算        int monthCalendarOffset = selectRowIndex * currectMonthView.getDrawHeight() / rowNum;        return monthCalendarOffset;    }

计算方法是，得到当前月的View NMonthView ，再通过该月的行数（5或6）、被选中的日期在哪一行以及NMonthView 的绘制高度算出月日历需要移动的距离。月日历的绘制高度和月日历的高度不是一个数值，因为当月份有6行时，公历日期绘制在一行的中间位置，下面的农历就没有太多的地方绘制，在最后一行的农历就会和月日历底部非常接而影响美观，为了避免这种情况，日历View绘制的时候，把绘制高度比日历高度小了一点，这里需要计算的移动量是由绘制区域的行高决定。

3、onStopNestedScroll

这个方法处理自动滑动的问题。在滑动过程中如果松手，日历要自动回到对应的位置，对应的位置就是说，滑动的距离小时，还回到原来的位置，滑动的距离大时，回到相反的位置。这里的动画用的是ValueAnimator，在初始化NCalendar时，new了两个ValueAnimator对象，在onStopNestedScroll回调时，分别给他们的起始值和结束值，再通过动画中得到的getAnimatedValue值，计算偏移量，执行offsetTopAndBottom方法，完成动画。

    @Override    public void onStopNestedScroll(View target) {         //停止滑动的时候，距顶部的距离        int monthCalendarTop = monthCalendar.getTop();        int nestedScrollingChildTop = nestedScrollingChild.getTop();        if (monthCalendarTop == 0 && nestedScrollingChildTop == monthHeigh) {            return;        }        if (monthCalendarTop == -monthCalendarOffset && nestedScrollingChildTop == weekHeigh) {            return;        }        if (STATE == MONTH) {        //nestedScrollingChild移动的超过周高度时才会滑动到周            if (monthHeigh - nestedScrollingChildTop < weekHeigh) {                autoScroll(monthCalendarTop, 0, nestedScrollingChildTop, monthHeigh);            } else {                autoScroll(monthCalendarTop, -monthCalendarOffset, nestedScrollingChildTop, weekHeigh);            }        } else {          //nestedScrollingChild移动的超过周高度时才会滑动到月            if (nestedScrollingChildTop < weekHeigh * 2) {                autoScroll(monthCalendarTop, -monthCalendarOffset, nestedScrollingChildTop, weekHeigh);            } else {                autoScroll(monthCalendarTop, 0, nestedScrollingChildTop, monthHeigh);            }        }    }

autoScroll方法：

//自动滑动    private void autoScroll(int startMonth, int endMonth, int startChild, int endChild) {        monthValueAnimator.setIntValues(startMonth, endMonth);        monthValueAnimator.setDuration(duration);        monthValueAnimator.start();        nestedScrollingChildValueAnimator.setIntValues(startChild, endChild);        nestedScrollingChildValueAnimator.setDuration(duration);        nestedScrollingChildValueAnimator.start();    }

ValueAnimator动画的回调：

    @Override    public void onAnimationUpdate(ValueAnimator animation) {        if (animation == monthValueAnimator) {            int animatedValue = (int) animation.getAnimatedValue();            int top = monthCalendar.getTop();            int i = animatedValue - top;            monthCalendar.offsetTopAndBottom(i);        }        if (animation == nestedScrollingChildValueAnimator) {            int animatedValue = (int) animation.getAnimatedValue();            int top = nestedScrollingChild.getTop();            int i = animatedValue - top;            nestedScrollingChild.offsetTopAndBottom(i);        }    }

到此，交互的部分就结束了。

其他问题

写完 以上这些，这个日历算是基本完工，但是还是有不少bug的，其他的问题，就在写的过程中解决的一些bug。

1、滑动过快的问题

快速滑动nestedScrollingChild时，有时会出现不友好的情况，这有两个地方做了限制。
一个是NestedScrollingParent中的onNestedPreFling方法：

@Override    public boolean onNestedPreFling(View target, float velocityX, float velocityY) {        //防止快速滑动        int nestedScrollingChildTop = nestedScrollingChild.getTop();        if (nestedScrollingChildTop > weekHeigh) {            return true;        }        return false;    }

上面的方法主要限制nestedScrollingChild的快速滑动。还有一个地方是月日历的快速移动，是滑动到边界的问题：

    private int getOffset(int offset, int maxOffset) {        if (offset > maxOffset) {            return maxOffset;        }        return offset;    }

这个方法是获取偏移量的时候，如果得到的数值大于需要的最大值，则返回最大值，防止出现view越界的情况。

2、翻页闪烁的问题 onLayout

这个问题，是当滑动到相应位置后，左右翻页月日历，会出现月日历返回到原来移动之前的位置上，造成闪烁，并且此时位置也乱了。这时就需要在onLayout重新确定月日历和nestedScrollingChild的位置，需要在每次操作之后执行requestLayout()方法：

 @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        //  super.onLayout(changed, l, t, r, b);        if (STATE == MONTH) {            monthCalendarTop = monthCalendar.getTop();            childViewTop = nestedScrollingChild.getTop() == 0 ? monthHeigh : nestedScrollingChild.getTop();        } else {            monthCalendarTop = -getMonthCalendarOffset();            childViewTop = nestedScrollingChild.getTop() == 0 ? weekHeigh : nestedScrollingChild.getTop();        }        monthCalendar.layout(0, monthCalendarTop, r, monthHeigh + monthCalendarTop);        ViewGroup.LayoutParams layoutParams = nestedScrollingChild.getLayoutParams();        nestedScrollingChild.layout(0, childViewTop, r, layoutParams.height + childViewTop);    }

3、滑动到周日历底部空白的问题 onMeasure

onMeasure的问题，当日历滑动到周日历的之后，NestedScrollingChild下方会出现空白，这个空白是由于NestedScrollingChild上移造成的，因为NestedScrollingChild高度一定，上移以后，下面没有东西了自然就会留空。我们可以把NestedScrollingChild的高度变高，这样上滑之后，之前没有显示的那部分就会显示出来，就不会有空白了。观察之后会发现，NestedScrollingChild移动到周日历的位置后，整个View上面是周日历，下面是NestedScrollingChild，所以我们可以把NestedScrollingChild的高度变成整个View的高度和周日历高度之差，这样就可以了：

    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        ViewGroup.LayoutParams layoutParams = nestedScrollingChild.getLayoutParams();        layoutParams.height = getMeasuredHeight() - weekHeigh;    }

至此，这个日历算是完成了。