自定义打卡日历

最新推荐文章于 2021-05-25 19:56:04 发布
最新推荐文章于 2021-05-25 19:56:04 发布
阅读量943 收藏 16
点赞数 1
分类专栏： android 文章标签： android 打卡日历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31796651/article/details/103316512
版权

文章目录

先看效果图

实际是圆的，由于录制视频视频尺寸小于实际宽度，所以看着有点像椭圆；
在这里插入图片描述

需求分析

1、需求左右点击可以切换月份，不需要左右滑动切换，时间紧迫就按需求完成功能；
2、打卡日期选中如图，单个选中、左右相邻选中和换行样式如图；
3、当前日期选中，点击也需要选中效果；
4、月份可能会显示5行或6行，控制总高度不变，动态设置单行日期的高度，选中要是的宽高；
5、根据年月获取当月有多少天，再根据第一天在星期几，当月数据从此处开始添加

核心代码

星期的实现

星期根据控件的宽均分显示，高度居中显示

public class WeekBarView extends AppCompatTextView {
    public String[] days = {"日", "一", "二", "三", "四", "五", "六"};
    private TextPaint textPaint;

    public WeekBarView(Context context) {
        this(context, null);
    }

    public WeekBarView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        textPaint = getPaint();
        textPaint.setTextAlign(Paint.Align.CENTER);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();

        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();

        int width = getMeasuredWidth() - paddingRight - paddingLeft;
        int height = getMeasuredHeight() - paddingTop - paddingBottom;
        for (int i = 0; i < days.length; i++) {
            Rect rect = new Rect(paddingLeft + (i * width / days.length), paddingTop, paddingLeft + ((i + 1) * width / days.length), paddingTop + height);
            Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
            float top = fontMetrics.top;
            float bottom = fontMetrics.bottom;
            int baseLineY = (int) (rect.centerY() - top / 2 - bottom / 2);
            canvas.drawText(days[i], rect.centerX(), baseLineY, textPaint);
        }
    }
}

日历实现

日期的工具类

/**
     * 获取对应年月的天数
     *
     * @param year
     * @param month
     * @return
     */
    public int getMonthLastDay(int year, int month) {
        Calendar a = Calendar.getInstance();
        a.set(Calendar.YEAR, year);
        a.set(Calendar.MONTH, month - 1);
        a.set(Calendar.DATE, 1);//把日期设置为当月第一天
        a.roll(Calendar.DATE, -1);//日期回滚一天，也就是最后一天
        return a.get(Calendar.DATE);
    }
    //获取日历相关数据
 Calendar calendar = Calendar.getInstance();
 //当天在当月中第几天 2、12、23
 int currDay = calendar.get(Calendar.DAY_OF_MONTH);
 //当月是第几个月 8、11
 int currMouth = calendar.get(Calendar.MONTH) + 1;
 //当前年份 2019
  int currYear = calendar.get(Calendar.YEAR);

/**
     * 对应年月的一号是星期几
     *
     * @param year
     * @param month
     * @return
     */
    public int getFirstDayOfWeek(int year, int month) {
        Calendar calendar = Calendar.getInstance();
        calendar.set(year, month - 1, 0);
        int currYear = calendar.get(Calendar.YEAR);
        int currMouth = calendar.get(Calendar.MONTH) + 1;
        int currDay = calendar.get(Calendar.DAY_OF_MONTH);
        int i1 = calendar.get(Calendar.DAY_OF_WEEK);//这就是星期几
        if (i1 == 7) {
            i1 = 0;
        }
        return i1;
    }

设置日历的数据核心代码：

//获取日历布局的宽高，后面用于item的宽高和选中宽高设置
   @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        totalHeight = getMeasuredHeight();
        totalWidth = getMeasuredWidth();
//        Log.e("snow_m", "=========" + totalHeight);
    }
 /**
     * 重新设置日历数据
     *
     * @param year
     * @param month
     */
    public void resetCalendarData(int year, int month, List<ClockInBean> clockInList) {
        calendarDataList.clear();
        int monthLastDay = CalendarUtils.init().getMonthLastDay(year, month);
        int dayOfWeek = CalendarUtils.init().getFirstDayOfWeek(year, month);
        int dayOfMonth = CalendarUtils.init().getTodayOfMonth();
        //当前页面显示上月的数据，或者空
        for (int i = 0; i < dayOfWeek; i++) {
            CalendarData calendarData = new CalendarData();
            calendarData.setSolarNum("");
            calendarDataList.add(calendarData);
        }
        //设置当月数据
        for (int i = 0; i < monthLastDay; i++) {
            CalendarData calendarData = new CalendarData();
            calendarData.setYearMD(year + "-" + month + "-" + CalendarUtils.init().addZeroBefore(i + 1));
            calendarData.setSolarNum(String.valueOf(i + 1));
            calendarDataList.add(calendarData);
        }
//        calendarAdapter.setTodayPosition(dayOfMonth + dayOfWeek, CalendarUtils.init().getTodayMonth());
        //计算共几行
        int rowNum = (int) Math.ceil((monthLastDay + dayOfWeek) / 7f);
        calendarAdapter.setItemWidthHeight(totalHeight / rowNum, rowNum, totalWidth / 7);

        CalendarUtils.init().addClockInInfoToCalendarInfo(year, month, dayOfWeek, calendarDataList, clockInList);

        calendarAdapter.setDataList(calendarDataList);
    }

适配器实现功能核心代码：

public class AdapterCalendarItem extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private Context mContext;
    private List<CalendarData> dataList;
    private int itemHeight;
    private int itemWidth;
    private int onlySelectWH;
    CalendarItemClickListener itemClickListener;
    //当前点击日期 2019-11-02
    private String currentClickDate;
    //当前日期 2019-11-02
    private String todayDate;


    public AdapterCalendarItem(Context mContext, CalendarItemClickListener itemClickListener) {
        this.mContext = mContext;
        this.itemClickListener = itemClickListener;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.item_calendar_adapter, null);
        return new ViewHolder(view);
    }

    public void setDataList(List<CalendarData> dataList) {
        this.dataList = dataList;
        notifyDataSetChanged();
    }

    /**
     * 设置今天日期
     *
     * @param todayPosition
     */
    public void setTodayPosition(String todayPosition) {
        this.todayDate = todayPosition;
    }

    /**
     * 设置item的高度  总行数
     *
     * @param itemHeight
     * @param rowNum
     */
    public void setItemWidthHeight(int itemHeight, int rowNum, int itemWidth) {
        this.itemHeight = itemHeight;
        this.itemWidth = itemWidth;
        onlySelectWH = (int) (itemHeight - TextViewUtils.init().dp2px(mContext, 12) * (5 / 6f));
        if (onlySelectWH > itemWidth) {
            onlySelectWH = itemWidth;
        }
//        Log.e("snow_m", "====itemHeight=====" + itemHeight);
//        Log.e("snow_m", "====itemWidth=====" + itemWidth);
    }


    public void setCurrentClickDate(String clickDate) {
        this.currentClickDate = clickDate;
        notifyDataSetChanged();
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, final int position) {
        final CalendarData data = dataList.get(position);
        ViewHolder vh = (ViewHolder) holder;
        //设置item的高
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) vh.root_view.getLayoutParams();
        layoutParams.height = itemHeight;
        vh.root_view.setLayoutParams(layoutParams);
        //设置选中的宽高
        RelativeLayout.LayoutParams onlySelectViewParams = (RelativeLayout.LayoutParams) vh.onlySelectView.getLayoutParams();
        onlySelectViewParams.height = onlySelectWH;
        onlySelectViewParams.width = onlySelectWH;
        vh.onlySelectView.setLayoutParams(onlySelectViewParams);

        vh.tv_num.setText(data.getSolarNum());
        //设置选中的===已签到状态
        if (data.getClockInBean() != null) {
            vh.tv_num.setTextColor(mContext.getResources().getColor(R.color.tt_FF8820));
            setSelectedView(vh.selectedView, position);
            vh.ivRemind.setVisibility(View.VISIBLE);
        } else {
            vh.tv_num.setTextColor(mContext.getResources().getColor(R.color.tt_33333));
            vh.ivRemind.setVisibility(View.INVISIBLE);
            vh.selectedView.setBackground(null);
        }
        //设置当前点击的效果
        if (!TextUtils.isEmpty(currentClickDate) && currentClickDate.equals(data.getYearMD())) {
            vh.ivRemind.setColorFilter(mContext.getResources().getColor(R.color.tt_white));
            vh.onlySelectView.setBackgroundResource(R.drawable.bg_ff8820_circle);
            vh.tv_num.setTextColor(mContext.getResources().getColor(R.color.tt_white));
        } else {
            vh.ivRemind.setColorFilter(mContext.getResources().getColor(R.color.tt_FF8820));
            vh.onlySelectView.setBackground(null);
        }
        //设置今天对应的效果
        if (!TextUtils.isEmpty(data.getYearMD()) && data.getYearMD().equals(todayDate)) {
            vh.ivRemind.setColorFilter(mContext.getResources().getColor(R.color.tt_white));
            vh.onlySelectView.setBackgroundResource(R.drawable.bg_ff8820_circle);
            vh.tv_num.setTextColor(mContext.getResources().getColor(R.color.tt_white));
        }
        //item点击
        vh.root_view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (itemClickListener != null) {
                    itemClickListener.itemClick(data, position);
                }
            }
        });
    }

    /**
     * 根据情况显示已选中（打卡）的样式
     *
     * @param selectedView
     * @param position
     */
    private void setSelectedView(View selectedView, int position) {
        if (position % 7 == 0) {//最左边的数字
            drawSelectView(selectedView, nextIsSelected(position, dataList) ? 3 : 0);
        } else if (position % 7 == 6) {//最右边的数字
            drawSelectView(selectedView, lastIsSelected(position, dataList) ? 2 : 0);
        } else {//中间数据
            boolean left = lastIsSelected(position, dataList);
            boolean right = nextIsSelected(position, dataList);
            if (left && right) {
                drawSelectView(selectedView, 1);
            } else if (left) {
                drawSelectView(selectedView, 2);
            } else if (right) {
                drawSelectView(selectedView, 3);
            } else {
                drawSelectView(selectedView, 0);
            }
        }
    }

    /**
     * 绘制选中的样式
     *
     * @param selectedView
     * @param flag
     */
    private void drawSelectView(View selectedView, int flag) {
        //设置选中的宽高
        RelativeLayout.LayoutParams onlySelectViewParams = (RelativeLayout.LayoutParams) selectedView.getLayoutParams();
        onlySelectViewParams.height = onlySelectWH;
        if (flag == 1) {//画全整个矩形
            selectedView.setBackgroundResource(R.color.tt_ffe2c9);
            onlySelectViewParams.width = itemWidth + 5;
        } else if (flag == 2) { //左矩形 右圆==靠左
            selectedView.setBackgroundResource(R.drawable.bg_ffe2c9_right_circle);
            onlySelectViewParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
            onlySelectViewParams.width = itemWidth / 2 + onlySelectWH / 2;
        } else if (flag == 3) {//右矩形 左圆====靠右
            selectedView.setBackgroundResource(R.drawable.bg_ffe2c9_left_circle);
            onlySelectViewParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
            onlySelectViewParams.width = itemWidth / 2 + onlySelectWH / 2;
        } else { //圆形
            selectedView.setBackgroundResource(R.drawable.bg_ffe2c9_circle);
            onlySelectViewParams.width = onlySelectWH;
            onlySelectViewParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        }
        selectedView.setLayoutParams(onlySelectViewParams);
    }

    /**
     * 上一条数据是否被选中
     *
     * @param position
     * @return
     */
    private boolean lastIsSelected(int position, List<CalendarData> dataList) {
        if (dataList == null) {
            return false;
        }
        CalendarData lastData = null;
        if (position > 0) {
            lastData = dataList.get(position - 1);
        }
        if (lastData == null || lastData.getClockInBean() == null) {
            return false;
        }
        return true;
    }

    /**
     * 下一条数据是否被选中
     *
     * @param position
     * @return
     */
    private boolean nextIsSelected(int position, List<CalendarData> dataList) {
        if (dataList == null) {
            return false;
        }
        CalendarData nextData = null;
        if (position < dataList.size() - 1) {
            nextData = dataList.get(position + 1);
        }
        if (nextData == null || nextData.getClockInBean() == null) {
            return false;
        }
        return true;
    }

    @Override
    public int getItemCount() {
        return dataList == null ? 0 : dataList.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {
        TextView tv_num;
        RelativeLayout root_view;
        //点击或者单个选中
        View onlySelectView;
        //已签到选中
        View selectedView;
        ImageView ivRemind;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            tv_num = itemView.findViewById(R.id.tv_num);
            root_view = itemView.findViewById(R.id.root_view);
            onlySelectView = itemView.findViewById(R.id.only_select_view);
            selectedView = itemView.findViewById(R.id.selected_view);
            ivRemind = itemView.findViewById(R.id.iv_remind);
        }
    }

    public interface CalendarItemClickListener {
        void itemClick(CalendarData data, int position);
    }
}

对应的适配器xml代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/root_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:id="@+id/selected_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />

        <View
            android:id="@+id/only_select_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="@dimen/margin_08"
                android:layout_height="@dimen/margin_07" />

            <TextView
                android:id="@+id/tv_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="@dimen/text_size_18" />

            <ImageView
                android:id="@+id/iv_remind"
                android:layout_width="@dimen/margin_08"
                android:layout_height="@dimen/margin_07"
                android:src="@mipmap/icon_clock_in_complete"
                android:visibility="gone"/>
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

其实github也有很多好的日历依赖库，但项目样式和需求问题只能自定义实现，由于时间问题，临时是只实现左右切换，没有做左右滑动切换，可以使用ViewPager进行包装实现左右滑动切换，对数据还需要整理下才能更好适用自己的项目；

demo代码

snowzhao210
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 签到打卡日历，自定义日期可带图标（附源码）
csdn_aiyang的博客
04-26 1万+
前言 公司项目需要做一个签到送积分的系统，要求app实现这种签到功能。先在网上找了一些资料，有些用自定义View画图实现，其实对于普通码农对绘图会没耐心看各自算法。所以自己动手撸一个通用型日历，使用ViewPager+Releteview+Calendar+算法实现。想着这次也为了以后做其他项目中能用到，因为真心觉得很实用。 源码地址：http://download.csdn.net/deta...
打卡签到日历支持自定义样式支持农历支持二次开发
08-10
打卡签到日历，支持自定义样式，支持农历,支持二次开发
android自定义可签到日历
07-18
一个比较详细的自定义的签到日历。简单易懂，可自行修改
自定义打卡签到view
mahongyin的博客
03-08 825
打卡签到view 一个自定义签到View，从网上找了个做了修改，以适应自己项目 https://github.com/1976222027/View 实现签到规则如下： 1、周一-周四连续签到，周四奖励翻倍，连续签到7天周日翻倍。 2、连续签到记录在第8天开始时将清零重新计算。 3、如果中断签到，连续签到记录也将清零。 4、其中bean，activity 控制view的显示 逻辑有点乱 仔细看...
Android功能最全的自定义标记日历
05-21
Android功能最全的自定义标记日历，自定义标记，自定义图标，自定义样式。
微信小程序自定义组件-打卡日历组件
09-09
在这个特定的案例中，我们关注的是一个名为"打卡日历组件"（rwjCalendar）的自定义组件。这个组件主要用于实现日历功能，特别适合用于打卡签到类的应用，例如健康跟踪、学习计划或者工作考勤等场景。 要理解这个...
Android自定义日历
11-08
在Android开发中，创建自定义日历视图是一项常见的需求，尤其当希望为用户提供与系统日历不同的交互体验时。本教程将详细讲解如何在Android中实现一个仿小米日历的自定义界面。 首先，我们需要了解`ViewPager`组件...
微信小程序自定义组件--日历组件
06-05
本案例中的“日历组件”是一个轻量级的组件，专为微信小程序设计，提供了丰富的自定义可能性，使得开发者在处理与日期相关的功能时更加得心应手。 首先，我们要理解微信小程序的组件化开发思想。微信小程序遵循组件...
微信小程序日历打卡组件
01-27
恍恍惚惚开发小程序也有一段时间了，最近要做一个关于打卡的小程序，最终还是翻遍全网，依然找不到一款比较随眼缘的日历打卡的相关组件，所以，老样子，自己开发一个呗。（代码比较简单，只是提供一个思路，样式可以...
简单的考勤打卡日历
07-23
import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.widget.LinearLayout; import android.widget.TextView; import com.org.security.app.main.R; import com.org.security.tools.DateUtils; /** * Created by Administrator on 2017/8/16. */ public class SignDate extends LinearLayout { private TextView tvYear; private InnerGridView gvWeek; private InnerGridView gvDate; private AdapterDate adapterDate; public SignDate(Context context) { super(context); init(); } public SignDate(Context context, AttributeSet attrs) { super(context, attrs); init(); } public SignDate(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { View view = View.inflate(getContext(), R.layout.layout_signdate, this); tvYear = view.findViewById(R.id.tvYear); gvWeek = view.findViewById(R.id.gvWeek); gvDate = view.findViewById(R.id.gvDate); tvYear.setText(DateUtils.getCurrentYearAndMonth()); gvWeek.setAdapter(new AdapterWeek(getContext())); adapterDate = new AdapterDate(getContext()); gvDate.setAdapter(adapterDate); } /** * 签到成功的回调 * * @param onSignedSuccess */ public void setOnSignedSuccess(OnSignedSuccess onSignedSuccess) { adapterDate.setOnSignedSuccess(onSignedSuccess); } /** * 签到 */ public void setOnSigned(int postion) { adapterDate.setOnSigned(postion); } /** * 签到 */ public void setOnSigned(String date) { adapterDate.setOnSigned(date); } }
微信小程序实现打卡日历功能
10-17
主要介为大家详细绍了微信小程序实现打卡日历功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android 日历打卡代码 demo
10-02
这是个在其他源码基础上，调试好的每天签到demo，方便集成到应用中，很精简
打卡日历显示
11-23
打卡日历的Js脚本代码，可以直接使用，大家可以使用看看
android自定义日历-实现签到订约功能
11-07
android自定义日历-实现签到订约功能 基于IDEA的工程源码
简单日历的编写（C#）
03-09
这是由C#编写而成的一个小小的日历，用的是一些我们常用的知识，代码简单但是很经典，希望大家一块看看！
▲ Android 自定义日历签到效果
Xia_燚的博客
10-04 1712
自定义日历签到效果
自定义view实现日历打卡签到
cf8833的博客
05-06 654
1.说明 自己写一个view实现每天签到的功能，设置背景图片 源码下载：https://github.com/wrs13634194612/CalendarView.git 2.效果图 3.主界面 package com.example.myapplication30; import androidx.appcompat.app.AppCompatActivity; import android.annotation.SuppressLint; import android.os.Bun
android自定义日历代码,Android自定义日历Calender代码实现
weixin_35087326的博客
05-25 548
产品要做签到功能，签到功能要基于一个日历来进行，所以就根据 要求自定义了一个日历自定义控件相信做android都知道：(1)首先创建一个类，继承一个容器类或者是一个控件(2)然后就是你需要设置的属性等的，在attrs文件夹中(3)然后就是在类里边进行属性的设置以及布局等等功能的添加其实自定义一个日历问题都不多，很多人都会想到通过一个gridView然后填充就可以，确实是这样，主要是在显示每个月的第...
android日历功能实现,Android使用GridView实现日历的简单功能
weixin_30932183的博客
05-25 348
简单的日历实现，只是显示了每一个月，没有显示当天和记事这些功能主要是计算月初是周几，月末是周几，然后相应的显示上一月多少天和下一月多少天。先看一下关于日期的用到的几个工具类/*** 获取该月天数*/public static int getCurrentMonthDay(long millSec) {Calendar calendar = Calendar.getInstance();calend...
vx 小程序打卡日历插件
最新发布
01-15
vx小程序打卡日历插件是一款可以在微信小程序中使用的工具插件，它能够方便用户进行打卡记录和管理。通过vx小程序打卡日历插件，用户可以随时随地记录自己的打卡情况，例如每天学习、运动、阅读等等。用户可以根据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值