初学者---Android 自定义控件之购物车数量加减器

港控/mmm° 2022-06-05 08:20 191阅读 0赞

*  转载自:[鲁鲁晓生http://blog.csdn.net/whitley\_gong/article/details/51956429][http_blog.csdn.net_whitley_gong_article_details_51956429]

先看来看效果图:

![20171122132813527][]

## 一、实现思路 ##

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

二.实践

layout文件夹下

1.number\_add\_sub\_view.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: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

<?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.addsubdemo.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

<?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

<?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

<?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

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <declare-styleable name="AmountView">
            
            <attr name="btnWidth" format="dimension" />
            
            <attr name="tvWidth" format="dimension" />
            
            <attr name="tvTextSize" format="dimension"/>
            <attr name="btnTextSize" format="dimension"/>
        </declare-styleable>
    
    </resources>

2.bg\_amount\_layout.xml

3.btn\_amount.xml按钮选中状态

4.divider.xml

5.colors.xml,就一个颜色

JAVA类；

1.AmountView.class自定义view类:

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

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下载][Github]  
  
  
  
 ---------------------------------------------------再来一个简洁版的 ---------------------------------------------------

![20171122140818807][]  
1.top\_view.xml自定义view布局

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
        android:orientation="horizontal"
        android:background="#ccc"
        android:layout_height="wrap_content">
    
    
            <ImageView
                android:id="@+id/btn_jian"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/a"
                />
            <TextView
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:id="@+id/num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text=""
                />
            <ImageView
                android:id="@+id/btn_jia"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/b"
                />
    </LinearLayout>

2.activity\_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:orientation="vertical"
        tools:context="xuejian.bwie.com.xuejian20171122.MainActivity">
     //自己的控件
        <xxx.com.xxx.MyView
            android:id="@+id/topPanel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
             />
    
    </LinearLayout>

3.MyView

public class MyView extends LinearLayout{
    
        private ImageView btn_jia;
        private ImageView btn_jian;
        private TextView numTv;
    
        public MyView(Context context) {
            super(context);
        }
    
        public MyView(Context context, AttributeSet attrs) {
            super(context, attrs);
            //加载布局
            LayoutInflater.from(context).inflate(R.layout.top_view, this);
            //获取控件
            btn_jia = (ImageView) findViewById(R.id.btn_jia);
            btn_jian = (ImageView) findViewById(R.id.btn_jian);
            numTv = (TextView) findViewById(R.id.num);
        }
    
        // 为加返回按钮添加自定义点击事件
        public void setOnclickJia(OnClickListener listener) {
            btn_jia.setOnClickListener(listener);
        }
        // 为减返回按钮添加自定义点击事件
        public void setOnclickJian(OnClickListener listener) {
            btn_jian.setOnClickListener(listener);
        }
    
        // 设置数字的方法
        public void setNum(String num) {
            numTv.setText(num);
        }
    }

4.MainActivity

public class MainActivity extends AppCompatActivity {
    
        private MyView topPanel;
        int num;
        //更新UI
        Handler myHandler = new Handler() {
            // 接收到消息后处理
            public void handleMessage(Message msg) {
                switch (msg.arg1) {
                    case 1:
    //                    //调用赋值方法
                        topPanel.setNum(msg.arg2+"");
                        Log.d("Handler", "减 : --------"+msg.arg2);
                        break;
                    case 2:
                        //调用赋值方法
                        topPanel.setNum(msg.arg2+"");
                        Log.d("Handler", "加 : --------"+msg.arg2);
                        break;
                }
                super.handleMessage(msg);
            }
        };
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            topPanel = (MyView) findViewById(R.id.topPanel);
    
            topPanel.setOnclickJian(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (num<2){
                        Toast.makeText(MainActivity.this,"不能再减了-----"+num,Toast.LENGTH_SHORT).show();
                    }else{
                        num--;
                        Message message = new Message();
                        message.arg1 = 1;
                        message.arg2 = num;
                        myHandler.sendMessage(message);
                        Log.d("main", "onCreate: --------"+num);
                        Toast.makeText(MainActivity.this,"减一个-----"+num,Toast.LENGTH_SHORT).show();
                    }
                }
            });
            topPanel.setOnclickJia(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (num>=5){
                        Toast.makeText(MainActivity.this,"不能再加了-----"+num,Toast.LENGTH_SHORT).show();
                    }else{
                        num++;
                        Message message = new Message();
                        message.arg1 = 2;
                        message.arg2 = num;
                        myHandler.sendMessage(message);
                        Log.d("main", "onCreate: --------"+num);
                        Toast.makeText(MainActivity.this,"加一个----"+num,Toast.LENGTH_SHORT).show();
                    }
                }
            });
        }
    }

简单啦................

[http_blog.csdn.net_whitley_gong_article_details_51956429]: http://blog.csdn.net/whitley_gong/article/details/51956429
[20171122132813527]: /images/20220605/6eaed083c9c84843a40aa79085bd2f8a.png
[Github]: https://github.com/hiwhitley/AmmountView.git
[20171122140818807]: /images/20220605/95ed295684c44bdbb65e514a09fab8d1.png