Android自定義購物車控件

自定義電商中購車加減控件
第一步定義佈局文件
custom_cart_layout.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:orientation="vertical"
    android:background="@android:color/white">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    <Button
        android:id="@+id/custom_btn_cut_back"
        android:layout_width="74dp"
        android:layout_height="30dp"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:text="-"
        android:background="@drawable/btn_bg"/>

    <TextView
        android:id="@+id/custom_text_quantity"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="2dp"
        android:paddingBottom="2dp"
        android:paddingLeft="17dp"
        android:paddingRight="17dp"
        android:text="1"
        android:textSize="17sp"/>

    <Button
        android:id="@+id/custom_btn_insert"
        android:layout_width="74dp"
        android:layout_height="30dp"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:text="+"
        android:background="@drawable/btn_bg"/>
    </LinearLayout>

</LinearLayout>

用到的drawable文件btn_bg

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:color/white" />
</selector>

然後創建一個類名爲CustomCartView讓它繼承自FrameLayout並實現裏面的三個方法在init方法中我們使用LayoutInflater去加載custom_cart_layout佈局然後把inflate通過addView添加進去
在cutBackQuantity();方法中需要注意的是如果當前有多個商品時可以進行減少，那麼當商品數量只剩下一個的時候就不能再讓它減少，這時當它小於1的時候直接讓它等於1就行了。
insertQuantity();方法當我們直接去添加商品時直接讓商品數量++就可以了。
updateGoodsQuantity();方法是用來更新商品數量的更新完之後直接顯示在TextView中

package com.ranlegeran.customizeshoppingcart;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.TextView;
import android.widget.Toast;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class CustomCartView extends FrameLayout {
    @BindView(R.id.custom_btn_cut_back)
    Button mBtnCutBack;
    @BindView(R.id.custom_text_quantity)
    TextView mTextQuantity;
    @BindView(R.id.custom_btn_insert)
    Button mBtnInsert;

    private int mGoodsQuantity = 1; //商品默認數量

    //獲取商品數量
    public int getGoodsQuantity() {
        return mGoodsQuantity;
    }

    //設置商品數量
    public void setGoodsQuantity(int goodsQuantity) {
        mGoodsQuantity = goodsQuantity;
    }

    //定義商品數量監聽器
    private UpdateGoodsQuantityListener mUpdateGoodsQuantityListener;

    public void setUpdateGoodsQuantityListener(UpdateGoodsQuantityListener listener) {
        this.mUpdateGoodsQuantityListener = listener;
    }

    public CustomCartView(Context context) {
        this(context,null);
    }

    public CustomCartView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CustomCartView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(); //初始化
    }

    private void init() {
        View inflate = LayoutInflater.from(getContext()).inflate(R.layout.custom_cart_layout, this, false);
        ButterKnife.bind(this,inflate); //綁定ButterKnife
        addView(inflate);
    }

    @OnClick({R.id.custom_btn_cut_back,R.id.custom_btn_insert})
    public void toClick(View v) {
        switch (v.getId()) {
            case R.id.custom_btn_cut_back: //減少
                cutBackQuantity();
                break;
            case R.id.custom_btn_insert: //添加
                insertQuantity();
                break;
        }
        updateGoodsQuantity(); //更新商品數量
    }

    /**
     * 商品數量更新
     */
    private void updateGoodsQuantity() {
        mTextQuantity.setText(String.valueOf(mGoodsQuantity));
        if (mUpdateGoodsQuantityListener != null) {
            mUpdateGoodsQuantityListener.updateGoodsQuantity(mGoodsQuantity);
        }
    }

    private void cutBackQuantity() {
        mGoodsQuantity = (mGoodsQuantity - 1 < 1) ? 1 : mGoodsQuantity - 1;
        if (mGoodsQuantity <= 1) {
            Toast.makeText(getContext(), "已是最小數量", Toast.LENGTH_SHORT).show();
        }
        Log.e("TAG","--->>>>>>"+mGoodsQuantity);
    }

    private void insertQuantity() {
        ++mGoodsQuantity;
        Log.e("TAG","+++>>>>>>"+mGoodsQuantity);
    }

    /**
     * 定義點擊事件接口
     */
    public interface UpdateGoodsQuantityListener {
        void updateGoodsQuantity(int quantity);
    }
}

最後我們在MainActivity中使用
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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

   <com.ranlegeran.customizeshoppingcart.CustomCartView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">
   </com.ranlegeran.customizeshoppingcart.CustomCartView>

</LinearLayout>

效果圖


本想上傳成動態的但手機錄屏之後沒有成功。。。