Android 自定义控件之购物车数量加减器

一、实现思路

整个控件其实是由两个Button和一个EditText组成，直接上代码进行分析。初始化控件，设置了自定义属性（这几个自定义属性的作用大概通过名字也能够知道了）和设置监听器

二.实践

layout文件夹下

1.number_add_sub_view.xml自定义控件的布局

[java]view plain copy
<?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:focusable="true"  
    android:divider="@drawable/divider"  
    android:background="@drawable/bg_amount_layout"  
    android:showDividers="middle"  
    android:orientation="horizontal"  
    >  
    <Button  
        android:id="@+id/btnDecrease"  
        android:layout_width="0dp"  
        android:layout_height="match_parent"  
        android:layout_weight="1"  
        android:gravity="center"  
        android:background="@drawable/btn_amount"  
        android:text="-"/>  
  
    <EditText  
        android:id="@+id/etAmount"  
        android:layout_width="0dp"  
        android:layout_height="match_parent"  
        android:minWidth="60dp"  
        android:layout_weight="2"  
        android:background="@null"  
        android:inputType="number"  
        android:gravity="center"  
        android:text="1"/>  
  
    <Button  
        android:id="@+id/btnIncrease"  
        android:layout_width="0dp"  
        android:layout_height="match_parent"  
        android:layout_weight="1"  
        android:gravity="center"  
        android:background="@drawable/btn_amount"  
        android:text="+"/>  
</LinearLayout>  

2.activity_main.xml

[java]view plain copy
<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:focusable="true"  
    android:focusableInTouchMode="true"  
    tools:context="xxx.addsubdemo.MainActivity">  
//写自己的控件路径!!!  
    <com.***.AmountView  
        android:id="@+id/amount_view"  
        android:layout_width="wrap_content"  
        android:layout_height="36dp"  
        android:layout_centerInParent="true"  
        android:layout_gravity="right"  
        android:layout_marginRight="15dp"  
        app:btnTextSize="14sp"  
        app:btnWidth="36dp"  
        app:tvWidth="50dp"/>  
</RelativeLayout>  

drawable文件夹下

1.bg_amount_layout.xml

[java]view plain copy
<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android">  
  
    <solid android:color="#FFFFFF" />  
    <stroke  
        android:width="1dp"  
        android:color="@color/divider" />  
    <padding  
        android:bottom="1dp"  
        android:left="1dp"  
        android:right="1dp"  
        android:top="1dp" />  
</shape>  

2.btn_amount.xml

[java]view plain copy
<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
  
    <item android:state_pressed="true" android:drawable="@color/divider" />  
    <item android:state_enabled="false" android:drawable="@color/divider" />  
    <item android:drawable="@android:color/white" />  
</selector>  

3.divider.xml

[java]view plain copy
<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle">  
    <size  
        android:width="0.5dp"/>  
    <solid android:color="@color/divider"/>  
</shape>  

values文件夹

1.自定义属性attrs.xml

[java]view plain copy
<?xml version="1.0" encoding="utf-8"?>  
<resources>  
    <declare-styleable name="AmountView">  
        <!-- 左右2边+-按钮的宽度 -->  
        <attr name="btnWidth" format="dimension" />  
        <!-- 中间TextView的宽度 -->  
        <attr name="tvWidth" format="dimension" />  
        <!--<attr name="tvColor" format="color"/>-->  
        <attr name="tvTextSize" format="dimension"/>  
        <attr name="btnTextSize" format="dimension"/>  
    </declare-styleable>  
  
</resources>  

2.colors.xml,就一个颜色

[java]view plain copy
<color name="divider">#ffd2d2d2</color>  

JAVA类；

1.AmountView.class自定义view类:

[java]view plain copy
import android.content.Context;  
import android.content.res.TypedArray;  
import android.text.Editable;  
import android.text.TextWatcher;  
import android.util.AttributeSet;  
import android.util.Log;  
import android.util.TypedValue;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.widget.Button;  
import android.widget.EditText;  
import android.widget.LinearLayout;  
  
/** 
 * Created by xue on 2017-11-22. 
 */  
  
public class AmountView  extends LinearLayout implements View.OnClickListener, TextWatcher {  
  
    private static final String TAG = "AmountView";  
    private int amount = 1; //购买数量  
    private int goods_storage = 1; //商品库存  
  
    private OnAmountChangeListener mListener;  
  
    private EditText etAmount;  
    private Button btnDecrease;  
    private Button btnIncrease;  
  
    public AmountView(Context context) {  
        super(context);  
    }  
  
    public AmountView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
  
        LayoutInflater.from(context).inflate(R.layout.number_add_sub_view, this);  
        etAmount = (EditText) findViewById(R.id.etAmount);  
        btnDecrease = (Button) findViewById(R.id.btnDecrease);  
        btnIncrease = (Button) findViewById(R.id.btnIncrease);  
  
        btnDecrease.setOnClickListener(this);  
        btnIncrease.setOnClickListener(this);  
        etAmount.addTextChangedListener(this);  
  
        TypedArray obtainStyledAttributes = getContext().obtainStyledAttributes(attrs, R.styleable.AmountView);  
        int btnWidth = obtainStyledAttributes.getDimensionPixelSize(R.styleable.AmountView_btnWidth, LayoutParams.WRAP_CONTENT);  
        int tvWidth = obtainStyledAttributes.getDimensionPixelSize(R.styleable.AmountView_tvWidth, 80);  
        int tvTextSize = obtainStyledAttributes.getDimensionPixelSize(R.styleable.AmountView_tvTextSize, 0);  
        int btnTextSize = obtainStyledAttributes.getDimensionPixelSize(R.styleable.AmountView_btnTextSize, 0);  
        obtainStyledAttributes.recycle();  
  
        LayoutParams btnParams = new LayoutParams(btnWidth, LayoutParams.MATCH_PARENT);  
        btnDecrease.setLayoutParams(btnParams);  
        btnIncrease.setLayoutParams(btnParams);  
        if (btnTextSize != 0) {  
            btnDecrease.setTextSize(TypedValue.COMPLEX_UNIT_PX, btnTextSize);  
            btnIncrease.setTextSize(TypedValue.COMPLEX_UNIT_PX, btnTextSize);  
        }  
  
        LayoutParams textParams = new LayoutParams(tvWidth, LayoutParams.MATCH_PARENT);  
        etAmount.setLayoutParams(textParams);  
        if (tvTextSize != 0) {  
            etAmount.setTextSize(tvTextSize);  
        }  
    }  
  
    public void setOnAmountChangeListener(OnAmountChangeListener onAmountChangeListener) {  
        this.mListener = onAmountChangeListener;  
    }  
  
    public void setGoods_storage(int goods_storage) {  
        this.goods_storage = goods_storage;  
    }  
  
    @Override  
    public void onClick(View v) {  
        int i = v.getId();  
        if (i == R.id.btnDecrease) {  
            if (amount > 1) {  
                amount--;  
                Log.d(TAG, "onClick:===== "+amount);  
                etAmount.setText(amount + "");  
            }  
        } else if (i == R.id.btnIncrease) {  
            if (amount < goods_storage) {  
                amount++;  
                etAmount.setText(amount + "");  
            }  
        }  
        //清除焦点  
        etAmount.clearFocus();  
  
        if (mListener != null) {  
            mListener.onAmountChange(this, amount);  
        }  
    }  
  
    @Override  
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {  
  
    }  
  
    @Override  
    public void onTextChanged(CharSequence s, int start, int before, int count) {  
  
    }  
  
    @Override  
    public void afterTextChanged(Editable s) {  
        if (s.toString().isEmpty())  
            return;  
        amount = Integer.valueOf(s.toString());  
        if (amount > goods_storage) {  
            etAmount.setText(goods_storage + "");  
            return;  
        }  
  
        if (mListener != null) {  
            mListener.onAmountChange(this, amount);  
        }  
    }  
  
  
    public interface OnAmountChangeListener {  
        void onAmountChange(View view, int amount);  
    }  
  
}  

2.MainActivity

[java]view plain copy
import android.support.v7.app.AppCompatActivity;  
import android.os.Bundle;  
import android.view.View;  
import android.widget.Toast;  
  
public class MainActivity extends AppCompatActivity {  
    private AmountView mAmountView;  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
  
        mAmountView = (AmountView) findViewById(R.id.amount_view);  
        mAmountView.setGoods_storage(50);  
        mAmountView.setOnAmountChangeListener(new AmountView.OnAmountChangeListener() {  
            @Override  
            public void onAmountChange(View view, int amount) {  
                Toast.makeText(getApplicationContext(), "Amount=>  " + amount, Toast.LENGTH_SHORT).show();  
            }  
        });  
    }  
}  

作者的Github下载