Android-带有切换动画的CheckBox

最新推荐文章于 2024-06-24 05:47:12 发布
最新推荐文章于 2024-06-24 05:47:12 发布
阅读量5.7k 收藏 14
点赞数 3
分类专栏： Android相关 文章标签： checkbox 动画 android

转自：https://github.com/andyxialm/SmoothCheckBox

这里写图片描述

前言

切换带动画的效果确实不错，可能以后项目会用得到，所以转发收藏。

1，自定义 SmoothCheckBox 。

public class SmoothCheckBox extends View implements Checkable {
    private static final String KEY_INSTANCE_STATE = "InstanceState";
    private static final int COLOR_TICK      = Color.WHITE;
    private static final int COLOR_UNCHECKED = Color.WHITE;
    private static final int COLOR_CHECKED   = Color.parseColor("#FB4846");
    private static final int COLOR_FLOOR_UNCHECKED = Color.parseColor("#DFDFDF");
    private static final int DEF_ANIM_DURATION = 300;

    private Paint mPaint, mTickPaint, mFloorPaint;
    private Point[] mTickPoints;
    private Point mCenterPoint;
    private Path mTickPath;
    private float mLeftLineDistance, mRightLineDistance, mDrewDistance;
    private float mScaleVal = 1.0f, mFloorScale = 1.0f;
    private int mWidth, mAnimDuration, mStrokeWidth;
    private int mCheckedColor, mUnCheckedColor, mFloorColor, mFloorUnCheckedColor;
    private boolean mChecked;
    private boolean mTickDrawing;
    private OnCheckedChangeListener mListener;

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

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

    public SmoothCheckBox(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public SmoothCheckBox(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(attrs);
    }

    private void init(AttributeSet attrs) {

        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.SmoothCheckBox);
        int tickColor = ta.getColor(R.styleable.SmoothCheckBox_color_tick, COLOR_TICK);
        mAnimDuration = ta.getInt(R.styleable.SmoothCheckBox_duration, DEF_ANIM_DURATION);
        mFloorColor = ta.getColor(R.styleable.SmoothCheckBox_color_unchecked_stroke, COLOR_FLOOR_UNCHECKED);
        mCheckedColor = ta.getColor(R.styleable.SmoothCheckBox_color_checked, COLOR_CHECKED);
        mUnCheckedColor = ta.getColor(R.styleable.SmoothCheckBox_color_unchecked, COLOR_UNCHECKED);
        mStrokeWidth = ta.getDimensionPixelSize(R.styleable.SmoothCheckBox_stroke_width,
                CompatUtils.dp2px(getContext(), 0));
        ta.recycle();

        mFloorUnCheckedColor = mFloorColor;
        mTickPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTickPaint.setStyle(Paint.Style.STROKE);
        mTickPaint.setStrokeCap(Paint.Cap.ROUND);
        mTickPaint.setColor(tickColor);

        mFloorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mFloorPaint.setStyle(Paint.Style.FILL);
        mFloorPaint.setColor(mFloorColor);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(mCheckedColor);

        mTickPath = new Path();
        mCenterPoint = new Point();
        mTickPoints = new Point[3];
        mTickPoints[0] = new Point();
        mTickPoints[1] = new Point();
        mTickPoints[2] = new Point();

        setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                toggle();
                mTickDrawing = false;
                mDrewDistance = 0;
                if (isChecked()) {
                    startCheckedAnimation();
                } else {
                    startUnCheckedAnimation();
                }
            }
        });
    }

    @Override
    protected Parcelable onSaveInstanceState() {
        Bundle bundle = new Bundle();
        bundle.putParcelable(KEY_INSTANCE_STATE, super.onSaveInstanceState());
        bundle.putBoolean(KEY_INSTANCE_STATE, isChecked());
        return bundle;
    }

    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        if (state instanceof Bundle) {
            Bundle bundle = (Bundle) state;
            boolean isChecked = bundle.getBoolean(KEY_INSTANCE_STATE);
            setChecked(isChecked);
            super.onRestoreInstanceState(bundle.getParcelable(KEY_INSTANCE_STATE));
            return;
        }
        super.onRestoreInstanceState(state);
    }

    @Override
    public boolean isChecked() {
        return mChecked;
    }

    @Override
    public void toggle() {
        this.setChecked(!isChecked());
    }

    @Override
    public void setChecked(boolean checked) {
        mChecked = checked;
        reset();
        invalidate();
        if (mListener != null) {
            mListener.onCheckedChanged(SmoothCheckBox.this, mChecked);
        }
    }

    /**
     * <p>checked with animation</p>
     * @param checked checked
     * @param animate change with animation
     */
    public void setChecked(boolean checked, boolean animate) {
        if (animate) {
            mTickDrawing = false;
            mChecked = checked;
            mDrewDistance = 0f;
            if (checked) {
                startCheckedAnimation();//选中之后的动画
            } else {
                startUnCheckedAnimation();//取消选中的动画
            }
            if (mListener != null) {
                mListener.onCheckedChanged(SmoothCheckBox.this, mChecked);
            }

        } else {
            this.setChecked(checked);
        }
    }

    private void reset() {
        mTickDrawing = true;
        mFloorScale = 1.0f;
        mScaleVal = isChecked() ? 0f : 1.0f;
        mFloorColor = isChecked() ? mCheckedColor : mFloorUnCheckedColor;
        mDrewDistance = isChecked() ? (mLeftLineDistance + mRightLineDistance) : 0;
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        mWidth = getMeasuredWidth();
        mStrokeWidth = (mStrokeWidth == 0 ? getMeasuredWidth() / 10 : mStrokeWidth);
        mStrokeWidth = mStrokeWidth > getMeasuredWidth() / 5 ? getMeasuredWidth() / 5 : mStrokeWidth;
        mStrokeWidth = (mStrokeWidth < 3) ? 3 : mStrokeWidth;
        mCenterPoint.x = mWidth / 2;
        mCenterPoint.y = getMeasuredHeight() / 2;

        mTickPoints[0].x = Math.round((float) getMeasuredWidth() / 30 * 7);
        mTickPoints[0].y = Math.round((float) getMeasuredHeight() / 30 * 14);
        mTickPoints[1].x = Math.round((float) getMeasuredWidth() / 30 * 13);
        mTickPoints[1].y = Math.round((float) getMeasuredHeight() / 30 * 20);
        mTickPoints[2].x = Math.round((float) getMeasuredWidth() / 30 * 22);
        mTickPoints[2].y = Math.round((float) getMeasuredHeight() / 30 * 10);

        mLeftLineDistance = (float) Math.sqrt(Math.pow(mTickPoints[1].x - mTickPoints[0].x, 2) +
                Math.pow(mTickPoints[1].y - mTickPoints[0].y, 2));
        mRightLineDistance = (float) Math.sqrt(Math.pow(mTickPoints[2].x - mTickPoints[1].x, 2) +
                Math.pow(mTickPoints[2].y - mTickPoints[1].y, 2));
        mTickPaint.setStrokeWidth(mStrokeWidth);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        drawBorder(canvas);
        drawCenter(canvas);
        drawTick(canvas);
    }

    private void drawCenter(Canvas canvas) {
        mPaint.setColor(mUnCheckedColor);
        float radius = (mCenterPoint.x - mStrokeWidth) * mScaleVal;
        canvas.drawCircle(mCenterPoint.x, mCenterPoint.y, radius, mPaint);
    }

    private void drawBorder(Canvas canvas) {
        mFloorPaint.setColor(mFloorColor);
        int radius = mCenterPoint.x;
        canvas.drawCircle(mCenterPoint.x, mCenterPoint.y, radius * mFloorScale, mFloorPaint);
    }

    private void drawTick(Canvas canvas) {
        if (mTickDrawing && isChecked()) {
            drawTickPath(canvas);
        }
    }

    private void drawTickPath(Canvas canvas) {
        mTickPath.reset();
        // draw left of the tick
        if (mDrewDistance < mLeftLineDistance) {
            float step = (mWidth / 20.0f) < 3 ? 3 : (mWidth / 20.0f);
            mDrewDistance += step;
            float stopX = mTickPoints[0].x + (mTickPoints[1].x - mTickPoints[0].x) * mDrewDistance / mLeftLineDistance;
            float stopY = mTickPoints[0].y + (mTickPoints[1].y - mTickPoints[0].y) * mDrewDistance / mLeftLineDistance;

            mTickPath.moveTo(mTickPoints[0].x, mTickPoints[0].y);
            mTickPath.lineTo(stopX, stopY);
            canvas.drawPath(mTickPath, mTickPaint);

            if (mDrewDistance > mLeftLineDistance) {
                mDrewDistance = mLeftLineDistance;
            }
        } else {

            mTickPath.moveTo(mTickPoints[0].x, mTickPoints[0].y);
            mTickPath.lineTo(mTickPoints[1].x, mTickPoints[1].y);
            canvas.drawPath(mTickPath, mTickPaint);

            // draw right of the tick
            if (mDrewDistance < mLeftLineDistance + mRightLineDistance) {
                float stopX = mTickPoints[1].x + (mTickPoints[2].x - mTickPoints[1].x) * (mDrewDistance - mLeftLineDistance) / mRightLineDistance;
                float stopY = mTickPoints[1].y - (mTickPoints[1].y - mTickPoints[2].y) * (mDrewDistance - mLeftLineDistance) / mRightLineDistance;

                mTickPath.reset();
                mTickPath.moveTo(mTickPoints[1].x, mTickPoints[1].y);
                mTickPath.lineTo(stopX, stopY);
                canvas.drawPath(mTickPath, mTickPaint);

                float step = (mWidth / 20) < 3 ? 3 : (mWidth / 20);
                mDrewDistance += step;
            } else {
                mTickPath.reset();
                mTickPath.moveTo(mTickPoints[1].x, mTickPoints[1].y);
                mTickPath.lineTo(mTickPoints[2].x, mTickPoints[2].y);
                canvas.drawPath(mTickPath, mTickPaint);
            }
        }

        // invalidate
        if (mDrewDistance < mLeftLineDistance + mRightLineDistance) {
            postDelayed(new Runnable() {
                @Override
                public void run() {
                    postInvalidate();
                }
            }, 10);
        }
    }

    private void startCheckedAnimation() {
        ValueAnimator animator = ValueAnimator.ofFloat(1.0f, 0f);
        animator.setDuration(mAnimDuration / 3 * 2);
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mScaleVal = (float) animation.getAnimatedValue();
                mFloorColor = getGradientColor(mUnCheckedColor, mCheckedColor, 1 - mScaleVal);
                postInvalidate();
            }
        });
        animator.start();

        ValueAnimator floorAnimator = ValueAnimator.ofFloat(1.0f, 0.8f, 1.0f);
        floorAnimator.setDuration(mAnimDuration);
        floorAnimator.setInterpolator(new LinearInterpolator());
        floorAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mFloorScale = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        floorAnimator.start();

        drawTickDelayed();
    }

    private void startUnCheckedAnimation() {
        ValueAnimator animator = ValueAnimator.ofFloat(0f, 1.0f);
        animator.setDuration(mAnimDuration);
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mScaleVal = (float) animation.getAnimatedValue();
                mFloorColor = getGradientColor(mCheckedColor, COLOR_FLOOR_UNCHECKED, mScaleVal);
                postInvalidate();
            }
        });
        animator.start();

        ValueAnimator floorAnimator = ValueAnimator.ofFloat(1.0f, 0.8f, 1.0f);
        floorAnimator.setDuration(mAnimDuration);
        floorAnimator.setInterpolator(new LinearInterpolator());
        floorAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mFloorScale = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        floorAnimator.start();
    }

    private void drawTickDelayed() {
        postDelayed(new Runnable() {
            @Override
            public void run() {
                mTickDrawing = true;
                postInvalidate();
            }
        }, mAnimDuration);
    }

    private static int getGradientColor(int startColor, int endColor, float percent) {
        int sr = (startColor & 0xff0000) >> 0x10;
        int sg = (startColor & 0xff00) >> 0x8;
        int sb = (startColor & 0xff);

        int er = (endColor & 0xff0000) >> 0x10;
        int eg = (endColor & 0xff00) >> 0x8;
        int eb = (endColor & 0xff);

        int cr = (int) (sr * (1 - percent) + er * percent);
        int cg = (int) (sg * (1 - percent) + eg * percent);
        int cb = (int) (sb * (1 - percent) + eb * percent);
        return Color.argb(0xff, cr, cg, cb);
    }

    public void setOnCheckedChangeListener(OnCheckedChangeListener l) {
        this.mListener = l;
    }

    public interface OnCheckedChangeListener {
        void onCheckedChanged(SmoothCheckBox checkBox, boolean isChecked);
    }
}

2，在布局文件中引用这个定义的CheckBox控件。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="cn.refactor.smoothcheckbox.MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">

        <cn.refactor.library.SmoothCheckBox
            android:id="@+id/mcb"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="5dp"
            app:color_checked="@color/colorAccent" />

        <cn.refactor.library.SmoothCheckBox
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="5dp"
            app:color_checked="#447eeb" />

        <cn.refactor.library.SmoothCheckBox
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="5dp"
            app:color_checked="#149A45" />

        <cn.refactor.library.SmoothCheckBox
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="5dp" />


    </LinearLayout>

</LinearLayout>

这里写图片描述

3，使用

 setChecked(boolean checked);                   // 默认不带动画，若需要动画 调用重载方法
 setChecked(boolean checked, boolean animate);  // 参数: animate 是否显示动画
 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sample);

        final SmoothCheckBox mcb = (SmoothCheckBox) findViewById(R.id.mcb);
        mcb.setOnCheckedChangeListener(new SmoothCheckBox.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(SmoothCheckBox checkBox, boolean isChecked) {
                Log.d("MellowCheckBox", String.valueOf(isChecked));
            }
        });
    }
七号座先生
关注
专栏目录
android选中动画效果,Android实现炫酷的CheckBox效果
weixin_34439450的博客
05-25 1282
首先贴出实现的效果图：gif的效果可能有点过快，在真机上运行的效果会更好一些。我们主要的思路就是利用属性动画来动态地画出选中状态以及对勾的绘制过程。看到上面的效果图，相信大家都迫不及待地要跃跃欲试了，那就让我们开始吧。自定义View的第一步：自定义属性。我们把CheckBox取名为SmoothCheckBox，定义了几个等等要用到的属性。这一步很简单，相信大家都熟练了。接下来看一看onMeasur...
Android 带有切换动画的CheckBox。
王有才的博客
05-19 1469
Attrs 属性attr format description duration integer 动画持续时间 stroke_width dimension 未选中时边框宽度 color_tick color 对勾颜色 color_checked color 选中时填充颜色 color_unchecked color 未选中时填充颜色 color
android checkbox自定义样式
xSTARx
01-09 458
  推荐安卓开发神器（里面有各种UI特效和android代码库实例） 1. 首先要导入你准备用作CheckBox选中和补选中状态的两图片到res的drawable中，如checkbox_checked.png，checkbox_normal.png；2. 在res/drawable中添加checkbox.xml，定义checkbox的state list drawable图片  v...
Android自定义View：一个精致的打钩小动画
最新发布
asdzxc324as的博客
06-24 613
既然分选中状态和未选中状态，那个绘制过程中，就必须判断当前究竟是绘制未选中的呢还是选中了的呢。因此在这里，我定义了一个变量isChecked//是否被点亮//暴露外部接口，改变绘制状态reset();没有选中的基调颜色选中后的基调颜色选中后钩的颜色圆的半径动画执行的速度这里简单说一下动画执行速度的配置，这里我设置了3档速度，我用枚举定义了三个速度的配置项//低速//正常速度//高速//圆环进度增加的单位//圆圈收缩的单位//圆圈最后放大收缩的单位。
CheckBox
weixin_33711641的博客
09-09 173
写一个带动画化效果的CheckBox，先看效果，我觉得这个尺寸是最好看的，画图板画出来的，有点丑啊。。 003.png 000.gif 怎么用 <pre> <org.alex.checkbox.CheckBox xmlns:CheckBox="http://s...
Android CheckBox实现状态选择动画
shenggaofei的博客
05-23 2393
话不多说，只是为了帮助节约时间...1.ResumeSearchResultActivity类package com.risfond.rnss.home.resume.activity; import android.content.Context; import android.content.DialogInterface; import android.content.Intent; im...
Android CheckBox点击切换
qq_35526811的博客
02-11 575
首先看效果图 <item android:drawable="@drawable/ic_s_circle_checked" android:state_checked="true"/> <item android:drawable="@drawable/ic_s_circle" android:state_checked="false"/> <item android:draw
Android 带有切换动画的CheckBox
02-24
"Android 带有切换动画的CheckBox"就是这样一个专题，它涉及到了Android UI自定义、动画设计以及事件处理等多个知识点。 首先，我们要理解Android中的Animation机制。Android提供了多种动画类型，如Tween动画（平移...
实现checkbox动画切换状态
04-05
通过上述步骤，我们就可以实现一个带有动画效果的Checkbox。在实际开发中，开发者可以根据项目需求定制更丰富的动画效果，比如渐变色过渡、旋转动画等。同时，这个项目也为我们提供了一个学习和借鉴的案例，帮助我们...
带动画效果的CheckBox控件
04-05
本篇文章将详细讲解如何创建一个带有动画效果的CheckBox控件，该控件由作者hanks-zyh设计，并在开源项目AnimateCheckBox中实现。这个控件仅通过一个自定义的View文件就实现了丰富的动画效果。 首先，我们来看看...
Android代码-漂亮动画效果的Checkbox
08-08
CircleCheckBox Screenshot： Attrs attr format checked boolean animation_duration integer tick_width dimension border_width dimension tick_color color border_color color background_color color Including in your project CircleCheckBox is available in the MavenCentral, so getting it as simple as adding it as a dependencycompile 'com.uniquestudio:checkbox:1.0.10' Usage checkBox = (CircleCheckBox) findViewById(R.id.circle_check_box); checkBox.setListener(new CircleCheckBox.On
Android 实现带动画效果的CheckBox 源码
10-10
一个自定义的带动画效果的CheckBox控件，不过只有一个自定义的View文件。
一个简单的切换动画的CheckBox
04-05
作者andyxialm，源码SmoothCheckBox，也是一个简单的切换动画的CheckBox，Android 带有切换动画的CheckBox。
Android实现炫酷的CheckBox效果
01-05
首先贴出实现的效果图： gif的效果可能有点过快，在真机上运行的效果会更好一些。我们主要的思路就是利用属性动画来动态地画出选中状态以及对勾的绘制过程。看到上面的效果图，相信大家都迫不及待地要跃跃欲试了，那就让我们开始吧。 自定义View的第一步：自定义属性。 <?xml version=1.0 encoding=utf-8?> <!-- 动画持续时间 --> <!-- 边框宽
Android代码-一个漂亮的CheckBox控件
08-06
AnimCheckBox Screenshot Inspired By Dribbble Import to your project Gradle Add it in your build.gradle at the end of repositories repositories { // ... maven { url "https://jitpack.io" } } Add the dependency in the form dependencies { compile 'com.github.lguipeng:AnimCheckBox:1.0.1' } Maven jitpack.io https://jitpack.io com.github.lguipeng AnimCheckBox 1.0.1 Or Copy AnimCheckBox.java into your project. Usage In Layout File In Java File AnimCheckBox checkbox
动画 Checkbox：为你的应用增添生动交互体验
gitblog_00032的博客
04-18 303
动画 Checkbox：为你的应用增添生动交互体验 项目地址:https://gitcode.com/hanks-zyh/AnimateCheckBox AnimateCheckBox 是一个开源的 Android 控件库，由开发者 Hanks ZyH 创作并维护。它提供了一种新颖、有趣的方式来实现Checkbox组件的选中与取消选中的动画效果，可以为你的Android应用增加视觉吸引力和互动性。...
Android 记录一次dialog的CheckBox没有动画效果的问题
BigNumb的博客
05-24 342
public class MainActivity extends AppCompatActivity { private static Dialog dialog; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); .
给CheckBox加上动画
玖哥的书房
01-26 951
容我慢写
Android自定义CheckBox实现与动画优化教程
本文将深入探讨如何在Android应用中自定义CheckBox组件，包括基础的自定义视图设计、动画效果的实现以及针对特定问题的源码解析。 首先，自定义Checkbox的步骤通常涉及创建一个继承自`View`的新类，而不是直接使用...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值