仿美团外卖自定义加减控件(一)

前言

项目中有时要用到数目加减的问题，直接布局的话显得有些麻烦，于是查查，决定自定义一个加减控件。
此篇文章的由来参考自以下链接
高仿美团外卖加减号自定义控件
我只是在他的基础上做了一些简单的代码优化，此篇文章的作用

• 学习简单的自定义控件
• 学习控件的测量和重新定义宽高

ok，下面开始正式讲解。

第一步，附上自定义控件 CicleAddAndSubView 的代码

package com.test.ui.main;

import android.content.Context;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.test.R;

/**
 * Instruction:自定义加减数量控件
 * <p>
 * Author:pei
 * Date: 2017/7/13
 * Description:
 */


public class CicleAddAndSubView extends LinearLayout implements View.OnClickListener{

    public static final int TYPE_SUBTRACT = 0;//减
    public static final int TYPE_ADD = 1;//加
    private static final int DEFAULT_NUM=0;//默认num值

    private View mLayoutView;
    private Context mContext;
    private ImageView mBtnAdd;//加按钮
    private ImageView mBtnSub;//减按钮
    private TextView mTvCount;//数量显示
    private int mNum;
    private OnNumChangeListener mOnNumChangeListener;

    /**
     * 设置监听回调
     *
     * @param onNumChangeListener
     */
    public void setOnNumChangeListener(OnNumChangeListener onNumChangeListener) {
        this.mOnNumChangeListener = onNumChangeListener;
    }

    public CicleAddAndSubView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mLayoutView=LayoutInflater.from(context).inflate(R.layout.add_sub_view, this);
        this.mContext=context;

        initView();
        initData();
        setListener();
    }

    private void initView(){
        mBtnAdd = (ImageView) mLayoutView.findViewById(R.id.btn_add);
        mBtnSub = (ImageView) mLayoutView.findViewById(R.id.btn_sub);
        mTvCount = (TextView) mLayoutView.findViewById(R.id.tv_count);

        setPadding(1, 1, 1, 1);
        //重新设置mBtnAdd，mBtnSub宽高，用来保证显示正方形
        setViewSize(mBtnAdd);
        setViewSize(mBtnSub);
    }

    private void initData(){
        setAddBtnImageResource(R.drawable.goods_add_btn);
        setSubBtnImageResource(R.drawable.goods_sub_btn);
        mNum=DEFAULT_NUM;
        setNum(mNum);//设置默认数量
    }

    private void setListener(){
        mBtnAdd.setOnClickListener(this);
        mBtnSub.setOnClickListener(this);
    }

    private void setViewSize(final View view){
        view.post(new Runnable(){
            public void run() {//这里获取宽高
                int width=view.getWidth();
                int height=view.getHeight();

                LinearLayout.LayoutParams params= (LayoutParams) view.getLayoutParams();
                if(width<height){
                    params.height=width;
                }else if(width>height){
                    params.width=height;
                }
                view.setLayoutParams(params);
            }
        });
    }

    @Override
    public void onClick(View v) {
        String countText = mTvCount.getText().toString();
        if (TextUtils.isEmpty(countText)) {
            mNum = DEFAULT_NUM;
            mTvCount.setText(String.valueOf(mNum));
            return;
        }
        switch(v.getId()){
           case R.id.btn_add://加号
                mNum++;
                setNum(mNum);
               if (mOnNumChangeListener != null) {
                   mOnNumChangeListener.onNumChange(mLayoutView, TYPE_ADD, getNum());
               }
                break;
           case R.id.btn_sub://减号
                mNum--;
                setNum(mNum);
               if (mOnNumChangeListener != null) {
                   mOnNumChangeListener.onNumChange(mLayoutView, TYPE_SUBTRACT, getNum());
               }
                break;
           default:
                break;
          }
    }


    /**
     * 设置中间的距离
     *
     * @param distance
     */
    public void setMiddleDistance(int distance) {
        mTvCount.setPadding(distance, 0, distance, 0);
    }

    /**
     * 设置数量
     *
     * @param num
     */
    public void setNum(int num) {
        this.mNum = num;
        if (mNum > 0) {
            mBtnSub.setVisibility(View.VISIBLE);
            mTvCount.setVisibility(View.VISIBLE);
        } else {
            mBtnSub.setVisibility(View.INVISIBLE);
            mTvCount.setVisibility(View.INVISIBLE);
        }
        mTvCount.setText(String.valueOf(mNum));
    }

    /**
     * 获取值
     *
     * @return
     */
    public int getNum() {
        String countText=mTvCount.getText().toString().trim();
        if (!TextUtils.isEmpty(countText)) {
            return Integer.parseInt(countText);
        } else {
            return DEFAULT_NUM;
        }
    }


    /**
     * 设置加号图片
     *
     * @param addBtnDrawable
     */
    public void setAddBtnImageResource(int addBtnDrawable) {
        mBtnAdd.setImageResource(addBtnDrawable);
    }

    /**
     * 设置减法图片
     *
     * @param subBtnDrawable
     */
    public void setSubBtnImageResource(int subBtnDrawable) {
        mBtnSub.setImageResource(subBtnDrawable);
    }

    /**
     * 设置加法减法的背景色
     *
     * @param addBtnColor
     * @param subBtnColor
     */
    public void setButtonBgColor(int addBtnColor, int subBtnColor) {
        mBtnAdd.setBackgroundColor(addBtnColor);
        mBtnSub.setBackgroundColor(subBtnColor);
    }

    public interface OnNumChangeListener {
        /**
         * 监听方法
         *
         * @param view
         * @param stype 点击按钮的类型
         * @param num   返回的数值
         */
        void onNumChange(View view, int stype, int num);
    }

}

对应的 add_sub_view.xml 布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/btn_sub"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/tv_count"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1.0"
        android:gravity="center"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="0"
        android:textColor="@color/black"
        android:textSize="16sp"/>

    <ImageView
        android:id="@+id/btn_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

然后涉及到的 R.drawable.goods_add_btn 和 R.drawable.goods_sub_btn 分别是两张 加，减 圆形图片，这里就不深讲了。

第二步，activity_main.xml 中引用控件：

<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:background="@color/white"
    android:gravity="center"
    android:orientation="vertical">

    <com.test.ui.main.CicleAddAndSubView
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_margin="10dp"
        android:padding="10dp"/>

</LinearLayout>

第三步，MainActivity中使用控件：

package com.test.ui.main;

import android.support.annotation.Nullable;
import android.view.View;

import com.test.R;
import com.test.base.BaseActivity;
import com.test.base.BasePresenter;
import com.test.util.LogUtil;

import butterknife.BindView;

/**
 * Created by Admin on 2017/5/19.
 */

public class MainActivity extends BaseActivity implements View.OnClickListener{

    @BindView(R.id.btn)
    CicleAddAndSubView mCicleAddAndSubView;

    @Override
    protected int getContentViewId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initData() {

    }

    @Override
    protected void setListener() {
        mCicleAddAndSubView.setOnNumChangeListener(new CicleAddAndSubView.OnNumChangeListener() {
            @Override
            public void onNumChange(View view, int stype, int num) {
                //点击加号，减号打印数量值
                LogUtil.e("====num====="+num);
            }
        });
    }

    @Nullable
    @Override
    protected BasePresenter getPresenter() {
        return null;
    }

    @Override
    protected void onDestroy(){
        super.onDestroy();
    }

    @Override
    public void onClick(View v) {

    }
}

最后，让我们来看看效果图

1.gif

好了，今天的内容就讲到这里吧，谢谢诶。