本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
每个程序猿必备的110本经典编程书，免费领取地址：http://mp.weixin.qq.com/s/cx433vAj_CDLzmhOoUS6zA
140套Android优秀开源项目源码，领取地址：http://mp.weixin.qq.com/s/afPGHqfdiApALZqHsXbw-A
或欢迎勾搭运营小姐姐（微信 id：BT474849）免费领取哦~
在商城的购物车界面中，当为编辑模式的时候，可以对购物车中商品的购买数量进行加减，那么这个数字的加减控件是如何实现的呢？本篇文章就是要讲解如何实现自定义的数字加减控件，先来看下效果图。
[图片上传失败...(image-5a416b-1565145943547)]
根据效果图，我们可以看到这个数字加减控件是由加号、减号以及中间的数字三部分组成，另外我们还要分析下实现的这个控件需要实现具体怎样的功能。
所要实现的功能
根据效果以及购物车的功能需求，分析得出自定义的数字加减控件需要如下的一些功能。
- 输入框只能是数字，且不能通过键盘输入。
- 通过加减按钮操作数字。
- 监听加减按钮，同时对于点击事件的监听是可以扩展的。
- 数字有最小值和最大值的限制。
- 自定义属性，包括设置背景、数字的字体大小等。
分析出来了需要实现怎样的功能，那么下面就按照这种思路开始自定义控件。
实现自定义加减数字控件
1. 定义控件布局
加减就使用按钮控件 Button，中间的数字因为是不可编辑的，所以就使用文本控件 TextView ，这里有两个 Buton 以及一个 TextView，控件是水平方向摆放，下面是定义的 xml 布局。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="@dimen/layout_height"
android:background="@drawable/add_sub_number_selector"
android:padding="@dimen/border_width"
>
<Button
android:id="@+id/view_btn_add"
android:layout_width="@dimen/btn_add_width"
android:layout_height="match_parent"
android:text="+"
android:gravity="center"
android:layout_gravity="center"
/>
<View
android:layout_width="@dimen/border_width"
android:layout_height="match_parent"
android:background="@color/common_border_color"
android:gravity="center"
android:layout_gravity="center"></View>
<TextView
android:id="@+id/view_tv_num"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#000"
android:minWidth="@dimen/tv_number_width"
/>
<View
android:layout_width="@dimen/border_width"
android:layout_height="match_parent"
android:background="@color/common_border_color"
android:layout_gravity="center"
android:gravity="center"></View>
<Button
android:id="@+id/view_btn_sub"
android:layout_width="@dimen/btn_add_width"
android:layout_height="match_parent"
android:text="-"
android:gravity="center"
android:layout_gravity="center"
/>
</LinearLayout>
用于显示加减的 Buton 以及显示数字的 TextView 都写好了，同时还添加两条间隔线 View。
2. 定义控件属性
新建一个 attrs.xml 文件，里面是用于放置自定义控件的一些自定义属性，这里自定义的加减数字控件也自定义了一些属性，写在该文件中。
<resources>
<declare-styleable name="AddSubNumberLayout">
<attr name="value" format="integer|reference"/>
<attr name="minValue" format="integer|reference"/>
<attr name="maxValue" format="integer|reference"/>
<attr name="btnAddBackground" format="reference"/>
<attr name="btnSubBackground" format="reference"/>
<attr name="textViewBackground" format="reference"/>
<attr name="btnAddTextColor" format="color|reference"/>
<attr name="btnSubTextColor" format="color|reference"/>
<attr name="textViewTextColor" format="color|reference"/>
<attr name="btnAddTextSize" format="dimension|reference"/>
<attr name="btnSubTextSize" format="dimension|reference"/>
<attr name="textViewTextSize" format="dimension|reference"/>
</declare-styleable>
</resources>
自定义控件的属性包括了设置初始数值、最小数值、最大值、给按钮和文本控件设置背景、文字颜色以及文字大小。
3. 添加布局和声明控件
之前我们已经写好了布局文件了，然后让自定义的控件继承于 LinearLayout，同时添加布局文件，并且声明控件。
View view = mInflater.inflate(R.layout.view_add_sub_number_layout,this,true);
btnAdd = (Button) view.findViewById(R.id.view_btn_add);
btnSub = (Button) view.findViewById(R.id.view_btn_sub);
tvNum = (TextView) view.findViewById(R.id.view_tv_num);
布局文件的添加和控件声明都要放在自定义控件初始化的时候，然后再对相关控件设置相关属性和事件监听。
4. 获取属性值设置自定义控件
上面已经定义了一些自定义的属性，我们可以在外部对自定义的控件进行设置，而在自定义的控件中，我们也要获取到对应的属性值。
if (attrs != null){
TintTypedArray array = TintTypedArray.obtainStyledAttributes(context,attrs, R.styleable.AddSubNumberLayout, defStyleAttr,0);
int value = array.getInt(R.styleable.AddSubNumberLayout_value,1);
setValue(value);
int minVal = array.getInt(R.styleable.AddSubNumberLayout_minValue,1);
setMinValue(minVal);
int maxVal = array.getInt(R.styleable.AddSubNumberLayout_maxValue,1);
setMaxValue(maxVal);
Drawable drawableBtnAdd =array.getDrawable(R.styleable.AddSubNumberLayout_btnAddBackground);
Drawable drawableBtnSub =array.getDrawable(R.styleable.AddSubNumberLayout_btnSubBackground);
Drawable drawableTextView =array.getDrawable(R.styleable.AddSubNumberLayout_textViewBackground);
setButtonAddBackground(drawableBtnAdd);
setButtonSubBackground(drawableBtnSub);
setTexViewBackground(drawableTextView);
setBtnAddTextColor(array.getColor(R.styleable.AddSubNumberLayout_btnAddTextColor, Color.BLACK));
setBtnSubTextColor(array.getColor(R.styleable.AddSubNumberLayout_btnSubTextColor,Color.BLACK));
setTextViewTextColor(array.getColor(R.styleable.AddSubNumberLayout_textViewTextColor,Color.BLACK));
setBtnAddTextSize(array.getDimension(R.styleable.AddSubNumberLayout_btnAddTextSize,R.dimen.btn_add_text_size));
setBtnSubTextSize(array.getDimension(R.styleable.AddSubNumberLayout_btnSubTextSize,R.dimen.btn_add_text_size));
setTextViewTextSize(array.getDimension(R.styleable.AddSubNumberLayout_textViewTextSize,R.dimen.btn_add_text_size));
array.recycle();
}
根据接收的属性值，可以对自定义控件中的数字、加减控件样式等进行一定的设置来达到我们所希望的效果。
5. 添加加减事件监听
事件的监听，主要是分为加和减的事件监听，加的时候，我们当然是希望数字要递增，但是不要超过了最大数值，减的时候则是数字递减，但是不要低于最小数值，这里先写好数字加和减的方法。
数字递增变化的方法如下。
private void numAdd(){
if(value<maxValue)
value=value+1;
else
Toast.makeText(getContext(),"不能再加了",Toast.LENGTH_SHORT).show();
tvNum.setText(value+"");
}
这里的 maxValue 就是最大数值，而 value 就是当前的数值，数值加后要修改 tvNum 的数字显示。
数字减的方法如下。
private void numSub(){
if(value>minValue)
value=value-1;
else
Toast.makeText(getContext(),"不能再减了",Toast.LENGTH_SHORT).show();
tvNum.setText(value+"");
}
minValue 是最小值，而 value 就是当前数值，数值减少了，最后显示在 tvNum 上。
数字的加减方法写好了，这两个方法都要在加减 Button 的点击事件中调用，但是我们在处理加减事件的时候，可能不仅仅是要对数字进行加减，还有其他的操作，这里就希望监听事件是可以扩展的，使用 interface 来扩展。
定义的监听事件接口如下。
public interface OnButtonClickListener{
void onButtonAddClick(View view,int value);
void onButtonSubClick(View view,int value);
}
并且这里的接口要在按钮的点击事件中调用。
btnAdd.setOnClickListener(this);
btnSub.setOnClickListener(this);
@Override
public void onClick(View v) {
if (v.getId() == R.id.view_btn_add) {
numAdd();
if (mOnButtonClickListener != null) {
mOnButtonClickListener.onButtonAddClick(v,value);
}
} else if (v.getId() == R.id.view_btn_sub) {
numSub();
if (mOnButtonClickListener != null) {
mOnButtonClickListener.onButtonSubClick(v,value);
}
}
}
最后一步就是要为事件的调用添加提供一个方法。
public void setOnButtonClickListener(OnButtonClickListener onButtonClickListener) {
this.mOnButtonClickListener = onButtonClickListener;
}
这样的话事件的处理就完成了，我们如果要为自定义的控件添加监听事件的话，就直接调用 setOnButtonClickListener() 方法就好了。
使用自定义的控件
1. 添加自定义控件到布局中
新建 Activity/Fragment ，将已经定义好的自定义数字控件添加到布局中，并且设置自定义控件的一些属性。
<com.liuting.textexample.widget.AddSubNumberLayout
android:id="@+id/add_sub_number_layout_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:value="1"
app:maxValue="1"
app:minValue="1"
app:btnAddBackground="@android:color/white"
app:btnSubBackground="@android:color/white"
app:textViewBackground="@android:color/white"
app:textViewTextSize="16sp"
app:btnSubTextSize="22sp"
app:btnAddTextSize="22sp"
app:btnAddTextColor="@color/common_border_color"
app:btnSubTextColor="@color/common_border_color">
写好了布局后，将布局添加到 Activity/Fragment 中，运行直接就可以看到效果了。
2. 效果图
运行代码，获取效果图。
[图片上传失败...(image-f3ae94-1565145943547)]
这是自定义好的加减数字控件的简单展示了，后期将会使用到商城的购物车模块中，用于对商品的编辑。
