Android实现购物车加减器控件

来源：互联网发布：加速度测量软件编辑：程序博客网时间：2024/05/17 11:37

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 .

0 0