购物车里面的加减按钮

来源：互联网发布：mac给iphone充电闪跳编辑：程序博客网时间：2024/05/22 04:33

AnimShopButton

项目地址：mcxtzhang/AnimShopButton

简介：仿饿了么加入购物车旋转控件 - 自带闪转腾挪动画的按钮。自带海量可定制 UI 属性。在 RecyclerView 中使用，切换 LayoutManager 也是没有问题的

更多：作者提 Bug 示例 APK

标签：

动画-自定义View-购物车-饿了么-

A shopping cart button with a telescopic displacement rotation animation ...

一个仿饿了么带伸缩位移旋转动画的购物车按钮

注意，本控件非继承自ViewGroup,而是纯自定义 View，实现的仿饿了么加入购物车控件，自带闪转腾挪动画的按钮。

图 1 项目中使用的效果，考虑到了View的回收复用，

并且可以看到在RecyclerView中使用，切换LayoutManager也是没有问题的，

项目中使用的效果

图 2 Demo 效果，测试各种属性值

Article

Import

Step 1. Add the JitPack repository to your build file

Step 1. 在项目根 build.gradle 文件中增加 JitPack 仓库依赖。

    allprojects {        repositories {            ...            maven { url "https://jitpack.io" }        }    }

Step 2. Add the dependency

    dependencies {            compile 'com.github.mcxtzhang:AnimShopButton:V1.0.0'    }

Usage

xml:

    <!--使用默认 UI 属性-->    <com.mcxtzhang.lib.AnimShopButton        android:id="@+id/btn1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:maxCount="3"/>    <!--设置了两圆间距-->    <com.mcxtzhang.lib.AnimShopButton        android:id="@+id/btn2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:count="3"        app:gapBetweenCircle="90dp"        app:maxCount="99"/>    <!--仿饿了么-->    <com.mcxtzhang.lib.AnimShopButton        android:id="@+id/btnEle"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:addEnableBgColor="#3190E8"        app:addEnableFgColor="#ffffff"        app:hintBgColor="#3190E8"        app:hintBgRoundValue="15dp"        app:hintFgColor="#ffffff"        app:maxCount="99"/>

注意：加减点击后，具体的操作，要根据业务的不同来编写了，设计到实际的购物车可能还有写数据库操作，或者请求接口等，要操作成功后才执行动画、或者修改 count，这一块代码每个人写法可能不同。

使用时，可以重写onDelClick()和onAddClick()方法，并在合适的时机回调onCountAddSuccess()和onCountDelSuccess()以执行动画。

效果图如图 2.

Attributes

nameformatdescription中文解释isAddFillModebooleanPlus button is opened Fill mode default is stroke (false)加按钮是否开启 fill 模式默认是 stroke(false)addEnableBgColorcolorThe background color of the plus button加按钮的背景色addEnableFgColorcolorThe foreground color of the plus button加按钮的前景色addDisableBgColorcolorThe background color when the button is not available加按钮不可用时的背景色addDisableFgColorcolorThe foreground color when the button is not available加按钮不可用时的前景色isDelFillModebooleanPlus button is opened Fill mode default is stroke (false)减按钮是否开启 fill 模式默认是 stroke(false)delEnableBgColorcolorThe background color of the minus button减按钮的背景色delEnableFgColorcolorThe foreground color of the minus button减按钮的前景色delDisableBgColorcolorThe background color when the button is not available减按钮不可用时的背景色delDisableFgColorcolorThe foreground color when the button is not available减按钮不可用时的前景色radiusdimensionThe radius of the circle圆的半径circleStrokeWidthdimensionThe width of the circle圆圈的宽度lineWidthdimensionThe width of the line (+ - sign)线(+ - 符号)的宽度gapBetweenCircledimensionThe spacing between two circles两个圆之间的间距numTextSizedimensionThe textSize of draws the number绘制数量的 textSizemaxCountintegermax count最大数量countintegercurrent count当前数量hintTextstringThe hint text when number is 0数量为 0 时，hint 文字hintBgColorcolorThe hint background when number is 0数量为 0 时，hint 背景色hintFgColorcolorThe hint foreground when number is 0数量为 0 时，hint 前景色hingTextSizedimensionThe hint text size when number is 0数量为 0 时，hint 文字大小hintBgRoundValuedimensionThe background fillet value when number is 0数量为 0 时，hint 背景圆角值

这么多属性够你用了吧。

1 0