商城項(xiàng)目實(shí)戰(zhàn) | 12.1 實(shí)現(xiàn)自定義購物車數(shù)字加減控件

本文為菜鳥窩作者劉婷的連載?！鄙坛琼?xiàng)目實(shí)戰(zhàn)”系列來聊聊仿”京東淘寶的購物商城”如何實(shí)現(xiàn)。
每個程序猿必備的110本經(jīng)典編程書，免費(fèi)領(lǐng)取地址：http://mp.weixin.qq.com/s/cx433vAj_CDLzmhOoUS6zA
140套Android優(yōu)秀開源項(xiàng)目源碼，領(lǐng)取地址：http://mp.weixin.qq.com/s/afPGHqfdiApALZqHsXbw-A
或歡迎勾搭運(yùn)營小姐姐（微信 id：BT474849）免費(fèi)領(lǐng)取哦~

在商城的購物車界面中，當(dāng)為編輯模式的時候，可以對購物車中商品的購買數(shù)量進(jìn)行加減，那么這個數(shù)字的加減控件是如何實(shí)現(xiàn)的呢？本篇文章就是要講解如何實(shí)現(xiàn)自定義的數(shù)字加減控件，先來看下效果圖。

[圖片上傳失敗...(image-5a416b-1565145943547)]

根據(jù)效果圖，我們可以看到這個數(shù)字加減控件是由加號、減號以及中間的數(shù)字三部分組成，另外我們還要分析下實(shí)現(xiàn)的這個控件需要實(shí)現(xiàn)具體怎樣的功能。

所要實(shí)現(xiàn)的功能

根據(jù)效果以及購物車的功能需求，分析得出自定義的數(shù)字加減控件需要如下的一些功能。

  1. 輸入框只能是數(shù)字，且不能通過鍵盤輸入。
  2. 通過加減按鈕操作數(shù)字。
  3. 監(jiān)聽加減按鈕，同時對于點(diǎn)擊事件的監(jiān)聽是可以擴(kuò)展的。
  4. 數(shù)字有最小值和最大值的限制。
  5. 自定義屬性，包括設(shè)置背景、數(shù)字的字體大小等。

分析出來了需要實(shí)現(xiàn)怎樣的功能，那么下面就按照這種思路開始自定義控件。

實(shí)現(xiàn)自定義加減數(shù)字控件

1. 定義控件布局

加減就使用按鈕控件 Button，中間的數(shù)字因?yàn)槭遣豢删庉嫷?，所以就使用文本控?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 以及顯示數(shù)字的 TextView 都寫好了，同時還添加兩條間隔線 View。

2. 定義控件屬性

新建一個 attrs.xml 文件，里面是用于放置自定義控件的一些自定義屬性，這里自定義的加減數(shù)字控件也自定義了一些屬性，寫在該文件中。

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

自定義控件的屬性包括了設(shè)置初始數(shù)值、最小數(shù)值、最大值、給按鈕和文本控件設(shè)置背景、文字顏色以及文字大小。

3. 添加布局和聲明控件

之前我們已經(jīng)寫好了布局文件了，然后讓自定義的控件繼承于 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);

布局文件的添加和控件聲明都要放在自定義控件初始化的時候，然后再對相關(guān)控件設(shè)置相關(guān)屬性和事件監(jiān)聽。

4. 獲取屬性值設(shè)置自定義控件

上面已經(jīng)定義了一些自定義的屬性，我們可以在外部對自定義的控件進(jìn)行設(shè)置，而在自定義的控件中，我們也要獲取到對應(yīng)的屬性值。

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

根據(jù)接收的屬性值，可以對自定義控件中的數(shù)字、加減控件樣式等進(jìn)行一定的設(shè)置來達(dá)到我們所希望的效果。

5. 添加加減事件監(jiān)聽

事件的監(jiān)聽，主要是分為加和減的事件監(jiān)聽，加的時候，我們當(dāng)然是希望數(shù)字要遞增，但是不要超過了最大數(shù)值，減的時候則是數(shù)字遞減，但是不要低于最小數(shù)值，這里先寫好數(shù)字加和減的方法。
數(shù)字遞增變化的方法如下。

private void numAdd(){

    if(value<maxValue)
        value=value+1;
    else
        Toast.makeText(getContext(),"不能再加了",Toast.LENGTH_SHORT).show();

    tvNum.setText(value+"");
}

這里的 maxValue 就是最大數(shù)值，而 value 就是當(dāng)前的數(shù)值，數(shù)值加后要修改 tvNum 的數(shù)字顯示。

數(shù)字減的方法如下。

private void numSub(){

    if(value>minValue)
        value=value-1;
    else
        Toast.makeText(getContext(),"不能再減了",Toast.LENGTH_SHORT).show();

    tvNum.setText(value+"");
}

minValue 是最小值，而 value 就是當(dāng)前數(shù)值，數(shù)值減少了，最后顯示在 tvNum 上。

數(shù)字的加減方法寫好了，這兩個方法都要在加減 Button 的點(diǎn)擊事件中調(diào)用，但是我們在處理加減事件的時候，可能不僅僅是要對數(shù)字進(jìn)行加減，還有其他的操作，這里就希望監(jiān)聽事件是可以擴(kuò)展的，使用 interface 來擴(kuò)展。
定義的監(jiān)聽事件接口如下。

public interface  OnButtonClickListener{

    void onButtonAddClick(View view,int value);
    void onButtonSubClick(View view,int value);
}

并且這里的接口要在按鈕的點(diǎn)擊事件中調(diào)用。

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

最后一步就是要為事件的調(diào)用添加提供一個方法。

public void setOnButtonClickListener(OnButtonClickListener onButtonClickListener) {
    this.mOnButtonClickListener = onButtonClickListener;
}

這樣的話事件的處理就完成了，我們?nèi)绻獮樽远x的控件添加監(jiān)聽事件的話，就直接調(diào)用 setOnButtonClickListener() 方法就好了。

使用自定義的控件

1. 添加自定義控件到布局中

新建 Activity/Fragment ，將已經(jīng)定義好的自定義數(shù)字控件添加到布局中，并且設(shè)置自定義控件的一些屬性。

<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 中，運(yùn)行直接就可以看到效果了。

2. 效果圖

運(yùn)行代碼，獲取效果圖。

[圖片上傳失敗...(image-f3ae94-1565145943547)]

這是自定義好的加減數(shù)字控件的簡單展示了，后期將會使用到商城的購物車模塊中，用于對商品的編輯。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容