当前位置:   article > 正文

Android 大姨妈、经期日历,美柚经期效果_android 自定义经期 日历

android 自定义经期 日历

项目中最近有用到记录女性经期的功能,类似于美柚经期日历效果,然后找遍了都没找到,无奈只能自己写了。

为了节约时间和成本,直接是基于三方开源日历库修改的。

三方开源库: CalendarView  超级好用,自定义程度高,强烈推荐~~

可参考文档:CalendarView文档

效果图

效果图

 

前言:

看了文档和介绍你就知道,你只要关心如何将你要的效果(例如颜色、标记等)显示在日历上面就行了,其他的已经帮你处理好了,你只需要通过Canvas绘制出来就行了,坐标也都计算好了。

分析:

新建类继承MonthView(月视图),分别实现:

onDrawSelected(Canvas canvas, Calendar calendar, int x, int y, boolean hasScheme)

onDrawScheme(Canvas canvas, Calendar calendar, int x, int y)

onDrawText(Canvas canvas, Calendar calendar, int x, int y, boolean hasScheme,boolean isSelected)

三个方法对应的是:选中效果、标记效果、文本效果

可以看出他已经返回了坐标和Canvas对象,所以我们只要根据需要绘制就行了。例如我们要日期被选中时设置它的背景颜色,那么我们只要在onDrawSelected()方法中去绘制,下面是代码示例(这里是绘制了一个矩形):

  1. /**
  2. * @param mSelectedPaint 被选择的日期背景色画笔
  3. * @param mPadding 设置间距
  4. * @param mItemWidth 每一项的宽度
  5. * 绘制选中效果示例
  6. */
  7. @Override
  8. protected boolean onDrawSelected(Canvas canvas, Calendar calendar, int x, int y, boolean hasScheme) {
  9. canvas.drawRect(x + mPadding, y + mPadding, x + mItemWidth - mPadding, y + mItemHeight - mPadding, mSelectedPaint);
  10. return true;
  11. }

其他的也是同理,根据需要进行绘制。

对于经期日历来说,它分为安全期、排卵期、易孕期、月经期等等,我们就需要针对不同月经日期绘制不同的背景颜色,用于区分,如安全期时,颜色为绿色,月经期时就为粉色.....

所以我们就只要知道它哪一天为安全期、哪一天为易孕期,然后绘制不同的颜色就行了。

这里的话我给出两种方式,可以自行权量:

1、直接依赖他的库,不作任何修改,然后依据他的标记字段 scheme 作为日期类别区分

他有一个方法calendar.setScheme(String scheme),就是用来设置标记字段的,你可以将这个字段用来显示在日历上,如果你不需要在日历上显示额外的标记信息,那你就可以将此字段作为日期类别来用。(本文的示例代码就是通过此方式来使用的)

  1. //部分代码示例(根据Scheme字段来判断,period为月经期 ovulation排卵日)
  2. @Override
  3. protected void onDrawScheme(Canvas canvas, Calendar calendar, int x, int y) {
  4. if ("period".equals(calendar.getScheme())) {//月经期绘制粉色背景
  5. canvas.drawRect(x + mPadding, y + mPadding, x + mItemWidth - mPadding, y + mItemHeight - mPadding, mSchemePaint);
  6. return;//减少判断
  7. }
  8. if ("ovulation".equals(calendar.getScheme())) {//排卵期有特别标示(底部小横线)
  9. mPointPaint.setColor(0xFFE4CFFB);
  10. canvas.drawRect(x + mItemWidth / 2 - mW / 2,
  11. y + mItemHeight - mH * 2 - mPadding,
  12. x + mItemWidth / 2 + mW / 2,
  13. y + mItemHeight - mH - mPadding, mPointPaint);
  14. }
  15. }

2、导入他的库,进行修改

我们可以仿照他的标记scheme字段,添加一个自己的标记字段,如下图:

  1. public String getScheme() {
  2. return scheme;
  3. }
  4. //设置标记(他的方法)
  5. public void setScheme(String scheme) {
  6. this.scheme = scheme;
  7. }
  8. public int getSchemeType() {
  9. return schemeType;
  10. }
  11. //设置类别(自己添加的方法)
  12. public void setSchemeType(int schemeType) {
  13. this.schemeType = schemeType;
  14. }

然后依次修改下面三个类中的三个方法:

Calendar类:  mergeScheme(Calendar calendar, String defaultScheme)

  1. final void mergeScheme(Calendar calendar, String defaultScheme) {
  2. if (calendar == null)
  3. return;
  4. setScheme(TextUtils.isEmpty(calendar.getScheme()) ?
  5. defaultScheme : calendar.getScheme());
  6. setSchemeColor(calendar.getSchemeColor());
  7. setSchemeType(calendar.getSchemeType());//设置类别(自己添加的)
  8. setSchemes(calendar.getSchemes());
  9. }

CalendarViewDelegate类: addSchemesFromMap(List<Calendar> mItems)

  1. final void addSchemesFromMap(List<Calendar> mItems) {
  2. if (mSchemeDatesMap == null || mSchemeDatesMap.size() == 0) {
  3. return;
  4. }
  5. for (Calendar a : mItems) {
  6. if (mSchemeDatesMap.containsKey(a.toString())) {
  7. Calendar d = mSchemeDatesMap.get(a.toString());
  8. a.setScheme(TextUtils.isEmpty(d.getScheme()) ? getSchemeText() : d.getScheme());
  9. a.setSchemeColor(d.getSchemeColor());
  10. a.setSchemeType(d.getSchemeType());//设置类别(自己添加的)
  11. a.setSchemes(d.getSchemes());
  12. } else {
  13. a.setScheme("");
  14. a.setSchemeColor(0);
  15. a.setSchemeType(0);//设置类别(自己添加的)
  16. a.setSchemes(null);
  17. }
  18. }
  19. }

BaseView类: addSchemesFromMap()

  1. final void addSchemesFromMap() {
  2. if (mDelegate.mSchemeDatesMap == null || mDelegate.mSchemeDatesMap.size() == 0) {
  3. return;
  4. }
  5. for (Calendar a : mItems) {
  6. if (mDelegate.mSchemeDatesMap.containsKey(a.toString())) {
  7. Calendar d = mDelegate.mSchemeDatesMap.get(a.toString());
  8. a.setScheme(TextUtils.isEmpty(d.getScheme()) ? mDelegate.getSchemeText() : d.getScheme());
  9. a.setSchemeColor(d.getSchemeColor());
  10. a.setSchemeType(d.getSchemeType());//设置类别(自己添加的)
  11. a.setSchemes(d.getSchemes());
  12. } else {
  13. a.setScheme("");
  14. a.setSchemeColor(0);
  15. a.setSchemeType(0);//设置类别(自己添加的)
  16. a.setSchemes(null);
  17. }
  18. }
  19. }

修改完成后,我们只需在设置数据的时候将类别填写进去,然后绘制的时候根据我们设置的SchemeType字段去分区日期,然后对应绘制就行了。

更多细节可参考示例Demo或者CalendarView文档

Github直达链接

欢迎Start或提issues!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/543234
推荐阅读
相关标签
  

闽ICP备14008679号