本文為菜鳥窩作者劉婷的連載。”商城項目實戰”系列來聊聊仿”京東淘寶的購物商城”如何實現。
每個程序猿必備的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)]
這是自定義好的加減數字控件的簡單展示了，后期將會使用到商城的購物車模塊中，用于對商品的編輯。
