配套视频：https://v.qq.com/x/page/e05117e8pti.html
配套视频：https://v.qq.com/x/page/g0511sdul24.html

一种漂亮的UI控件，能更灵活的控制数字的增减。

项目地址:https://github.com/open-android/ShoppingCartAddSubtract

运行效果

可以选择拷贝如下代码也可以直接按照下面的要求直接使用封装好之后的库

注意：下面的代码或者库二选一

public class CustomCarGoodsCounterView extends FrameLayout {
    /**
     * 商品数量
     */
    int mGoodsNumber = 1;
    int mMaxCount;

    @BindView(R.id.tv_number)
    TextView tvNumber;

    private UpdateGoodsNumberListener mUpdateGoodsNumberListener;

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

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

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

    private void init() {
        View rootView = LayoutInflater.from(getContext()).inflate(R.layout.item_car_number_add_sub_layout, this, false);
        ButterKnife.bind(this, rootView);
        addView(rootView);

    }

    @OnClick({R.id.tv_add, R.id.tv_sub})
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tv_add:
                addNumber();
                break;
            case R.id.tv_sub:
                subNumber();
                break;
        }
        updateGoodsNumber();
    }


    /**
     * 更新商品数量
     */
    public void updateGoodsNumber() {
        tvNumber.setText(String.valueOf(mGoodsNumber));
        if (mUpdateGoodsNumberListener != null) {
            mUpdateGoodsNumberListener.updateGoodsNumber(mGoodsNumber);
        }
    }

    public void addNumber() {
        ++mGoodsNumber;
    }

    public void subNumber() {
        mGoodsNumber = (mGoodsNumber - 1 < 1) ? 1 : mGoodsNumber - 1;
    }

    /**
     * 获取商品数量
     *
     * @return
     */
    public int getGoodsNumber() {
        return mGoodsNumber;
    }

    public void setGoodsNumber(int goodsNumber) {
        mGoodsNumber = goodsNumber;
        updateGoodsNumber();
    }

    public void setUpdateGoodsNumberListener(UpdateGoodsNumberListener listener) {
        mUpdateGoodsNumberListener = listener;
    }

    /**
     * 更新商品数量监听器
     */
    public static interface UpdateGoodsNumberListener {
        public void updateGoodsNumber(int number);
    }
}

复制如下XML布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_sub"
            style="@style/item_car_number_add_sub_style"
            android:text="—"/>


        <TextView
            android:id="@+id/tv_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="3dp"
            android:paddingLeft="18dp"
            android:paddingRight="18dp"
            android:paddingTop="3dp"
            android:text="1"
            android:textSize="18sp"/>


        <TextView
            android:id="@+id/tv_add"
            style="@style/item_car_number_add_sub_style"
            android:text="+"/>

    </LinearLayout>
</android.support.v7.widget.CardView>

TextView的样式

<style name="item_car_number_add_sub_style">
        <item name="android:clickable">true</item>
        <item name="android:background">@drawable/item_hometype_left_selector</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:paddingBottom">3dp</item>
        <item name="android:paddingLeft">16dp</item>
        <item name="android:paddingRight">16dp</item>
        <item name="android:paddingTop">3dp</item>
        <item name="android:textSize">18sp</item>
    </style>

库的使用步骤和上面的自定义控件不要混用

1. 在project的build.gradle添加如下代码(如下图)

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

2. 在Module的build.gradle添加依赖

 compile 'com.github.open-android:ShoppingCartAddSubtract:0.1.0'

3. 在XML添加如下代码

<LinearLayout
    android:padding="15dp"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.bigkoo.snappingstepper.SnappingStepper
        android:id="@+id/stepper"
        android:layout_width="120dp"
        android:layout_height="30dp"/>

    <TextView
        android:id="@+id/tvValue"
        android:layout_marginLeft="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

4. 在java类中添加如下代码

tvValue = (TextView) findViewById(R.id.tvValue);
stepper = (SnappingStepper) findViewById(R.id.stepper);
tvValue.setText(String.valueOf(stepper.getValue()));
stepper.setOnValueChangeListener(this);
@Override
public void onValueChange(View view ,int value) {
    switch (view.getId()){
        case R.id.stepper:
            tvValue.setText(String.valueOf(value));
            break;
    }
}

• 注意细节

支持更多的自定义属性java代码表示

stepperCustom.setBackgroundColor(getResources().getColor(R.color.colorStepperButtonNormal));
stepperCustom.setButtonBackGround(R.drawable.sl_steppercustom_button_bg);
stepperCustom.setContentBackground(R.color.colorStepperContentBg);
stepperCustom.setContentTextColor(R.color.colorStepperText);
stepperCustom.setContentTextSize(18);
stepperCustom.setLeftButtonResources(R.drawable.ic_stepper_left);
stepperCustom.setRightButtonResources(R.drawable.ic_stepper_right);

欢迎关注微信公众号