使用RecycleView实现无限滚动的日历

最终效果

项目地址

一、无限滚动实现

在RecyclerView.Adapter的getItemCount()方法中返回Integer.MAX_VALUE,使用RecycleView的scrollToPosition()方法滚动到一个足够大的位置,这样无限滚动效果就实现好了

二、日期显示

使用RecycleView来实现,需要做的就是填充ItemView,这里为了获取数据集方便,以“月”视图作为ItemView

  • 获取日期算法实现
  1. 第一步:需要创建一个变基(包含年份、月份,以当前日期为变基)
  2. 第二步:根据滑动的deltaPosition计算出年份、月份,得到日期后绑定ItemView就很简单了
public class DateSet {
    private static final String TAG = "DateSet";
    DateCell baseDateCell;
    int basePosition;

    public DateCell getDateCellByPosition(int position, DateCell dc) {
        if (baseDateCell == null) {
            baseDateCell = new DateCell();
            basePosition = position;
            baseDateCell.toCurrentDate();
        }
        int deltaYear = (position - basePosition) / 12;
        int deltaMonth = (position - basePosition) % 12;
        int month = baseDateCell.month + deltaMonth;
        int year = baseDateCell.year + deltaYear;
        if (month <= 0) {
            --year;
            month += 12;
        } else if (month >= 13) {
            ++year;
            month -= 12;
        }
        dc.setDate(year, month);
        LogUtils.d(TAG, "baseDateCell:" + baseDateCell + "\tdc:" + dc);
        return dc;
    }
}
复制代码

三、月份视图实现 这里实现月份视图的方法很多种,在这里我采取的是继承View,然后使用canvas画出来 比较烦人的点就是在计算每一天的位置(left,top,right,bottom),这里为了方便描述就把这个“天”的Cell描述为“DayView”

  • 算法实现
  1. 第一步:上面已经得到年份,月份后,就可以计算出这个月的第一天是星期几、这个月有几周、这个月一共有多少天,画图的时候主要用到这几个信息;
  2. 第二步:DayView的宽刚好占据月视图的1/7,DayView的高度自己可以随便给一个默认值 结合第一步得到的信息计算出这一天的(left,top,right,bottom),然后使用Canvas.drawText()方法画出日期,这里需要注意drawText的第三个参数是baseLine,如果要使用字体剧中的话,basLine一定要算准确

关于baseLine的相关信息(图片来源于网络侵删)

计算DayView的(left,right,top,bottom)关键代码完整代码MonthView.java

for (int week = 0; week < weeks/*这个月的总周数*/; week++) {
            int count = (week == 0) ? 7 - firstDayOfWeek/*1号是一个星期的第几天*/ + 1 : ((week == weeks - 1) ? dateCell.getSumDays() - ((weeks - 2) * 7 + 7 - firstDayOfWeek + 1) : 7);
            for (int index = 0; index < count; index++) {
                String day = String.valueOf(((week == 0) ? index : (week > 1 ? (week - 1) * 7 + 7 - firstDayOfWeek + 1 + index : 7 - firstDayOfWeek + 1 + index)) + 1);
                float l;
                if (week == 0 && firstDayOfWeek > 1) {
                    l = getPaddingLeft() + (firstDayOfWeek - 1 + index) * (getMeasuredWidth() / 7.0F/*day_view_width*/);
                } else {
                    l = getPaddingLeft() + index * (getMeasuredWidth() / 7.0F);
                }
                float t = getPaddingTop() + week * (getMeasuredHeight() / (float) weeks);
                float r = l + getMeasuredWidth() / 7.0F;
                float b = t + getMeasuredHeight() / (float) weeks;
                if (dateCell.isCurMonth() && Integer.parseInt(day) == dateCell.getCurDay()) {
                    canvas.drawCircle(l + (r - l) / 2.0F, t + (b - t) / 2.0F, (r - l) / 4.0F, curDayBgPaint);
                    dayTextPaint.setColor(Color.WHITE);
                } else {
                    dayTextPaint.setColor(Color.BLACK);
                }
                if (week < weeks - 1) {
                    canvas.drawLine(l, b, r, b, bottomLinePaint);
                }
                canvas.drawText(day, l + (r - l) / 2 - dayTextPaint.measureText(day) / 2, t + (b - t) / 2 + (b - t) / 4 - dayTextPaint.getFontMetrics().bottom, dayTextPaint);
                map.put(day, new float[]{l, r, t, b});//存储位置信息,用于获取所点击的具体日期
            }
        }
复制代码
  • 月份视图点击事件的监听

由于月份视图我们是直接继承View,然后使用Canvas话出来的,所以不能简单的setOnXXXListener;这儿我是Override了View的onTouchEvent方法来;对于获取点击的具体日期,方法也很简单,由于月份是一个网格状的,最简单的方法就是先横向遍历确定点击的点在X轴上落在周几,然后就是以步长为7来遍历是在第几周,这样也就确定了点击的具体日期

  • 获取点击的具体日期的算法
private int getDayByPosition(float x/*点击事件的X坐标*/, float y/*点击事件的Y坐标*/) {
        if (map.size() == 0) return 0;
        float[] rectInfo;//[left,right,top,bottom]
        for (int day = 1; day < 8; day++) {//先确定点击的点在周几
            rectInfo = map.get(String.valueOf(day));
            if (x >= rectInfo[0] && x <= rectInfo[1]) {
                while (rectInfo != null && (y < rectInfo[2] || y > rectInfo[3])) {
                    rectInfo = map.get(String.valueOf(day += 7));
                }
                return day > sumDays/*这个月的总天数*/ ? 0 : day;
            }
        }
        return 0;
    }
复制代码

到这里所有基本工作基本完成,接下来就是组装RecycleView的过程,这里就不细说了;关于RecycleView吸顶效果实现可以参考其他人的实现方式,只要知道ItemDecoration的三个关键方法(getItemOffsets,onDraw,onDrawOver)基本没问题;

  • 项目中用到的一些获取日期的方法完整代码
public int getSumWeeksOfMonth() {//获取一个月的总周数
        Calendar calendar = Calendar.getInstance();
        calendar.set(year, month - 1, sumDays);
        return calendar.get(Calendar.WEEK_OF_MONTH);
    }

    public int getFirstDayOfWeek() {// 这个月的一号是这周的第几天,星期天为第一天
        Calendar calendar = Calendar.getInstance();
        calendar.set(year, month - 1, 1);
        return calendar.get(Calendar.DAY_OF_WEEK);
    }

    private static int getDaysOfMonth(int year, int moth) {//获取这个月的总天数
        Calendar c = Calendar.getInstance();
        c.set(Calendar.YEAR, year);
        c.set(Calendar.MONTH, moth - 1);
        c.set(Calendar.DATE, 1);
        c.roll(Calendar.DATE, -1);
        return c.get(Calendar.DATE);
    }
复制代码

缺陷: 目前还不支持阴历、节假日显示

项目地址

转载于:https://juejin.im/post/5cb0865f6fb9a0689455a8c9

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值