Android custom combination control-digital addition and subtraction (applicable to shopping cart)

Link to this article: https://blog.csdn.net/qq_40785165/article/details/110148784

Hello everyone, I am Xiao Hei, a programmer who is not yet bald~~~

Learning alone without friends, but lonely and ignorant--"Book of Rites·Book of Study"

Today's content is to customize an array addition and subtraction control, which can be applied to the quantity selection of the shopping cart. The effect is as follows:

Customize the settings of the default value, maximum value, minimum value, and step value of the control

(1) Set the control layout view_number.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical">
​
    <ImageView
        android:id="@+id/iv_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/icon_add_enable" />
​
    <EditText
        android:id="@+id/edit_value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="@drawable/frame_with_gray_edge_white"
        android:paddingLeft="15dp"
        android:paddingTop="10dp"
        android:paddingRight="15dp"
        android:paddingBottom="10dp"
        android:text="1"
        android:textColor="#000"
        android:textSize="14dp" />
​
    <ImageView
        android:id="@+id/iv_minus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="@drawable/select_minus_switch" />
</LinearLayout>

The button style only realizes the switch of the clickable state. You can also realize the effect of the clicked state by yourself. The code of select_minus_switch.xml is as follows:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/icon_minus_disable" android:state_enabled="false" />
    <item android:drawable="@mipmap/icon_minus_enable" android:state_enabled="true" />
</selector>

The frame_with_gray_edge_white.xml code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <solid android:color="#fff" />
    <stroke
        android:width="0.5dp"
        android:color="#c0c0c0" />
</shape>

(2) Create a class and inherit the basic layout, load the view, obtain and use custom attribute design

The code of the custom attribute file attrs_number_view.xml is as follows:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="NumberView">
        <attr name="min" format="integer" />
        <attr name="max" format="integer" />
        <attr name="step" format="integer" />
        <attr name="defaultValue" format="integer" />
    </declare-styleable>
​
</resources>

The NumberView.java code is as follows:

public class NumberView extends LinearLayout {
    private ImageView mIvAdd;
    private ImageView mIvMinus;
    private EditText mEditValue;
    private int mCurrentValue;//当前的数值
    private OnValueChangeListener mOnValueChangeListener;//值发生变化时的回调
    private int mMax;//最大值
    private int mMin;//最小值
    private int mStep;//步长
    private int mDefaultValue;//默认值
    
    public int getMax() {
        return mMax;
    }
​
    public void setMax(int max) {
        mMax = max;
    }
​
    public int getMin() {
        return mMin;
    }
​
    public void setMin(int min) {
        mMin = min;
    }
​
    public int getStep() {
        return mStep;
    }
​
    public void setStep(int step) {
        mStep = step;
    }
​
    public int getDefaultValue() {
        return mDefaultValue;
    }
​
    public void setDefaultValue(int defaultValue) {
        mCurrentValue = mDefaultValue = defaultValue;
        updateText();
    }
​
    public int getCurrentValue() {
        return mCurrentValue;
    }
    //手动设置值需要更新UI
    public void setCurrentValue(int currentValue) {
        mCurrentValue = currentValue;
        updateText();
    }
​
    public NumberView(Context context) {
        this(context, null, 0);
    }
​
    public NumberView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
​
    public NumberView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
        getAttrs(context, attrs);
​
    }
    //获取自定义属性
    private void getAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.NumberView);
        mMax = typedArray.getInt(R.styleable.NumberView_max, 999999);
        mMin = typedArray.getInt(R.styleable.NumberView_min, 0);
        mStep = typedArray.getInt(R.styleable.NumberView_step, 1);
        mDefaultValue = typedArray.getInt(R.styleable.NumberView_defaultValue, 1);
        mCurrentValue = mDefaultValue;//当前值等于默认值
        if (mCurrentValue == mMin) {//当前值为最小值时减号不能点击
            mIvMinus.setEnabled(false);
        } else {
            mIvMinus.setEnabled(true);
        }
    }
    //加载布局，定义控件以及设置监听
    private void initView(Context context) {
        View inflate = LayoutInflater.from(context).inflate(R.layout.view_number, this, false);
        this.addView(inflate);
        mIvAdd = inflate.findViewById(R.id.iv_add);
        mIvMinus = inflate.findViewById(R.id.iv_minus);
        mEditValue = inflate.findViewById(R.id.edit_value);
        mIvAdd.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
               //先加完再比较，只要一点加号，减号就可以点击了
                mCurrentValue += mStep;
                mIvMinus.setEnabled(true);
                //为了防止超过最大值，最后一步将最大值设置成当前值
                if (mCurrentValue >= mMax) {
                    mCurrentValue = mMax;
                    mIvAdd.setEnabled(false);
                }
                //更新UI
                updateText();
                //回调当前值
                if (mOnValueChangeListener != null) {
                    mOnValueChangeListener.onValueChange(mCurrentValue);
                }
            }
        });
        mIvMinus.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //减号与加号同理
                mCurrentValue -= mStep;
                mIvAdd.setEnabled(true);
                if (mCurrentValue <= mMin) {
                    mCurrentValue = mMin;
                    mIvMinus.setEnabled(false);
                }
                updateText();
                if (mOnValueChangeListener != null) {
                    mOnValueChangeListener.onValueChange(mCurrentValue);
                }
            }
        });
    }
​
    private void updateText() {
        mEditValue.setText(mCurrentValue + "");
    }
​
    public interface OnValueChangeListener {
        void onValueChange(int value);
    }
​
    public void setOnValueChangeListener(OnValueChangeListener onValueChangeListener) {
        mOnValueChangeListener = onValueChangeListener;
    }

Use of controls in Activity:

NumberView numberView = findViewById(R.id.view_number);
        numberView.setOnValueChangeListener(new NumberView.OnValueChangeListener() {
            @Override
            public void onValueChange(int value)
 {
                Toast.makeText(NumberViewActivity.this, "The current value is :"+value, Toast.LENGTH_SHORT).show();
            }
        });

So far, a custom control on the selection of number addition and subtraction has been completed. Is it very simple and the comments are clearly written. You can also add various custom attributes yourself, such as the precision of the value and the style of the button. Wait, finally, I wish you all good health and all the best, thank you for your support and reading!