商城项目实战 | 12.1 实现自定义购物车数字加减控件

程序员文章站 2022-06-08 23:46:20

...

本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
每个程序猿必备的110本经典编程书，免费领取地址：http://mp.weixin.qq.com/s/cx433vAj_CDLzmhOoUS6zA

在商城的购物车界面中，当为编辑模式的时候，可以对购物车中商品的购买数量进行加减，那么这个数字的加减控件是如何实现的呢？本篇文章就是要讲解如何实现自定义的数字加减控件，先来看下效果图。

效果图

根据效果图，我们可以看到这个数字加减控件是由加号、减号以及中间的数字三部分组成，另外我们还要分析下实现的这个控件需要实现具体怎样的功能。

所要实现的功能

根据效果以及购物车的功能需求，分析得出自定义的数字加减控件需要如下的一些功能。

输入框只能是数字，且不能通过键盘输入。
通过加减按钮操作数字。
监听加减按钮，同时对于点击事件的监听是可以扩展的。
数字有最小值和最大值的限制。
自定义属性，包括设置背景、数字的字体大小等。

分析出来了需要实现怎样的功能，那么下面就按照这种思路开始自定义控件。

实现自定义加减数字控件

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. 效果图

运行代码，获取效果图。

效果图

这是自定义好的加减数字控件的简单展示了，后期将会使用到商城的购物车模块中，用于对商品的编辑。

上一篇： JSP自定义标签

下一篇： JqueryEasyUi文本框赋值

商城项目实战 | 12.1 实现自定义购物车数字加减控件

所要实现的功能

实现自定义加减数字控件

1. 定义控件布局

2. 定义控件属性

3. 添加布局和声明控件

4. 获取属性值设置自定义控件

5. 添加加减事件监听

使用自定义的控件

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

2. 效果图

vue项目打包之后背景样式丢失的解决方案

微信推送功能实现方式图文详解

thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解

iOS实现轮盘动态效果

iOS13适配深色模式(Dark Mode)的实现

Element输入框带历史查询记录的实现示例

PHP实现文件分片上传的实例代码

JavaScript之实现一个简单的Vue示例

C#实现简单的汽车租赁系统

Python 3.3实现计算两个日期间隔秒数/天数的方法示例