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

先看来看效果图:

一、实现思路

整个控件其实是由两个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">
        <!-- 左右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.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>
3.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>
4.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>
5.colors.xml,就一个颜色
<color name="divider">#ffd2d2d2</color>
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下载



 ---------------------------------------------------再来一个简洁版的 ---------------------------------------------------


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();
                }
            }
        });
    }
}
简单啦................





  • 0
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值