Android项目开发笔记之Material日历模块实现(支持滑动or直接选择年月)

写在前面

  本系列第二篇(隔了好久的感觉orz)。本篇主要讲的是很多App里都会有的日历模块实现,基于Github上一个优秀的开源项目进行了扩展,支持滑动切换月份以及下拉直接选择年月~

实现效果

先放一下实现的效果图:

引入插件

  • 在app/build.gradle的dependencies中增加:
    compile 'com.haibin:calendarview:3.2.0'
  • 重新sync

定义布局

<com.haibin.calendarview.CalendarView
    android:id="@+id/history_calendarView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="5"
    android:background="@color/colorPrimary"
    app:month_view="你的包名.CustomMonthView"
    app:week_bar_view="你的包名.EnglishWeekbar"
    app:week_line_background="@color/white"
    app:calendar_height="37dp"
    app:current_day_text_color="#d94373"
    app:selected_theme_color="@color/white"
    app:lunar_text_size="0sp"
    app:min_year="2018"
    app:max_year="2050"
    app:month_view_show_mode="mode_all"
    app:other_month_text_color="#82ffffff"
     />

自定义MonthView(选中日期时效果 & 特殊事件效果)

  • 新建CustomMonthView.java,代码如下:
public class CustomMonthView extends MonthView {
    private int mRadius;

    public CustomMonthView(Context context) {
        super(context);
        mSchemePaint.setColor(Color.WHITE);
        mSchemeTextPaint.setColor(Color.GREEN);
    }

    @Override
    protected void onPreviewHook() {
        mRadius = Math.min(mItemWidth, mItemHeight) / 5 * 2;
        mCurMonthTextPaint.setColor(Color.WHITE);// 白色圆圈
        mSchemePaint.setStyle(Paint.Style.FILL);
        mSelectTextPaint.setColor(getResources().getColor(R.color.colorPrimary));
        setLayerType( LAYER_TYPE_SOFTWARE , null);
    }

    @Override
    protected void onLoopStart(int x, int y) {

    }

    @Override
    protected boolean onDrawSelected(Canvas canvas, Calendar calendar, int x, int y, boolean hasScheme) {
        // 画白色圆圈
        int cx = x + mItemWidth / 2;
        int cy = y + mItemHeight / 2;
        canvas.drawCircle(cx, cy, mRadius, mSelectedPaint);
        return false;
    }

    @Override
    protected void onDrawScheme(Canvas canvas, Calendar calendar, int x, int y) {
        // 画右上角白点,表示特殊日期
        int cx = x + 4*mItemWidth / 5;
        int cy = y + mItemHeight / 5;
        canvas.drawCircle(cx, cy, mRadius/4, mSchemePaint);
    }

    @Override
    protected void onDrawText(Canvas canvas, Calendar calendar, int x, int y, boolean hasScheme, boolean isSelected) {
        float baselineY = mTextBaseLine + y;
        int cx = x + mItemWidth / 2;
        if (isSelected) {
            canvas.drawText(String.valueOf(calendar.getDay()),
                    cx,
                    baselineY,
                    mSelectTextPaint);
        }else if (hasScheme) {
            canvas.drawText(String.valueOf(calendar.getDay()),
                    cx,
                    baselineY,
                    calendar.isCurrentDay() ? mCurDayTextPaint :
                            calendar.isCurrentMonth() ? mSchemeTextPaint : mOtherMonthTextPaint);

        } else {
            canvas.drawText(String.valueOf(calendar.getDay()), cx, baselineY,
                    calendar.isCurrentDay() ? mCurDayTextPaint :
                            calendar.isCurrentMonth() ? mCurMonthTextPaint : mOtherMonthTextPaint);
        }
    }
}

自定义WeekBar(英文版)

默认Weekbar是中文的,个人觉得英文的看起来比较舒服,所以自定义了一个,步骤如下:

  1. 新建english_weekbar.xml,内容是7个TextView,代表周一到周日,代码比较简单就不贴了
  2. 新建EnglishWeekbar.java,加载english_weekbar.xml布局,代码如下:
public class EnglishWeekbar extends WeekBar {
    public EnglishWeekbar(Context context) {
        super(context);
        LayoutInflater.from(context).inflate(R.layout.english_week_bar, this, true);
    }
}

制作下拉选择控件(使用Spinner)

同样介绍一个github上的项目,可定制项比较丰富,且有Material效果。

  • 引入:implementation 'com.jaredrummler:material-spinner:1.2.4@aar'
  • xml中使用:
   <com.jaredrummler.materialspinner.MaterialSpinner
        android:id="@+id/dateSpinner"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginStart="85dp"
        app:ms_background_color="@color/colorPrimary"
        app:ms_background_selector="@color/colorPrimary"
        app:ms_arrow_tint="@color/white"
        app:ms_dropdown_height="250dp"
        app:ms_hint_color="@color/black"
        app:ms_text_color="@color/white"
        android:textSize="18sp" />
  • activity中往Spinner填充日期数据(范围为2018年-2050年)
    private int currentIndex;
    void initData(){
        currentIndex = 1;
        int cur_year = Util.getYear(new Date());
        int cur_month = Util.getMonth(new Date());

        List<String> dateList = new ArrayList<>();
        for(int year=2018; year<=2050; year++){
            for(int month=1;month<=12;month++){
                dateList.add(year+"-"+month);
                if(year <= cur_year && month < cur_month) currentIndex++;
            }
        }
        dateSpinner.setItems(dateList);// 填充数据
        dateSpinner.setSelectedIndex(currentIndex);// 默认选中当前月
    }

控件组合

  不难发现,上面定义的这两个控件其实是没有关系的,那么怎么实现滑动切换的时候,Spinner显示的日期也会改变,而下拉选择某月后,CalendarView又会滑动到目标月份呢?其实也不难,只需要监听二者相应的事件,再进行处理即可,具体步骤如下:
1. 监听calendarView的onMonthChanged事件

    // 滑动日历时更改Title显示,根据与当前月份的偏移量计算目标月份在Spinner中的索引值
    calendarView.setOnMonthChangeListener(new CalendarView.OnMonthChangeListener() {
        @Override
        public void onMonthChange(int year, int month) {
            int cur_month = calendarView.getCurMonth();
            int cur_year = calendarView.getCurYear();
            int offset;
            if(cur_year == year){
                offset = month - cur_month;
            }else{
                offset = (year - cur_year)*12 + month - cur_month;
            }
            dateSpinner.setSelectedIndex(currentIndex + offset);
        }
    });

2.监听dateSpinner的onItemSelected事件

    // 年月选择监听,提取点击项的年份及月份,滑动日历至目标月份
    dateSpinner.setOnItemSelectedListener(new MaterialSpinner.OnItemSelectedListener<String>() {
        @Override
        public void onItemSelected(MaterialSpinner view, int position, long id, String item) {
            String[] dateStr = item.split("-");
            int year = Integer.parseInt(dateStr[0]);
            int month = Integer.parseInt(dateStr[1]);
            calendarView.scrollToCalendar(year,month,1);
        }
    });

其他

  1. 使用calendarView.setSchemeDate(dateList)可以设置特殊日期
  2. com.haibin.calendarview中也有一个Calendar类,不要和java.util.Calendar混了,特别在进行java.util.Date和calendar的转换时需要注意。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值