Android实现购物车加减器控件

Android 购物车加减器控件的实现， 效果图如下：

[caption id=”attachment_259” align=”aligncenter” width=”240”] 购物车加减器[/caption]

实现功能：点击加号数值增加，点击减号数值递减， 点击数值区域可以手动输入数值。

布局可以使用左右各一个button，中间是一个edittext . 因为button 显示效果会有padding 加减号显示的比较小， 所有我改用了textView.，这样更多的空间可以设置文字的大小。好的， 到这里我们就知道界面上的控件都有那些了， 下面我们再说一下实现的逻辑步骤

首先 定义一个变量用来保存value ,按钮加减 要注册点击事件，点击按钮累加或者递减vaule 数值， 点击中间的EditText输入值并覆盖vaule的值，所以edittext 要实现

addTextChangedListener

监听，并且重写afterTextChanged方法， 在该方法中处理value的变化。

下面是源码 ：

package com.dobest.fdnf.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.text.Editable;
import android.text.InputType;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.dobest.fdnf.R;


/**
 * Created by Gordo on 2016/12/18.
 */

public class AdderWidget extends LinearLayout {
    private float adderHeight;
    private float adderWidth;
    private float btnTextSize;
    private float tvTextSize;
    private int tvTextColor;
    private int btnTextColor;
    private int btnWidth;
    private int btnHeight;
    private int tvBackground;
    private int btnBackground;
    private String TAG = this.getClass().getSimpleName();
    private TextView btnMinus;
    private TextView btnAdd;
    private EditText textView;
    private int value = 1;

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public AdderWidget(Context context) {
        this(context, null);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public AdderWidget(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void initView(Context context, AttributeSet attrs) {
        this.setOrientation(HORIZONTAL);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.adder_widget);

        adderHeight = typedArray.getDimension(R.styleable.adder_widget_adderHeight, 60);
        adderWidth = typedArray.getDimension(R.styleable.adder_widget_adderWidth, 100);
        btnHeight = typedArray.getDimensionPixelSize(R.styleable.adder_widget_adderBtnHeight, 60);
        btnWidth = typedArray.getDimensionPixelSize(R.styleable.adder_widget_adderBtnWidth, 60);
        tvTextColor = typedArray.getColor(R.styleable.adder_widget_adderTvTextColor, 0);
        tvTextSize = typedArray.getDimensionPixelSize(R.styleable.adder_widget_adderTvTextSize, 9);
        btnTextColor = typedArray.getColor(R.styleable.adder_widget_adderBtnTextColor, 0);
        btnTextSize = typedArray.getDimensionPixelSize(R.styleable.adder_widget_adderBtnTextSize, 9);
        btnBackground = typedArray.getColor(R.styleable.adder_widget_adderBtnBackground, 0);
        tvBackground = typedArray.getColor(R.styleable.adder_widget_adderTvBackground, 0);
        typedArray.recycle();
        buildView(context);
        setListener();
    }

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

    private void setListener() {
        btnAdd.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                value++;
                updateValue();
            }
        });
        btnMinus.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                if (value > 0) {
                    value--;
                } else {
                    value = 0;
                }
                updateValue();
            }
        });

            textView.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.toString().trim().equals("")) {
                    value = 0;
                } else {
                    value = Integer.valueOf(charSequence.toString());
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

                if (value > 1000) {
                    editable.replace(0, textView.getText().toString().length(), "1000");
                    value = 1000;
                    Toast.makeText(getContext(), "最大只能到1000", Toast.LENGTH_SHORT).show();
                }
                if (onAdderValueListener != null) {
                    onAdderValueListener.onAdderValue(String.valueOf(value));
                }
            }
        });

    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void buildView(Context context) {
        btnMinus = new TextView(context);
        btnMinus.setGravity(Gravity.CENTER);
        btnMinus.setTextSize(TypedValue.COMPLEX_UNIT_PX, btnTextSize);
        btnMinus.setTextColor(btnTextColor);
        btnMinus.setText("-");
        btnMinus.setElevation(4);
        btnMinus.setBackgroundColor(btnBackground);

        LayoutParams params = new LayoutParams(btnWidth, ViewGroup.LayoutParams.MATCH_PARENT);
        btnMinus.setLayoutParams(params);
        btnAdd = new TextView(context);
        btnAdd.setLayoutParams(params);
        btnAdd.setGravity(Gravity.CENTER);
        btnAdd.setTextSize(TypedValue.COMPLEX_UNIT_PX, btnTextSize);
        btnAdd.setTextColor(btnTextColor);
        btnAdd.setElevation(4);
        btnAdd.setBackgroundColor(btnBackground);


        btnAdd.setText("+");
        textView = new EditText(context);
        LayoutParams tvParams = new LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT, 1);
        tvParams.setMargins(2, 0, 2, 0);
        textView.setLayoutParams(tvParams);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(tvTextColor);
        textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, tvTextSize);
        textView.setInputType(InputType.TYPE_CLASS_NUMBER);
        textView.setBackgroundColor(tvBackground);
        textView.setPadding(0, 0, 0, 0);
        textView.setElevation(4);
        textView.setCursorVisible(true);
        this.addView(btnMinus);
        this.addView(textView);
        this.addView(btnAdd);
        updateValue();
    }


    private void updateValue() {
        String adderValue = "";
        if (value > 1000) {
            adderValue = "1000";
            value = 1000;
            Toast.makeText(getContext(), "最大只能到1000", Toast.LENGTH_SHORT).show();
        } else {
            adderValue = String.valueOf(value);
        }
        textView.setText(adderValue);
        if (onAdderValueListener != null) {
            onAdderValueListener.onAdderValue(adderValue);
        }
    }

    public void setTextValue(int value) {
        this.value = value;
        textView.setText(String.valueOf(this.value));
    }


    private OnAdderValueListener onAdderValueListener;

    public void setOnAdderValueListener(OnAdderValueListener onAdderValueListener) {
        this.onAdderValueListener = onAdderValueListener;
    }

    public interface OnAdderValueListener {
        void onAdderValue(String value);
    }
}

自定义的属性

<declare-styleable name="adder_widget">
    <!--控件的高度-->
    <attr name="adderHeight" format="dimension"/>
    <attr name="adderWidth" format="dimension"/>
    <attr name="adderBtnTextSize" format="dimension"/>
    <attr name="adderTvTextSize" format="dimension"/>
    <attr name="adderTvTextColor" format="color"/>
    <attr name="adderBtnTextColor" format="color"/>
    <attr name="adderBtnWidth" format="dimension"/>
    <attr name="adderBtnHeight" format="dimension"/>
    <attr name="adderBtnBackground" format="color"/>
    <attr name="adderTvBackground" format="color"/>

</declare-styleable>

在项目中和button 一样使用如下：

<com.dobest.fdnf.widget.AdderWidget
    android:id="@+id/adderWidget"
    android:layout_width="100dp"
    android:layout_height="32dp"
    android:layout_gravity="center"
    android:background="@drawable/style_adder_bg"
    android:padding="@dimen/horizontal_dimen_1dp"
    adder:adderBtnBackground="#ffffff"
    adder:adderBtnHeight="30dp"
    adder:adderBtnTextColor="@color/color_333333"
    adder:adderBtnTextSize="@dimen/text_size_16sp"
    adder:adderBtnWidth="30dp"
    adder:adderTvBackground="#ffffff"
    adder:adderTvTextColor="@color/color_333333"
    adder:adderTvTextSize="@dimen/text_size_16sp"/>

注意这里 因为使用了自定义的属性，所以要引入

xmlns:adder="http://schemas.android.com/apk/res-auto"

才能正常使用。

控件使用自定义背景

名称style_adder_bg

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/color_F5F5F5"/>
            <corners android:radius="@dimen/horizontal_dimen_3dp"/>
        </shape>
    </item>
</layer-list>

在java中如下使用

adderWidget.setOnAdderValueListener(new AdderWidget.OnAdderValueListener() {
    @Override
    public void onAdderValue(String value) {
        filedVaule = Integer.valueOf(value);
        ToastUtils.toastShort(context, value);
    }
});

 

onAdderValue()方法中的形参就是传出的value .