devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android自定义日历功能_android 自定义日历

作者：繁依Fanyi0 | 2024-05-06 07:54:43

赞

踩

android 自定义日历

背景

        Android开发，经常会使用到日历开发，实现方式有自定义或者第三方框架基础上修改。这里推荐使用第三方框架基础上修改。com.haibin.calendarview.CalendarView，为此本demo亦是在此框架基础上自定义样式，实现理想的日历。实现的功能有：

        1、自定义星期标题

        2、标记对应日程提醒，如图日期提醒标记---铃铛

        3、节假日与节气文字自定义

        4、自定义日历两边文字显色，例如星期日与星期六那两列的公历日期文字为淡红色

        5、自定义日历网格线

效果如下图

一、日历框架属性基本介绍

    1.依赖

  1.     //日历 android 引入  
  2.     implementation 'com.haibin:calendarview:3.6.8'
  3.  
  4.     //日历 androidx 引入
  5.     implementation 'com.haibin:calendarview:3.7.1'

    2.属性介绍

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <declare-styleable name="CalendarView">
  4.  
  5.         <attr name="calendar_padding" format="dimension" /><!--日历内部左右padding-->
  6.         <attr name="calendar_padding_left" format="dimension" /><!--日历内部左padding-->
  7.         <attr name="calendar_padding_right" format="dimension" /><!--日历内部右padding-->
  8.  
  9.  
  10.         <attr name="week_background" format="color" /><!--周背景-->
  11.         <attr name="week_line_background" format="color" /><!--线条颜色-->
  12.         <attr name="week_text_color" format="color" /><!--周栏字体颜色-->
  13.         <attr name="week_text_size" format="dimension" /><!--周栏字体大小-->
  14.         <attr name="week_line_margin" format="dimension" /><!--线条margin-->
  15.  
  16.         <attr name="month_view" format="string" /><!--完全自定义月视图-->
  17.         <attr name="week_view" format="string" /> <!--完全自定义周视图-->
  18.         <attr name="year_view" format="string" /> <!--完全自定义年视图-->
  19.         <attr name="week_bar_height" format="dimension" /> <!--星期栏的高度-->
  20.         <attr name="week_bar_view" format="string" /> <!--如果需要的话使用自定义星期栏-->
  21.  
  22.         <attr name="scheme_text" format="string" />
  23.         <attr name="day_text_size" format="dimension" />
  24.         <attr name="lunar_text_size" format="dimension" />
  25.         <attr name="calendar_height" format="dimension" />
  26.         <attr name="calendar_match_parent" format="boolean" /> <!-- 全屏日历 -->
  27.         <attr name="scheme_text_color" format="color" />
  28.         <attr name="scheme_month_text_color" format="color" />
  29.         <attr name="scheme_lunar_text_color" format="color" />
  30.         <attr name="scheme_theme_color" format="color" />
  31.  
  32.         <attr name="selected_theme_color" format="color" />
  33.         <attr name="selected_text_color" format="color" />
  34.         <attr name="selected_lunar_text_color" format="color" />
  35.  
  36.         <attr name="current_day_text_color" format="color" />
  37.         <attr name="current_day_lunar_text_color" format="color" />
  38.         <attr name="current_month_text_color" format="color" />
  39.         <attr name="other_month_text_color" format="color" />
  40.         <attr name="current_month_lunar_text_color" format="color" />
  41.         <attr name="other_month_lunar_text_color" format="color" />
  42.  
  43.  
  44.         <!-- 年视图相关 -->
  45.         <attr name="year_view_month_text_size" format="dimension" />
  46.         <attr name="year_view_day_text_size" format="dimension" />
  47.         <attr name="year_view_month_text_color" format="color" />
  48.         <attr name="year_view_current_day_text_color" format="color" />
  49.         <attr name="year_view_day_text_color" format="color" />
  50.         <attr name="year_view_select_text_color" format="color" />
  51.         <attr name="year_view_scheme_color" format="color" />
  52.         <attr name="year_view_background" format="color" />
  53.         <attr name="year_view_month_height" format="dimension" />
  54.         <attr name="year_view_week_height" format="dimension" />
  55.         <attr name="year_view_week_text_size" format="dimension" />
  56.         <attr name="year_view_week_text_color" format="color" />
  57.  
  58.         <attr name="year_view_padding" format="dimension" />
  59.         <attr name="year_view_padding_left" format="dimension" />
  60.         <attr name="year_view_padding_right" format="dimension" />
  61.  
  62.         <attr name="year_view_month_padding_top" format="dimension" />
  63.         <attr name="year_view_month_padding_left" format="dimension" />
  64.         <attr name="year_view_month_padding_right" format="dimension" />
  65.         <attr name="year_view_month_padding_bottom" format="dimension" />
  66.  
  67.         <!--日期范围-->
  68.         <attr name="min_year" format="integer" />
  69.         <attr name="max_year" format="integer" />
  70.         <attr name="min_year_month" format="integer" />
  71.         <attr name="max_year_month" format="integer" />
  72.         <attr name="min_year_day" format="integer" />
  73.         <attr name="max_year_day" format="integer" />
  74.  
  75.  
  76.         <!--月视图是否可滚动-->
  77.         <attr name="month_view_scrollable" format="boolean" />
  78.         <!--周视图是否可滚动-->
  79.         <attr name="week_view_scrollable" format="boolean" />
  80.         <!--年视图是否可滚动-->
  81.         <attr name="year_view_scrollable" format="boolean" />
  82.  
  83.         <!-- 月份显示模式 -->
  84.         <attr name="month_view_show_mode">
  85.             <enum name="mode_all" value="0" />
  86.             <enum name="mode_only_current" value="1" />
  87.             <enum name="mode_fix" value="2" />
  88.         </attr>
  89.  
  90.         <!-- 自定义周起始 -->
  91.         <attr name="week_start_with">
  92.             <enum name="sun" value="1" />
  93.             <enum name="mon" value="2" />
  94.             <enum name="sat" value="7" />
  95.         </attr>
  96.  
  97.         <!-- 自定义选择模式 -->
  98.         <attr name="select_mode">
  99.             <enum name="default_mode" value="0" />
  100.             <enum name="single_mode" value="1" />
  101.             <enum name="range_mode" value="2" />
  102.             <enum name="multi_mode" value="3" />
  103.         </attr>
  104.  
  105.         <!-- when select_mode = multi_mode -->
  106.         <attr name="max_multi_select_size" format="integer" />
  107.  
  108.         <!-- when select_mode = range_mode -->
  109.         <attr name="min_select_range" format="integer" />
  110.         <attr name="max_select_range" format="integer" />
  111.  
  112.         <!-- auto select day -->
  113.         <attr name="month_view_auto_select_day">
  114.             <enum name="first_day_of_month" value="0" />
  115.             <enum name="last_select_day" value="1" />
  116.             <enum name="last_select_day_ignore_current" value="2" />
  117.         </attr>
  118.     </declare-styleable>
  119.  
  120.  
  121.     <declare-styleable name="CalendarLayout">
  122.         <attr name="default_status">
  123.             <enum name="expand" value="0" />
  124.             <enum name="shrink" value="1" />
  125.         </attr>
  126.  
  127.  
  128.         <!-- 手势模式 -->
  129.         <attr name="gesture_mode">
  130.             <enum name="default_mode" value="0" />
  131.             <!--<enum name="only_calendar" value="1" />-->
  132.             <enum name="disabled" value="2" />
  133.         </attr>
  134.  
  135.         <attr name="calendar_show_mode">
  136.             <enum name="both_month_week_view" value="0" />
  137.             <enum name="only_week_view" value="1" />
  138.             <enum name="only_month_view" value="2" />
  139.         </attr>
  140.         <attr name="calendar_content_view_id" format="integer" />
  141.     </declare-styleable>
  142.  
  143.  
  144. </resources>

二、本demo实现步骤

1.依赖

  1.     //日历 android 引入  
  2.     implementation 'com.haibin:calendarview:3.6.8'
  3.  
  4.     //日历 androidx 引入
  5.     implementation 'com.haibin:calendarview:3.7.1'

2.xml布局

  1.  <com.haibin.calendarview.CalendarView
  2.                     android:id="@+id/mCalendarView"
  3.                     android:layout_width="416dp"
  4.                     android:layout_height="@dimen/dimen_322"
  5.                     android:layout_marginLeft="@dimen/dp_2"
  6.                     android:layout_marginRight="@dimen/dp_2"
  7.                     android:layout_marginBottom="@dimen/dp_2"
  8.                     android:background="@drawable/data_cl_bg"
  9.                     app:calendar_height="@dimen/dp_50"
  10.                     app:current_day_lunar_text_color="#2856AC"
  11.                     app:current_day_text_color="#2856AC"
  12.                     app:min_year="2023"
  13.                     app:month_view="csu.xiaoya.robotApp.ui.activity.homepage.calendar.CustomMonthView"
  14.                     app:other_month_lunar_text_color="@color/white"
  15.                     app:other_month_text_color="@color/white"
  16.                     app:scheme_lunar_text_color="@color/color_grey_9"
  17.                     app:scheme_text_color="@color/color333"
  18.                     app:select_mode="default_mode"
  19.                     app:selected_lunar_text_color="@color/white"
  20.                     app:selected_text_color="@color/white"
  21.                     app:selected_theme_color="#4868C3"
  22.                     app:week_background="#172B7C"
  23.                     app:week_bar_height="@dimen/dp_24"
  24.                     app:week_bar_view="csu.xiaoya.robotApp.ui.activity.homepage.calendar.CustomWeekBar"
  25.                     app:week_text_color="@color/white" />

由于自定义view跟日历界面在同一目录下

     

   故引用如下：

    app:month_view="csu.xiaoya.robotApp.ui.activity.homepage.calendar.CustomMonthView"

    app:week_bar_view="csu.xiaoya.robotApp.ui.activity.homepage.calendar.CustomWeekBar"
 

 3.自定义month_view ，类名CustomMonthView

  1.  
  2. /**
  3.  * 标记
  4.  * 节假日与节气
  5.  */
  7. public class CustomMonthView extends MonthView {
  8.  
  9.     private int mRadius;
  10.  
  11.     /**
  12.      * 自定义魅族标记的文本画笔
  13.      */
  14.     private Paint mTextPaint = new Paint();
  15.  
  16.  
  17.     /**
  18.      * 24节气与
  19.      * 节假日画笔
  20.      */
  21.     private Paint mSolarTermTextPaint = new Paint();
  22.  
  23.     /**
  24.      * 网格画笔
  25.      */
  26.     private Paint mRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  27.  
  28.     /**
  29.      * 背景圆点
  30.      */
  31.     private Paint mPointPaint = new Paint();
  32.  
  33.     /**
  34.      * 今天的背景色
  35.      */
  36.     private Paint mCurrentDayPaint = new Paint();
  37.  
  38.     /**
  39.      * 圆点半径
  40.      */
  41.     private float mPointRadius;
  42.  
  43.     private int mPadding;
  44.  
  45.     private float mCircleRadius;
  46.     /**
  47.      * 自定义背景
  48.      */
  49.     private Paint mSchemeBasicPaint = new Paint();
  50.  
  51.     private float mSchemeBaseLine;
  52.     private int currentMonth = 0;//当前月份
  53.  
  54.     public CustomMonthView(Context context) {
  55.         super(context);
  56.  
  57.         mTextPaint.setTextSize(dipToPx(context, 8));
  58.         mTextPaint.setColor(0xffffffff);
  59.         mTextPaint.setAntiAlias(true);
  60.         mTextPaint.setFakeBoldText(true);
  61.  
  62.         //* Typeface.BOLD //粗体
  63.         //* Typeface.BOLD_ITALIC //粗斜体
  64.         //* Typeface.ITALIC //斜体
  65.         //* Typeface.NORMAL //常规
  66.         mSolarTermTextPaint.setColor(0xffE92F3A);
  67.         Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
  68.         mSolarTermTextPaint.setTypeface(font);
  69.         mSolarTermTextPaint.setAntiAlias(true);
  70.         mSolarTermTextPaint.setTextAlign(Paint.Align.CENTER);
  71.  
  72.         mSchemeBasicPaint.setAntiAlias(true);
  73.         mSchemeBasicPaint.setStyle(Paint.Style.FILL);
  74.         mSchemeBasicPaint.setTextAlign(Paint.Align.CENTER);
  75.         mSchemeBasicPaint.setFakeBoldText(true);
  76.         mSchemeBasicPaint.setColor(Color.parseColor("#00ffffff"));
  77.  
  78.  
  79.         mCurrentDayPaint.setAntiAlias(true);
  80.         mCurrentDayPaint.setStyle(Paint.Style.FILL);
  81.         mCurrentDayPaint.setColor(0xFFffffff);
  82.  
  83.         mPointPaint.setAntiAlias(true);
  84.         mPointPaint.setStyle(Paint.Style.FILL);
  85.         mPointPaint.setTextAlign(Paint.Align.CENTER);
  86.         mPointPaint.setColor(Color.RED);
  87.  
  88.         mRectPaint.setStyle(Paint.Style.STROKE);
  89.         mRectPaint.setStrokeWidth(dipToPx(context, 0.5f));
  90.         mRectPaint.setColor(0x88DBDDE4);
  91.  
  92.         mCircleRadius = dipToPx(getContext(), 7);
  93.  
  94.         mPadding = dipToPx(getContext(), 8);
  95.  
  96.         mPointRadius = dipToPx(context, 2);
  97.  
  98.         Paint.FontMetrics metrics = mSchemeBasicPaint.getFontMetrics();
  99.         mSchemeBaseLine = mCircleRadius - metrics.descent + (metrics.bottom - metrics.top) / 2 + dipToPx(getContext(), 1);
  100.  
  101.     }
  102.  
  103.  
  104.     @Override
  105.     protected void onPreviewHook() {
  106.         mSolarTermTextPaint.setTextSize(mCurMonthLunarTextPaint.getTextSize());
  107.         mRadius = Math.min(mItemWidth, mItemHeight) / 11 * 5;
  108.     }
  109.  
  110.  
  111.     @Override
  112.     protected boolean onDrawSelected(Canvas canvas, Calendar calendar, int x, int y, boolean hasScheme) {
  113.         int cx = x + mItemWidth * 1;
  114.         int cy = y + mItemHeight * 1;
  115.         canvas.drawRect(x, y, cx, cy, mSelectedPaint);
  116. //        canvas.drawCircle(cx, cy, mRadius, mSelectedPaint);
  117.         return true;
  118.     }
  119.  
  120.     @Override
  121.     protected void onDrawScheme(Canvas canvas, Calendar calendar, int x, int y) {
  122.  
  123. //        boolean isSelected = isSelected(calendar);
  124. //        if (isSelected) {
  125. //            mPointPaint.setColor(Color.WHITE);
  126. //        } else {
  127. //            mPointPaint.setColor(Color.BLUE);
  128. //        }
  129. //        canvas.drawCircle(x + mItemWidth / 2, y + mItemHeight - 3 * mPadding, mPointRadius, mPointPaint);
  130.     }
  131.  
  132.     @SuppressWarnings("IntegerDivisionInFloatingPointContext")
  133.     @Override
  134.     protected void onDrawText(Canvas canvas, Calendar calendar, int x, int y, boolean hasScheme, boolean isSelected) {
  135.         int cx = x + mItemWidth / 2;
  136.         int cy = y + mItemHeight / 2;
  137.         int top = y - mItemHeight / 6;
  138.  
  139.         canvas.drawRect(x, y, x + mItemWidth, y + mItemHeight, mRectPaint);
  140.  
  141.         if (hasScheme) {
  142.             canvas.drawCircle(x + mItemWidth - mPadding - mCircleRadius / 2, y + mPadding + mCircleRadius, mCircleRadius, mSchemeBasicPaint);
  143.             mTextPaint.setColor(calendar.getSchemeColor());
  144.             //可通过修改坐标值调整tag位置
  145.             canvas.drawText(calendar.getScheme(), x + mItemWidth - mPadding - mCircleRadius, y + mPadding + mSchemeBaseLine-16, mTextPaint);
  146.         }
  147.  
  148.         //当然可以换成其它对应的画笔就不麻烦，
  149.         if (calendar.isWeekend() && calendar.isCurrentMonth()) {
  150.             mCurMonthTextPaint.setColor(0xFFE30003);
  151.             mCurMonthLunarTextPaint.setColor(0xFF999999);
  152.  
  153.             mSchemeTextPaint.setColor(0xFFE30003);
  154.             mSchemeLunarTextPaint.setColor(0xFF999999);
  155. //            mOtherMonthLunarTextPaint.setColor(0xFF489dff);
  156. //            mOtherMonthTextPaint.setColor(0xFF489dff);
  157.         } else {
  158.             mCurMonthTextPaint.setColor(0xff333333);
  159.             mCurMonthLunarTextPaint.setColor(0xFF999999);
  160.  
  161.             mSchemeTextPaint.setColor(0xff333333);
  162.             mSchemeLunarTextPaint.setColor(0xFF999999);
  163.  
  164. //            mOtherMonthTextPaint.setColor(0xFFe1e1e1);
  165. //            mOtherMonthLunarTextPaint.setColor(0xFFe1e1e1);
  166.         }
  167. //        Log.d("节假日", "======onDrawText: =======" + calendar.getTraditionFestival());
  168.         if (isSelected) {
  169.             canvas.drawText(String.valueOf(calendar.getDay()), cx, mTextBaseLine + top, mSelectTextPaint);
  170.             canvas.drawText(calendar.getLunar(), cx, mTextBaseLine + y + mItemHeight / 10, mSelectedLunarTextPaint);
  171.         } else if (hasScheme) {
  172.  
  173.             canvas.drawText(String.valueOf(calendar.getDay()), cx, mTextBaseLine + top, calendar.isCurrentMonth() ? mSchemeTextPaint : mOtherMonthTextPaint);
  174.  
  175.             canvas.drawText(calendar.getLunar(), cx, mTextBaseLine + y + mItemHeight / 10, !TextUtils.isEmpty(calendar.getSolarTerm() + calendar.getTraditionFestival() + calendar.getGregorianFestival()) ? mSolarTermTextPaint : mSchemeLunarTextPaint);
  176.         } else {
  177.             canvas.drawText(String.valueOf(calendar.getDay()), cx, mTextBaseLine + top, calendar.isCurrentDay() ? mCurDayTextPaint : calendar.isCurrentMonth() ? mCurMonthTextPaint : mOtherMonthTextPaint);
  178.  
  179.             canvas.drawText(calendar.getLunar(), cx, mTextBaseLine + y + mItemHeight / 10, calendar.isCurrentDay() ? mCurDayLunarTextPaint : calendar.isCurrentMonth() ? !TextUtils.isEmpty(calendar.getSolarTerm() + calendar.getTraditionFestival() + calendar.getGregorianFestival()) ? mSolarTermTextPaint : mCurMonthLunarTextPaint : mOtherMonthLunarTextPaint);
  180.         }
  181.         //当日
  182.         if (calendar.isCurrentDay() && !calendar.isCurrentMonth()) {
  183.             canvas.drawCircle(cx, cy, mRadius, mCurrentDayPaint);
  184.             canvas.drawText(String.valueOf(calendar.getDay()), cx, cy, mCurrentDayPaint);
  185.         }
  186.     }
  187.  
  188.     /**
  189.      * dp转px
  190.      *
  191.      * @param context context
  192.      * @param dpValue dp
  193.      * @return px
  194.      */
  195.     private static int dipToPx(Context context, float dpValue) {
  196.         final float scale = context.getResources().getDisplayMetrics().density;
  197.         return (int) (dpValue * scale + 0.5f);
  198.     }
  199. }

4.自定义周标题week_bar_view，类名CustomWeekBar

  1.  
  2. /**
  3.  * 自定义日历
  4.  * 周布局
  5.  */
  7. public class CustomWeekBar extends WeekBar {
  8.  
  9.     private int mPreSelectedIndex;
  10.  
  11.     public CustomWeekBar(Context context) {
  12.         super(context);
  13.         LayoutInflater.from(context).inflate(R.layout.custom_week_bar, this, true);
  14.         setBackgroundColor(Color.WHITE);
  15.     }
  16.  
  17.     @Override
  18.     protected void onDateSelected(Calendar calendar, int weekStart, boolean isClick) {
  19.         getChildAt(mPreSelectedIndex).setSelected(false);
  20.         int viewIndex = getViewIndexByCalendar(calendar, weekStart);
  21.         getChildAt(viewIndex).setSelected(true);
  22.         mPreSelectedIndex = viewIndex;
  23.     }
  24.  
  25.     /**
  26.      * 当周起始发生变化，使用自定义布局需要重写这个方法，避免出问题
  27.      *
  28.      * @param weekStart 周起始
  29.      */
  30.     @Override
  31.     protected void onWeekStartChange(int weekStart) {
  32.         for (int i = 0; i < getChildCount(); i++) {
  33.             ((TextView) getChildAt(i)).setText(getWeekString(i, weekStart));
  34.         }
  35.     }
  36.  
  37.     /**
  38.      * 或者周文本，这个方法仅供父类使用
  39.      *
  40.      * @param index     index
  41.      * @param weekStart weekStart
  42.      * @return 或者周文本
  43.      */
  44.     private String getWeekString(int index, int weekStart) {
  45.         String[] weeks = getContext().getResources().getStringArray(R.array.chinese_week_string_array);
  46.  
  47.         if (weekStart == 1) {
  48.             return weeks[index];
  49.         }
  50.         if (weekStart == 2) {
  51.             return weeks[index == 6 ? 0 : index + 1];
  52.         }
  53.         return weeks[index == 0 ? 6 : index - 1];
  54.     }
  55. }

 5. 设置日程消息提醒标记

  1. // 设置日程消息提醒标记
  2. Map<String, Calendar> map = new HashMap<>();
  3. map.put(getSchemeCalendar(2024, 2, 23, 0x00ffffff, "
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/543232
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。