Android 自定义view实现签到送积分

最新推荐文章于 2024-04-04 12:35:01 发布
最新推荐文章于 2024-04-04 12:35:01 发布
阅读量1.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Android精华教程 文章标签： 签到
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/guodashen007/article/details/89947135
博客包含程序截图，介绍了点击签到、重复签到等操作，还提及自定义view，最后给出了DEMO下载地址。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

程序截图

点击签到

重复签到

自定义view

package cn.llwy.com.signin.View;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

import cn.llwy.com.signin.R;
import cn.llwy.com.signin.bean.SigninBean;
import cn.llwy.com.signin.utils.CalcUtils;

public class MysigninView extends View {

    //初始化签到动画执行时间为300毫秒
    private final static int ANIMATION_TIME=300;

    //动画执行间隔次数
    private final static int ANINMATION_INTERVAL=10;

    //线段高度
    private float mCompletedHeight = CalcUtils.dp2px(getContext(), 5f);

    //图标的宽度
    private float mIconWeight = CalcUtils.dp2px(getContext(), 10f);

    //图标的高度
    private float mIconHeight = CalcUtils.dp2px(getContext(), 10f);

    //up的宽度
    private float mUpWeight = CalcUtils.dp2px(getContext(), 20.5f);

    //up的高度
    private float mUpHeight = CalcUtils.dp2px(getContext(), 20.5f);

    //线段的长度
    private float mLineWeight = CalcUtils.dp2px(getContext(), 40f);

   //已经完成的图标
    private Drawable mCompleteIcon;

    //正在进行的图标
    private Drawable mAttentionIcon;

    //默认的图标
    private Drawable mDefaultIcon;



    //图标中心点Y
    private float mCenterY;

    //线段的左上方Y
    private float mLeftY;

    //线段的右下方
    private float mRightY;

    //数据源
    private List<SigninBean> list;
    private int mSinginNum=0;

    //图标中心点位置
    private List<Float> mCircleCenterPointPositionList;

   //未完成的线段Paint
    private Paint mUnCompletedPaint;

    // 完成的线段paint
    private Paint mCompletedPaint;
   //未完成颜色
    private int mUnCompletedLineColor = ContextCompat.getColor(getContext(), R.color.c_999999);
    // 天数颜色
    private int mUnCompletedTextColor = ContextCompat.getColor(getContext(), R.color.c_cccccc);
    //up魅力值颜色
    private int mCurrentTextColor = ContextCompat.getColor(getContext(), R.color.c_f7b93c);
    //完成的颜色

    private int mCompletedLineColor = ContextCompat.getColor(getContext(), R.color.c_41c961);

    private Paint mTextNumberPaint;

    private Paint mTextNumberPaintday;
    //是否执行动画
    private boolean isAnimation = false;

    //记录重绘次数
    private int mCount = 0;

    // 执行动画线段每次绘制的长度，线段的总长度除以总共执行的时间乘以每次执行的间隔时间
    private float mAnimationWeight = (mLineWeight / ANIMATION_TIME) * ANINMATION_INTERVAL;

    // 执行动画的位置
    private int mPosition;
    private int[] mMax;

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

    public MysigninView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MysigninView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    /**
     * init
     */
    private void init() {
        list = new ArrayList<>();

        mCircleCenterPointPositionList = new ArrayList<>();

        //未完成文字画笔
        mUnCompletedPaint = new Paint();
        mUnCompletedPaint.setAntiAlias(true);
        mUnCompletedPaint.setColor(mUnCompletedLineColor);
        mUnCompletedPaint.setStrokeWidth(2);
        mUnCompletedPaint.setStyle(Paint.Style.FILL);

        //已完成画笔文字
        mCompletedPaint = new Paint();
        mCompletedPaint.setAntiAlias(true);
        mCompletedPaint.setColor(mCompletedLineColor);
        mCompletedPaint.setStrokeWidth(2);
        mCompletedPaint.setStyle(Paint.Style.FILL);

        //number paint
        mTextNumberPaint = new Paint();
        mTextNumberPaint.setAntiAlias(true);
        mTextNumberPaint.setColor(mUnCompletedTextColor);
        mTextNumberPaint.setStyle(Paint.Style.FILL);
        mTextNumberPaint.setTextSize(CalcUtils.sp2px(getContext(), 12f));

        mTextNumberPaintday = new Paint();
        mTextNumberPaintday.setAntiAlias(true);
        mTextNumberPaintday.setColor(mUnCompletedTextColor);
        mTextNumberPaintday.setStyle(Paint.Style.FILL);
        mTextNumberPaintday.setTextSize(CalcUtils.sp2px(getContext(), 12f));

        //已经完成的icon
        mCompleteIcon = ContextCompat.getDrawable(getContext(), R.mipmap.signed);
        //正在进行的icon
        mAttentionIcon = ContextCompat.getDrawable(getContext(), R.mipmap.unsigned);
        //未完成的icon
        mDefaultIcon = ContextCompat.getDrawable(getContext(), R.mipmap.unsigned);
        //UP的icon

    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //图标的中中心Y点
        mCenterY = CalcUtils.dp2px(getContext(), 28f) + mIconHeight / 2;
        //获取左上方Y的位置，获取该点的意义是为了方便画矩形左上的Y位置
        mLeftY = mCenterY - (mCompletedHeight / 2);
        //获取右下方Y的位置，获取该点的意义是为了方便画矩形右下的Y位置
        mRightY = mCenterY + mCompletedHeight / 2;

        //计算图标中心点
        mCircleCenterPointPositionList.clear();
        //第一个点距离父控件左边14.5dp
        float size = mIconWeight / 2 + CalcUtils.dp2px(getContext(), 14.5f);
        mCircleCenterPointPositionList.add(size);
        for (int i = 1; i < mSinginNum; i++) {
            //从第二个点开始，每个点距离上一个点为图标的宽度加上线段的23dp的长度
            size = size +5 + mLineWeight;
            mCircleCenterPointPositionList.add(size);
        }
    }

    @SuppressLint("DrawAllocation")
    @Override
    protected synchronized void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (isAnimation) {
            drawSign(canvas);
        } else {
            drawUnSign(canvas);
        }
    }

    /**
     * 绘制签到(伴随签到动画)
     */
    @SuppressLint("DrawAllocation")
    private void drawSign(Canvas canvas) {
        for (int i = 0; i < mCircleCenterPointPositionList.size(); i++) {
            //绘制线段
            float preComplectedXPosition = mCircleCenterPointPositionList.get(i) ;
            if (i != mCircleCenterPointPositionList.size() - 1) {
                //最后一条不需要绘制
                if (list.get(i + 1).getState() == SigninBean.STEP_COMPLETED) {
                    //下一个是已完成，当前才需要绘制绿色
                    canvas.drawRect(preComplectedXPosition, mLeftY, preComplectedXPosition + mLineWeight,
                            mRightY, mCompletedPaint);
                } else {
                    //其余绘制灰色

                    //当前位置执行动画
                    if (i == mPosition - 1) {
                        //绿色开始绘制的地方,
                        float endX = preComplectedXPosition + mAnimationWeight * (mCount / ANINMATION_INTERVAL);
                        //绘制绿色
                        canvas.drawRect(preComplectedXPosition, mLeftY, endX, mRightY, mCompletedPaint);
                        //绘制灰色
                        canvas.drawRect(endX, mLeftY, preComplectedXPosition + mLineWeight,
                                mRightY, mUnCompletedPaint);
                    } else {
                        canvas.drawRect(preComplectedXPosition, mLeftY, preComplectedXPosition + mLineWeight,
                                mRightY, mUnCompletedPaint);
                    }
                }
            }

            //绘制图标
            float currentComplectedXPosition = mCircleCenterPointPositionList.get(i);
            Rect rect = new Rect((int) (currentComplectedXPosition - mIconWeight / 2),
                    (int) (mCenterY - mIconHeight / 2),
                    (int) (currentComplectedXPosition + mIconWeight / 2),
                    (int) (mCenterY + mIconHeight / 2));

            SigninBean signinBean = list.get(i);

            if (i == mPosition && mCount == ANIMATION_TIME) {
                //当前需要绘制成绿色了
                mCompleteIcon.setBounds(rect);
                mCompleteIcon.draw(canvas);
            } else {
                if (signinBean.getState() == SigninBean.STEP_UNDO) {
                    mDefaultIcon.setBounds(rect);
                    mDefaultIcon.draw(canvas);
                } else if (signinBean.getState() == SigninBean.STEP_CURRENT) {
                    mAttentionIcon.setBounds(rect);
                    mAttentionIcon.draw(canvas);
                } else if (signinBean.getState() == SigninBean.STEP_COMPLETED) {
                    mCompleteIcon.setBounds(rect);
                    mCompleteIcon.draw(canvas);
                }
            }

            //绘制图标
            if (signinBean.getState() == SigninBean.STEP_COMPLETED || (i == mPosition
                    && mCount == ANIMATION_TIME)) {
                //已经完成了或者是当前动画完成并且需要当前位置需要改变
                if (i == mMax[0] || i == mMax[1]) {
                    //是up的需要橙色
                    mTextNumberPaint.setColor(mCurrentTextColor);

                    mTextNumberPaintday.setColor(mCurrentTextColor);
                } else {
                    //普通完成的颜色
                    mTextNumberPaint.setColor(mCompletedLineColor);
                    mTextNumberPaintday.setColor(mCompletedLineColor);
                }
            } else {
                //还没签到的，颜色均为灰色
                mTextNumberPaint.setColor(mUnCompletedLineColor);
                mTextNumberPaintday.setColor(mUnCompletedLineColor);
            }

            canvas.drawText("+" + signinBean.getNumber(),
                    currentComplectedXPosition - CalcUtils.dp2px(getContext(), 5f),
                    mCenterY - mIconHeight / 2 - CalcUtils.dp2px(getContext(), 15f),
                    mTextNumberPaint);

            canvas.drawText(signinBean.getDay()+"天",
                    currentComplectedXPosition - CalcUtils.dp2px(getContext(), 5f),
                    mCenterY - mIconHeight / 2 + CalcUtils.dp2px(getContext(), 30f),
                    mTextNumberPaintday);

            //绘制UP
            if (i == mMax[0] || i == mMax[1]) {
                //需要UP才进行绘制
                Rect rectUp =
                        new Rect((int) (currentComplectedXPosition - mUpWeight / 2),
                                (int) (mCenterY - mIconHeight / 2 - CalcUtils.dp2px(getContext(), 8f) - mUpHeight),
                                (int) (currentComplectedXPosition + mUpWeight / 2),
                                (int) (mCenterY - mIconHeight / 2 - CalcUtils.dp2px(getContext(), 8f)));

            }
        }

        //记录重绘次数
        mCount = mCount + ANINMATION_INTERVAL;
        if (mCount <= ANIMATION_TIME) {
            //引起重绘
            postInvalidate();
        } else {
            //重绘完成
            isAnimation = false;
            mCount = 0;
        }
    }

    /**
     * 绘制初始状态的view
     */
    @SuppressLint("DrawAllocation")
    private void drawUnSign(Canvas canvas) {
        for (int i = 0; i < mCircleCenterPointPositionList.size(); i++) {
            //绘制线段
            float preComplectedXPosition = mCircleCenterPointPositionList.get(i) ;
            if (i != mCircleCenterPointPositionList.size() - 1) {
                //最后一条不需要绘制
                if (list.get(i + 1).getState() == SigninBean.STEP_COMPLETED) {
                    //下一个是已完成，当前才需要绘制绿色
                    canvas.drawRect(preComplectedXPosition, mLeftY, preComplectedXPosition + mLineWeight,
                            mRightY, mCompletedPaint);
                } else {
                    //其余绘制灰色
                    canvas.drawRect(preComplectedXPosition, mLeftY, preComplectedXPosition + mLineWeight,
                            mRightY, mUnCompletedPaint);
                }
            }

            //绘制图标
            float currentComplectedXPosition = mCircleCenterPointPositionList.get(i);
            Rect rect = new Rect((int) (currentComplectedXPosition - mIconWeight / 2),
                    (int) (mCenterY - mIconHeight / 2),
                    (int) (currentComplectedXPosition + mIconWeight / 2),
                    (int) (mCenterY + mIconHeight / 2));

            SigninBean signinBean = list.get(i);

            if (signinBean.getState() == SigninBean.STEP_UNDO) {
                mDefaultIcon.setBounds(rect);
                mDefaultIcon.draw(canvas);
            } else if (signinBean.getState() == SigninBean.STEP_CURRENT) {
                mAttentionIcon.setBounds(rect);
                mAttentionIcon.draw(canvas);
            } else if (signinBean.getState() == SigninBean.STEP_COMPLETED) {
                mCompleteIcon.setBounds(rect);
                mCompleteIcon.draw(canvas);
            }

            //绘制增加的分数数目
            if (signinBean.getState() == SigninBean.STEP_COMPLETED) {
                //已经完成了
                if (i == mMax[0] || i == mMax[1]) {
                    //是up的需要橙色
                    mTextNumberPaint.setColor(mCurrentTextColor);
                    mTextNumberPaintday.setColor(mCurrentTextColor);
                } else {
                    //普通完成的颜色
                    mTextNumberPaint.setColor(mCompletedLineColor);
                    mTextNumberPaintday.setColor(mCompletedLineColor);
                }
            } else {
                //还没签到的，颜色均为灰色
                mTextNumberPaint.setColor(mUnCompletedLineColor);
                mTextNumberPaintday.setColor(mUnCompletedLineColor);
            }
            canvas.drawText("+" + signinBean.getNumber(),
                    currentComplectedXPosition - CalcUtils.dp2px(getContext(), 5f),
                    mCenterY - mIconHeight / 2 - CalcUtils.dp2px(getContext(), 15f),
                    mTextNumberPaint);

            canvas.drawText(  signinBean.getDay()+"天",
                    currentComplectedXPosition - CalcUtils.dp2px(getContext(), 5f),
                    mCenterY - mIconHeight / 2 + CalcUtils.dp2px(getContext(), 30f),
                    mTextNumberPaintday);

            //绘制UP
            if (i == mMax[0] || i == mMax[1]) {
                //需要UP才进行绘制
                Rect rectUp =
                        new Rect((int) (currentComplectedXPosition - mUpWeight / 2),
                                (int) (mCenterY - mIconHeight / 2 - CalcUtils.dp2px(getContext(), 8f) - mUpHeight),
                                (int) (currentComplectedXPosition + mUpWeight / 2),
                                (int) (mCenterY - mIconHeight / 2 - CalcUtils.dp2px(getContext(), 8f)));

            }
        }
    }

    /**
     * 设置流程步数
     *
     * @param lists 流程步数
     */
    public void setStepNum(List<SigninBean> lists) {
        if (list == null) {
            return;
        }
        list = lists;
        mSinginNum = list.size();
        //找出最大的两个值的位置
        mMax = CalcUtils.findMax(lists);
        //引起重绘
        postInvalidate();
    }

    /**
     * 执行签到动画
     *
     * @param position 执行的位置
     */
    public void startSignAnimation(int position) {
        //线条从灰色变为绿色
        isAnimation = true;
        mPosition = position;
        //引起重绘
        postInvalidate();
    }

}

DEMO下载地址

自定义view实现日历打卡签到
cf8833的博客
05-06 736
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 自定义view实现签到功能
08-30
Android 自定义view实现签到功能,代码清晰易懂，适合新手
SignView自定义签到控件
07-24
自定义的签到控件，里面注释很详细，可以根据自己的需求去改
android自定义签到,自定义View实现签到控件
weixin_42202595的博客
05-25 291
一款签到控件引用implementation 'com.lishang:checkInProgress:1.0.1'属性类型描述text_date_sizesp日期文字大小text_date_colorcolor日期文字颜色radiusdp签到圆半径circle_colorcolor圆的背景色line_heightdp线高line_colorcolor线的颜色text_score_sizesp签到...
Android_自定义签到View
givemeacondom的专栏
10-10 4160
一个类似于进度和打卡进度的自定义view如下图:看GIF岂不是更好这个view在现在的app中挺常见的,基本都是这个套路,之前写过一个可以双向滑动的和这个view的类似,那个滑动的view处理的onTouch事件,以及判断了我们应该滑动哪个小球,有兴趣的可以看下之前的连接 双向滑动的SeekBarhttp://blog.youkuaiyun.com/givemeacondom/article/details/
Android自定义按周签到打卡功能实例代码
08-25
这篇文章主要介绍了Android自定义实现按周签到打卡功能的相关资料，包括自定义签到打卡View、主程序逻辑处理、主界面、签到bean等方面的内容。 Android签到打卡功能实现： 签到打卡功能是Android开发中非常重要的...
android自定义日历-实现签到订约功能
11-07
在Android开发中，创建自定义日历以实现签到和订约功能是一...通过分析这个项目源码，开发者可以学习到Android自定义组件的开发、数据持久化、事件处理、UI设计等多个方面的重要技能，对提升Android开发能力大有裨益。
Android自定义实现按周签到打卡功能
龙旋的博客
02-02 8891
之前实现过《Android可签到的日历控件》的功能，跟这篇一样都是实现签到打卡功能，这篇实现的是按月进行打卡做标识，本篇内容实现的按周进行签到打卡。 实现签到规则如下： 1、连续签到7天，即可获得额外积分奖励。 2、连续签到记录在第8天开始时将清零重新计算。 3、如果中断签到，连续签到记录也将清零。 实现步骤： 1.效果图 2.自定义签到打卡View 3.主程序逻辑处理 4.主界面 5.签到b...
android自定义签到,自定义七天签到View
weixin_42350544的博客
05-25 463
github传送车走你https://github.com/guanhaoran/signin因为这个View 是我很早之前写的,这些注释也是我今天刚想往github上传的时候 临时加的 有的注释可能不准确(毕竟写了好长时间了) 但是我敢保证92%是对的 很尴尬 大家看的时候 不要全部相信注释首先这篇博客是为了让对自定义View不是很熟悉的同学借鉴之用,希望路过的各位大佬勿喷,先看下...
自定义View-签到功能
smallwei2014的博客
07-18 414
1.效果如图，暂时就先写一个测试版本，慢慢在优化 2.使用了一个横向的RecyclerView,然后主要就是底部的view,通过自定义实现，底部自定义的签到TextView源码 import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; im...
android自定义可签到日历
07-18
一个比较详细的自定义的签到日历。简单易懂，可自行修改
Android实现带签到赢积分功能的日历
08-27
主要为大家详细介绍了Android实现带签到赢积分功能的日历，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
自定义签到积分
03-03
自定义签到积分显示 简单易懂 欢迎新手学习使用 导入即可使用
打卡签到日历支持自定义样式支持农历支持二次开发
08-10
打卡签到日历，支持自定义样式，支持农历,支持二次开发
自定义签到的步骤View
sorgs
08-19 1394
引言 涉及到一个签到的步骤view 需求：以七天为周天，执行当天签到需要一个动画效果；签到前灰色，签到后变为绿色；每天加的分数不一定，第三天和第七天加的比较多，分数签到完成为橙色，有up标签。 效果图： 分析 首先是把该绘制的东西绘制到画布上，这点没什么好说，上一遍博客差不多说了怎么去绘制。 先根据数据绘制出静态的东西。把未签到的东西全部绘制完毕。 然后开始绘制动画。处理动...
自定义的签到View
qq_31088045的博客
07-24 437
平常都是用的系统的view，不过有时候需要自己去自定义，这次我也遇到要自定义签到view。 先来看下效果图 第一张是今天没签到的，点击
开发日记--安卓开发中制作日历打卡签到功能
最新发布
qq_69194611的博客
04-04 1346
在安卓开发中，创建每日工作打卡功能，记录打卡时间来统计司机的上班情况。包括数据库，后端视图，前端UI及安卓主线程设计。
自定义view==》签到列表
weixin_34038652的博客
03-15 116
class MyView extends View { private final Paint mPaint; private float w = 100f; private float size = w / 2; private final Paint mPaint1; private final flo...
打造Android自定义日历实现签到订约功能
综上所述，实现一个Android自定义日历-签到订约功能的项目，需要综合运用Android开发中UI设计、事件处理、数据存储与管理、以及后台服务等多个方面知识。通过本项目的学习，开发者可以加深对Android开发流程和工具的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值