加入购物车按钮

最新推荐文章于 2023-11-19 12:43:11 发布
最新推荐文章于 2023-11-19 12:43:11 发布
阅读量1k 收藏
点赞数 1
文章标签： class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qxiaokang/article/details/56485602
版权

效果演示

/**
 * Created by HHD-H-I-0369 on 2017/2/21.
 * 购物按钮
 */
public class ShopButton extends Button{
    private Paint paint = new Paint();//初始化画笔
    private int btwidth = 100;//按钮的宽度
    private int btheight = 30;//按钮的高度
    private int time = 1000;//变化时间
    private boolean isOnclick = false;//是否已点击
    private boolean iscircle = false;//绘园
    private int colorback = Color.RED;//背景颜色
    private int circleR = 20, circleW = 4;//圆的半径,线宽
    private ValueAnimator aFloat, bFloat, cFloat,dFloat;
    private String text;
    private float aFloatf = 0, bFloatf = 0, cFloatf,dFloatf=0;
    private Path path = new Path();
    private int mcount = 0;
    private int btflag_l=0,btflag_r=0;

    public ShopButton(Context context){
        super(context);
    }

    public ShopButton(Context context, AttributeSet attrs){
        super(context, attrs);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        btwidth = MeasureSpec.getSize(widthMeasureSpec);
        btheight = MeasureSpec.getSize(heightMeasureSpec);
        circleR = btheight / 2 - circleW;
        setMeasuredDimension(btwidth, btheight);
    }

    @Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        RectF rect = new RectF(aFloatf * btwidth, 0, btwidth, btheight);
        if((iscircle && !isOnclick && mcount == 0) || (!iscircle && !isOnclick && mcount == 1) || !iscircle && !isOnclick && mcount == 0){
            //绘制文字背景颜色
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(colorback);
            paint.setAntiAlias(true);
            paint.setAlpha((int) (255 * (1 - aFloatf)));
            canvas.drawRoundRect(rect, 10, 10, paint);
            //绘制文字
            paint.setColor(Color.WHITE);
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeWidth(2);
            paint.setTextSize(55);
            //设置文字居中
            paint.setTextAlign(Paint.Align.CENTER);
            paint.setAlpha((int) (255 * (1 - aFloatf)));
            Paint.FontMetricsInt fontMetricsInt = paint.getFontMetricsInt();
            int baseline = (int) ((rect.top + rect.bottom - fontMetricsInt.bottom - fontMetricsInt.top) / 2);
            canvas.drawText(text + "", rect.centerX(), baseline, paint);
        }
        //渐隐
        aFloat = ValueAnimator.ofFloat(0, 1);
        aFloat.setDuration(time);
        aFloat.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){

            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator){
                aFloatf = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        aFloat.addListener(new Animator.AnimatorListener(){
            @Override
            public void onAnimationStart(Animator animator){
               setClickable(false);
            }

            @Override
            public void onAnimationEnd(Animator animator){
                bFloat.start();
                iscircle = true;
                isOnclick = true;
                mcount = 1;
                setMcount(mcount);
                LogUtils.d("animation-a---end");
                setClickable(true);
            }

            @Override
            public void onAnimationCancel(Animator animator){
            }

            @Override
            public void onAnimationRepeat(Animator animator){
            }
        });
        //渐显
        cFloat = ValueAnimator.ofFloat(1, 0);
        cFloat.setDuration(time);
        cFloat.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator){
                cFloatf = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        //显示
        bFloat = ValueAnimator.ofFloat(1, 0);
        bFloat.setDuration(time);
        bFloat.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator){
                bFloatf = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        //渐变的时候不允许点击
        bFloat.addListener(new Animator.AnimatorListener(){
            @Override
            public void onAnimationStart(Animator animator){
                setClickable(false);
            }

            @Override
            public void onAnimationEnd(Animator animator){
                setClickable(true);
            }

            @Override
            public void onAnimationCancel(Animator animator){
            }

            @Override
            public void onAnimationRepeat(Animator animator){
            }
        });
        //绘制圆
        if(aFloatf == 1){
            if(iscircle){
                LogUtils.i("mcount:" + mcount);
                if(mcount > 0){
                    //右圆
                    paint.setColor(Color.BLACK);
                    paint.setStrokeWidth(circleW);
                    paint.setStyle(Paint.Style.STROKE);
                    paint.setDither(true);
                    paint.setAntiAlias(true);
                    path.reset();
                    path.addCircle(btwidth - circleR - circleW, btheight / 2, circleR, Path.Direction.CW);
                    //右+
                    paint.setColor(Color.RED);
                    if(btflag_r==1){
                        paint.setColor(Color.GREEN);//点击更改+的颜色
                    }
                    paint.setAlpha((int) (255 * (1 - bFloatf)));
                    canvas.drawLine(btwidth - circleR / 2 - circleW, btheight / 2, btwidth - circleR / 2 * 3 - circleW, btheight / 2, paint);
                    canvas.drawLine(btwidth - circleR - circleW, circleR / 2 + circleW, btwidth - circleR - circleW, btheight - circleR / 2 - circleW, paint);
                    //左圆
                    paint.setColor(Color.BLACK);
                    path.addCircle((btwidth - (circleR + circleW) * 2) * bFloatf + circleR + circleW, btheight / 2, circleR, Path.Direction.CW);
                    paint.setAlpha((int) (255 * (1 - bFloatf)));
                    canvas.drawPath(path, paint);
                    canvas.save();
                    paint.setAlpha((int) (255 * (1 - bFloatf)));

                    if(btflag_l==1){
                        paint.setColor(Color.GREEN);//点击更改-颜色
                    }
                    canvas.rotate(720 * (bFloatf-1), (btwidth - (circleR + circleW) * 2) * bFloatf + circleR + circleW, btheight / 2);
                    //左-
                    canvas.drawLine(circleW + circleR / 2 + (btwidth - (circleW + circleR) * 2) * bFloatf, btheight / 2, circleW + circleR / 2 * 3 + (btwidth - (circleW + circleR) * 2) * bFloatf, btheight / 2, paint);
                    canvas.restore();

                    paint.setColor(Color.GREEN);
                    paint.setTextAlign(Paint.Align.CENTER);
                    paint.setTextSize(40);
                    paint.setAlpha((int) (255 * (1 - bFloatf)));
                    canvas.save();
                    canvas.rotate(720 * (bFloatf-1), btwidth / 2 + bFloatf * (btwidth / 2 - circleW - circleR), btheight / 4 * 3 - paint.measureText(mcount + "") / 2);
                    canvas.drawText(mcount + "", btwidth / 2 + bFloatf * (btwidth / 2 - circleW - circleR), btheight / 4 * 3, paint);
                    canvas.restore();
                }else{
                    //数量减到0时绘制圆，复位
                    //右圆
                    paint.setColor(Color.BLACK);
                    paint.setStrokeWidth(circleW);
                    paint.setStyle(Paint.Style.STROKE);
                    paint.setDither(true);
                    paint.setAntiAlias(true);
                    path.reset();
                    path.addCircle(btwidth - circleR - circleW, btheight / 2, circleR, Path.Direction.CW);
                    //右+
                    paint.setColor(Color.RED);
                    paint.setAlpha((int) (255 * (1 - dFloatf)));
                    canvas.drawLine(btwidth - circleR / 2 - circleW, btheight / 2, btwidth - circleR / 2 * 3 - circleW, btheight / 2, paint);
                    canvas.drawLine(btwidth - circleR - circleW, circleR / 2 + circleW, btwidth - circleR - circleW, btheight - circleR / 2 - circleW, paint);
                    //左圆
                    paint.setColor(Color.BLACK);
                    path.addCircle((btwidth - (circleR + circleW) * 2) * dFloatf + circleR + circleW, btheight / 2, circleR, Path.Direction.CW);
                    paint.setAlpha((int) (255 * (1 - dFloatf)));
                    canvas.drawPath(path, paint);
                    canvas.save();
                    paint.setAlpha((int) (255 * (1 - dFloatf)));

                    canvas.rotate(720 * dFloatf, (btwidth - (circleR + circleW) * 2) * dFloatf + circleR + circleW, btheight / 2);
                    //左-
                    canvas.drawLine(circleW + circleR / 2 + (btwidth - (circleW + circleR) * 2) * dFloatf, btheight / 2, circleW + circleR / 2 * 3 + (btwidth - (circleW + circleR) * 2) * dFloatf, btheight / 2, paint);
                    canvas.restore();

                    //圆绘制完开始绘制初始的按钮
                    if(dFloatf==1){
                        paint.setColor(Color.GREEN);
                        paint.setTextAlign(Paint.Align.CENTER);
                        paint.setTextSize(40);
                        paint.setAlpha((int) (255 * (1 - dFloatf)));
                        canvas.save();
                        canvas.rotate(720 * dFloatf, btwidth / 2 + dFloatf * (btwidth / 2 - circleW - circleR), btheight / 4 * 3 - paint.measureText(mcount + "") / 2);
                        canvas.drawText(mcount + "", btwidth / 2 + dFloatf * (btwidth / 2 - circleW - circleR), btheight / 4 * 3, paint);
                        canvas.restore();


                        RectF rectf = new RectF(btwidth * cFloatf, 0, btwidth, btheight);
                        paint.setStyle(Paint.Style.FILL);
                        paint.setColor(colorback);
                        paint.setAntiAlias(true);
                        paint.setAlpha((int) (255 * (1 - cFloatf)));
                        canvas.drawRoundRect(rectf, 10, 10, paint);
                        paint.setColor(Color.WHITE);
                        paint.setStyle(Paint.Style.STROKE);
                        paint.setStrokeWidth(2);
                        paint.setTextSize(55);
                        //设置文字居中
                        paint.setTextAlign(Paint.Align.CENTER);
                        paint.setAlpha((int) (255 * (1 - cFloatf)));
                        Paint.FontMetricsInt fontMetricsInt = paint.getFontMetricsInt();
                        int baseline = (int) ((rectf.top + rectf.bottom - fontMetricsInt.bottom - fontMetricsInt.top) / 2);
                        canvas.drawText(text + "", rectf.centerX(), baseline, paint);
                    }
                }
            }
        }
        cFloat.addListener(new Animator.AnimatorListener(){
            @Override
            public void onAnimationStart(Animator animator){
                setClickable(false);
            }

            @Override
            public void onAnimationEnd(Animator animator){
                iscircle = false;
                isOnclick = false;
                aFloatf = 0;//重置为0,循环
                setClickable(true);
            }

            @Override
            public void onAnimationCancel(Animator animator){
            }

            @Override
            public void onAnimationRepeat(Animator animator){
            }
        });

        dFloat=ValueAnimator.ofFloat(0,1);
        dFloat.setDuration(time);
        dFloat.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator){
                dFloatf= (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });

        dFloat.addListener(new Animator.AnimatorListener(){
            @Override
            public void onAnimationStart(Animator animator){
                setClickable(false);
            }

            @Override
            public void onAnimationEnd(Animator animator){
                cFloat.start();
            }

            @Override
            public void onAnimationCancel(Animator animator){
            }

            @Override
            public void onAnimationRepeat(Animator animator){
            }
        });

    }

    public void setShopText(String text){
        this.text = text;
        invalidate();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event){
        float x = event.getX();
        float y = event.getY();
        int action = event.getAction();
        switch(action){
            case MotionEvent.ACTION_DOWN:
                if(isOnclick&&iscircle){
                    //位置在左
                    if(x <= (circleR + circleW) * 2){
                       btflag_l=1;
                        invalidate();
                    }
                    //位置在右
                    if(x >= btwidth - (circleR + circleW) * 2){
                        btflag_r=1;
                        invalidate();
                    }

                }
                break;
            case MotionEvent.ACTION_UP:
                LogUtils.e("坐标x:" + x + "坐标Y:" + y);
                LogUtils.e("width:" + btwidth + "  height:" + btheight);
                if(!isOnclick){
                    iscircle = true;
                    aFloat.start();
                }else{
                    //位置在左
                    if(x <= (circleR + circleW) * 2){
                        btflag_l=0;
                        setMcount(mcount -= 1);
                        if(mcount == 0){
                            dFloat.start();
                        }else{
                            invalidate();
                        }
                    }
                    //位置在右
                    if(x >= btwidth - (circleR + circleW) * 2){
                        btflag_r=0;
                        setMcount(mcount += 1);
                        invalidate();
                    }
                }
                break;
            case MotionEvent.ACTION_MOVE:
                break;
        }
        return super.onTouchEvent(event);
    }

    public void setMcount(int count){
        this.mcount = count;
    }

    public int getMcount(){
        return mcount;
    }
}

/**
 * 自定义view类
 */

public class ViewsActivity extends  BaseActivity implements View.OnClickListener{
    private Button snackDel,snackAdd,endbt;//删除,添加,添加完成的按钮
    private ShopButton shopButton;//加入购物车的按钮
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_snackbar);
        initViews();

    }
    //views初始化
    private void initViews(){
        snackDel = (Button) findViewById(R.id.snack_del_id);
        snackDel.setOnClickListener(this);
        snackAdd= (Button) findViewById(R.id.snack_add_id);
        snackAdd.setOnClickListener(this);
        endbt= (Button) findViewById(R.id.end_id);
        endbt.setOnClickListener(this);
        shopButton= (ShopButton) findViewById(R.id.shopbt_id);
        shopButton.setShopText("加入购物车");
    }

    @Override
    public void onClick(View view){
        switch(view.getId()){
            case R.id.snack_del_id:
                showDelSnackbar();
                break;
            case R.id.snack_add_id:
                showAddSnackbar();
                break;
            case R.id.end_id:
                UniversalUtils.getInstance().showToast(ViewsActivity.this,"添加商品数量为"+shopButton.getMcount());
                break;
            default:
                break;

        }
    }
    //删除的snackbar
    private void showDelSnackbar(){
        Snackbar.make(snackDel,"是否删按钮？",Snackbar.LENGTH_LONG)
                .setAction("是", new View.OnClickListener(){
                    @Override
                    public void onClick(View view){
                        shopButton.setClickable(false);
                        shopButton.setVisibility(View.INVISIBLE);
                        UniversalUtils.getInstance().showToast(ViewsActivity.this,"删除成功");
                    }
                }).show();
    }
    //添加的snackbar
    private void showAddSnackbar(){
        Snackbar.make(snackDel,"是否添加按钮？",Snackbar.LENGTH_LONG)
                .setAction("是", new View.OnClickListener(){
                    @Override
                    public void onClick(View view){
                        shopButton.setVisibility(View.VISIBLE);
                        shopButton.setClickable(true);
                        UniversalUtils.getInstance().showToast(ViewsActivity.this,"添加成功");
                    }
                }).show();
    }
}

/**xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.ViewsActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        >
        <Button
            android:id="@+id/snack_del_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="snackbarDel"
            android:layout_margin="@dimen/bt_margin"
            android:layout_gravity="center"
            />
        <com.example.aozun.testapplication.views.ShopButton
            android:id="@+id/shopbt_id"
            android:layout_width="280dp"
            android:layout_height="@dimen/bt_height"
            android:gravity="center"
            android:layout_gravity="center"
            android:background="@null"
            android:layout_margin="@dimen/bt_margin"
            />
        <Button
            android:id="@+id/end_id"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/bt_height"
            android:layout_margin="@dimen/bt_margin"
            android:text="添加完成"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/snack_add_id"
            android:text="cnackbarAdd"
            android:layout_margin="@dimen/bt_margin"
            android:layout_gravity="center"
            />
    </LinearLayout>
</LinearLayout>
Qxiaokang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
jQuery点击添加到购物车
03-06
jQuery点击添加到购物车 适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
加入购物车CSS3动画按钮特效代码
03-20
加入购物车CSS3动画按钮是一款实用的css3添加购物车按钮点击弹出购物车图标，结算，交互ui动画特效。
添加购物车功能全部代码
pf503603的博客
08-30 2万+
1.添加购物车功能 [1] 冬瓜 商城价：¥299.00 &lt;div class="col-md-2"&gt; &lt;a hr...
点击“加入购物车”按钮后系统是怎样进入购物车页面的？
brightming的专栏
12-22 7124
http://www.zen-cart.cn/forum/topic7456.html Re: 点击“加入购物车”按钮后系统是怎样进入购物车页面的？ 由 hicahica » 2009-04-24 19:01 在shaning和浩霖两位zen星际高手的指引下，现已探路完毕  ，地图如下： index.php加载了includes/applicatio
仿饿了么加入购物车按钮
05-19
"仿饿了么加入购物车按钮"是一个典型的案例，它涉及到如何实现类似知名外卖应用饿了么中的购物车添加按钮的交互效果。这种效果通常包括按钮的动态变化、视觉反馈以及与服务器的数据交互。 首先，我们来看"button"这...
加入购物车代码
05-16
加入购物车
加入购物车CSS3动画按钮
04-25
加入购物车CSS3动画按钮是一款实用的css3添加购物车按钮点击弹出购物车图标，结算，交互ui动画特效。
HTML5点击添加商品购物车代码 v1.0
10-06
这个功能使得用户在浏览网页时可以将商品添加到购物车，即使页面刷新或关闭，购物车中的商品信息仍然能够保存，无需频繁与服务器交互。 1. **Web Storage**：这是HTML5为本地存储提供的一种新方法，它分为两种类型...
购物车中"加入购物车”按钮的实现
weixin_33711641的博客
08-07 1937
2019独角兽企业重金招聘Python工程师标准>>> ...
基于JavaScript实现添加到购物车效果附源码下载
11-22
我们有很多种方法实现将商品添加到购物车，通常的做法是点击“添加到购物车”按钮，会跳转到购物车，在购物车里可以点击“结算”按钮进行结算。而今天我给大家介绍一个更友好的解决方案。 查看演示 下载源码 默认情况下，购物车是隐藏不可见的，当用户点击添加到购物车按钮后，商品信息会添加到购物车，购物车会以按钮的形式出现在页面右下角，点击按钮则会展开购物车，显示购物车中的商品信息，同时也可以对购物车中的商品进行删除或者结算等操作。用户也可以暂时关闭购物车继续购物。 HTML结构 HTML结构主要包括两部分，第一部分是商品列表中的“添加到购物车”按钮，如下代码，我们使用data-*属性将商品的id，图片、名
js实现购物车商品数量加减
10-14
主要为大家详细介绍了js实现购物车商品数量加减，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
设计购物车（赋值button按钮）
weixin_43706224的博客
05-24 938
List item List item 购物车布局
简易购物车（最全代码解析）JavaScript（ES6面向对象）
CSErtuh的博客
09-08 3903
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车</title> <style type="text/css"> table { width: 50%; position: relative; margin: 0px auto; border-collapse: collapse; ...
Android之实现京东底部添加到购物车的效果
热门推荐
顾林海
03-27 2万+
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/50976608 本文出自：【顾林海的博客】 前言美好的双休日快要结束了，昨天玩了一天，今天在家看了一整天的书，大体看了网络框架搭建的一个流程，自己也试了下，有些小问题，还在研究中。用过京东APP的都知道在商品详情页底部有个添加到购物车的按钮，一点击就会将商品以抛
js实现购物车加减操作
最新发布
m0_56713342的博客
11-19 1261
【代码】js实现购物车加减操作。
【六祎-HTML&CSS&JS】购物车的加减按钮操作
六祎的博客
02-04 1777
加减操作 <script type="text/javascript"> //加数量 function addNum(btn) { //表示当前的按钮对象 //得到按钮前面的兄弟元素 var txtElement = btn.previousElementSibling; //得到它的值 va...
购物车加减按钮
start_XUEBA的博客
01-15 4753
分别用JavaScript，jQuery和vue做了一个简单的购物车加减按钮部分。 HTML： <ul class="counter"> <li id="minus"><input type="button" onclick="minuser()" value="-"/></li> <li id="countnum">0<...
用JS实现一个简单的加减购物车效果
supertianjia
07-24 1万+
 1.书写input输入框作为加减实现的效果。 2.加减按钮用button按钮来实现 3.利用js控制i的值作为输入框中的值。 实现的效果： 完整代码如下：   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&
淘宝APP的加入购物车按钮的形状怎么用Android studio代码实现 点
03-05
您可以使用Android studio中的Button控件来实现加入购物车按钮的形状。您可以在XML布局文件中添加Button控件，并设置其背景图片为加入购物车按钮的形状。然后，您可以在Java代码中为该Button控件添加点击事件，以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Qxiaokang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值