如何给calendar6.0 日历月视图添加左右滑动的功能

公司最近做要在Android6.0原生日历基础上 定制自己的功能,也就是希望可以在月视图上加一个左右滑动的功能,经过本人几天的研究,终于搞出了这个功能。

实现步骤

1.自定义mothview 部分代码

继承view 绘制自己的monthview

在onDraw写的代码

protected void onDraw(Canvas canvas) {
        if (mRedrawScreen) {
            if (mCanvas == null) {
                drawingCalc(getWidth(), getHeight());
            }

            // If we are zero-sized, the canvas will remain null so check again
            if (mCanvas != null) {
                // Clear the background
                final Canvas bitmapCanvas = mCanvas;
                bitmapCanvas.drawColor(0, PorterDuff.Mode.CLEAR);
                doDraw(bitmapCanvas);
                mRedrawScreen = false;
            }
        }

        // If we are zero-sized, the bitmap will be null so guard against this
        if (mBitmap != null) {
            canvas.drawBitmap(mBitmap, mBitmapRect, mBitmapRect, null);
        }

       // sendAccessibilityEvents();
    }
private void doDraw(Canvas canvas) {
    boolean isLandscape = getResources().getConfiguration().orientation
            == Configuration.ORIENTATION_LANDSCAPE;

    Paint p = new Paint();
    Rect r = mRect;
    int columnDay1 = mCursor.getColumnOf(1);

    // Get the Julian day for the date at row 0, column 0.
    int day = mFirstJulianDay - columnDay1;

    int weekNum = 0;
    Calendar calendar = null;
    if (mShowWeekNumbers) {
        calendar = Calendar.getInstance();
        boolean noPrevMonth = (columnDay1 == 0);

        // Compute the week number for the first row.
        weekNum = getWeekOfYear(0, 0, noPrevMonth, calendar);
    }

    for (int row = 0; row < 6; row++) {
        for (int column = 0; column < 7; column++) {
            drawBox(day, weekNum, row, column, canvas, p, r, isLandscape);
            day += 1;
        }

        if (mShowWeekNumbers) {
            weekNum += 1;
            if (weekNum >= 53) {
                boolean inCurrentMonth = (day - mFirstJulianDay < 31);
                weekNum = getWeekOfYear(row + 1, 0, inCurrentMonth, calendar);
            }
        }
    }

    drawGrid(canvas, p);
}
2.用fragment 显示monthview 部分代码
public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

            View view = inflater.inflate(R.layout.month_activity, container, false);

            TextView title = (TextView) view.findViewById(R.id.title);
            title.setText(Utils.formatMonthYear(getActivity(), mTime));

            mEventLoader = new EventLoader(getActivity());
            mProgressBar = (ProgressBar) view.findViewById(R.id.progress_circular);

            // Get first day of week based on locale and populate the day headers
            mStartDay = Calendar.getInstance().getFirstDayOfWeek();
            int diff = mStartDay - Calendar.SUNDAY - 1;
            final int startDay = Utils.getFirstDayOfWeek(getActivity());
            final int sundayColor = getResources().getColor(R.color.sunday_text_color);
            final int saturdayColor = getResources().getColor(R.color.saturday_text_color);

            for (int day = 0; day < 7; day++) {
                final String dayString = DateUtils.getDayOfWeekString(
                        (DAY_OF_WEEK_KINDS[day] + diff) % 7 + 1, DateUtils.LENGTH_MEDIUM);

                final TextView label = (TextView)                                                  view.findViewById(DAY_OF_WEEK_LABEL_IDS[day]);
                label.setText(dayString);
                if (Utils.isSunday(day, startDay)) {
                    label.setTextColor(sundayColor);
                } else if (Utils.isSaturday(day, startDay)) {
                    label.setTextColor(saturdayColor);
                }
            }
            mSwitcher = (ViewSwitcher) view.findViewById(R.id.switcher);
            mSwitcher.setFactory(this);
            mSwitcher.getCurrentView().requestFocus();

            mInAnimationPast.setAnimationListener(this);
            mInAnimationFuture.setAnimationListener(this);
        return view;
    }
3.点击月视图tab跳转到我自己写的fragment 。

1.
这里写图片描述

2.这里写图片描述

4.源码地址:http://download.csdn.net/detail/feipeng_/9543827
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
要实现左右滑动切换日历,你可以在van-calendar组件外层包裹一个容器,并在该容器上绑定`touchstart`、`touchmove`、`touchend`等事件,通过计算手指在屏幕上的移动距离和时间,来判断手指的滑动方向和强度,并根据滑动方向来切换日历的显示日期。 以下是一个简单的实现示例: ```html <template> <div class="calendar-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"> <van-calendar v-model="currentDate" /> </div> </template> <script> export default { data() { return { currentDate: new Date(), startX: 0, startY: 0, startTime: 0, deltaX: 0, deltaY: 0, endTime: 0, }; }, methods: { handleTouchStart(e) { this.startX = e.touches[0].clientX; this.startY = e.touches[0].clientY; this.startTime = new Date().getTime(); this.deltaX = 0; this.deltaY = 0; }, handleTouchMove(e) { this.deltaX = e.touches[0].clientX - this.startX; this.deltaY = e.touches[0].clientY - this.startY; }, handleTouchEnd() { this.endTime = new Date().getTime(); const duration = this.endTime - this.startTime; const absDeltaX = Math.abs(this.deltaX); const absDeltaY = Math.abs(this.deltaY); if (duration < 500 && absDeltaX > 50 && absDeltaX > absDeltaY) { const direction = this.deltaX > 0 ? 'right' : 'left'; const newDate = direction === 'right' ? new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1) : new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1); this.currentDate = newDate; } }, }, }; </script> ``` 这段代码中,我们在`div`容器上绑定了`touchstart`、`touchmove`、`touchend`等事件,分别对应手指触摸、移动和离开屏幕时的操作。在`handleTouchStart`方法中,我们记录下手指触摸时的起始位置和时间,并初始化滑动距离为0。在`handleTouchMove`方法中,我们计算手指在屏幕上的移动距离。在`handleTouchEnd`方法中,我们计算手指离开屏幕时的时间,并判断滑动的时间、距离和方向,如果判断为左右滑动且距离足够大且时间足够短,则切换日历的显示日期。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BFP_BSP

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值