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

一、实现思路

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

二.实践

layout文件夹下

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

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="wrap_content"  
4.     android:layout_height="wrap_content"  
5.     android:focusable="true"  
6.     android:divider="@drawable/divider"  
7.     android:background="@drawable/bg_amount_layout"  
8.     android:showDividers="middle"  
9.     android:orientation="horizontal"  
10.     >  
11.     <Button  
12.         android:id="@+id/btnDecrease"  
13.         android:layout_width="0dp"  
14.         android:layout_height="match_parent"  
15.         android:layout_weight="1"  
16.         android:gravity="center"  
17.         android:background="@drawable/btn_amount"  
18.         android:text="-"/>  
19.   
20.     <EditText  
21.         android:id="@+id/etAmount"  
22.         android:layout_width="0dp"  
23.         android:layout_height="match_parent"  
24.         android:minWidth="60dp"  
25.         android:layout_weight="2"  
26.         android:background="@null"  
27.         android:inputType="number"  
28.         android:gravity="center"  
29.         android:text="1"/>  
30.   
31.     <Button  
32.         android:id="@+id/btnIncrease"  
33.         android:layout_width="0dp"  
34.         android:layout_height="match_parent"  
35.         android:layout_weight="1"  
36.         android:gravity="center"  
37.         android:background="@drawable/btn_amount"  
38.         android:text="+"/>  
39. </LinearLayout>  

2.activity_main.xml

[java] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
4.     xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     android:focusable="true"  
8.     android:focusableInTouchMode="true"  
9.     tools:context="xxx.addsubdemo.MainActivity">  
10. //写自己的控件路径!!!  
11.     <com.***.AmountView  
12.         android:id="@+id/amount_view"  
13.         android:layout_width="wrap_content"  
14.         android:layout_height="36dp"  
15.         android:layout_centerInParent="true"  
16.         android:layout_gravity="right"  
17.         android:layout_marginRight="15dp"  
18.         app:btnTextSize="14sp"  
19.         app:btnWidth="36dp"  
20.         app:tvWidth="50dp"/>  
21. </RelativeLayout>  

drawable文件夹下

1.bg_amount_layout.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <solid android:color="#FFFFFF" />  
5.     <stroke  
6.         android:width="1dp"  
7.         android:color="@color/divider" />  
8.     <padding  
9.         android:bottom="1dp"  
10.         android:left="1dp"  
11.         android:right="1dp"  
12.         android:top="1dp" />  
13. </shape>  

2.btn_amount.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item android:state_pressed="true" android:drawable="@color/divider" />  
5.     <item android:state_enabled="false" android:drawable="@color/divider" />  
6.     <item android:drawable="@android:color/white" />  
7. </selector>  

3.divider.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shape="rectangle">  
4.     <size  
5.         android:width="0.5dp"/>  
6.     <solid android:color="@color/divider"/>  
7. </shape>  

values文件夹1.自定义属性attrs.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <declare-styleable name="AmountView">  
4.         <!-- 左右2边+-按钮的宽度 -->  
5.         <attr name="btnWidth" format="dimension" />  
6.         <!-- 中间TextView的宽度 -->  
7.         <attr name="tvWidth" format="dimension" />  
8.         <!--<attr name="tvColor" format="color"/>-->  
9.         <attr name="tvTextSize" format="dimension"/>  
10.         <attr name="btnTextSize" format="dimension"/>  
11.     </declare-styleable>  
12.   
13. </resources>  

2.colors.xml,就一个颜色

[java] view plain copy

1. <color name="divider">#ffd2d2d2</color>  

JAVA类；

1.AmountView.class自定义view类:

public class AmountView  extends LinearLayout {

    private static final String TAG = "AmountView";

    private TextView etAmount;
    private Button btnDecrease;
    private Button btnIncrease;
    Context context;
    public AmountView(Context context) {
        super(context);
    }

    public AmountView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
        LayoutInflater.from(context).inflate(R.layout.jiajian, this);
        etAmount = (TextView) findViewById(R.id.etAmount);
        btnDecrease = (Button) findViewById(R.id.btnDecrease);
        btnIncrease = (Button) findViewById(R.id.btnIncrease);

        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);
        }
    }


}

2.MainActivity

[java] view plain copy

1. import android.support.v7.app.AppCompatActivity;  
2. import android.os.Bundle;  
3. import android.view.View;  
4. import android.widget.Toast;  
5.   
6. public class MainActivity extends AppCompatActivity {  
7.     private AmountView mAmountView;  
8.         mAmountView = (AmountView) findViewById(R.id.amount_view); 
   
9.        

         h2.editText=view.findViewById(R.id.etAmount);
         h2.jian=view.findViewById(R.id.btnDecrease);
         h2.jia=view.findViewById(R.id.btnIncrease);

         h2.editText.setText(data.get(i).getList().get(i1).getNum()+"");
   
   //减的点击事件
   h2.jian.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
           int num = data.get(i).getList().get(i1).getNum();
           if(num==0){
               return;
           }
           data.get(i).getList().get(i1).setNum(--num);
           //刷新接口
           p.ShuaCartIPrensenter(0,data.get(i).getList(), (ShowGoodsActivity) context);;
       }
   });
   
   //加的点击事件
   h2.jia.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
           int num = data.get(i).getList().get(i1).getNum();
           data.get(i).getList().get(i1).setNum(++num);
           //刷新接口
           p.ShuaCartIPrensenter(0,data.get(i).getList(), (ShowGoodsActivity) context);
       }
   });

10. }