Android自定义数值增减控件

前言

最近做一个小App的时候用到了数值增减功能，主要用途就是在将商品添加到购物车时指定购买商品数量；遇到这个需求后首先想到的就是去网上找个现成的来用，但寻找很久也没找到合适的；可能太简单没人觉得这是什么大不了的，或者根本不需要自定义一个控件，这样只能自己动手了。

我本身是个Android新手，很多地方都还是理解不清楚；这次自定义的控件也不知道怎么样，但勉强能满足自己的需求。

效果截图

上图中的“数量“即是本控件的样子，可以点击左右的加减号来控制TextView中数值的增减。

上图是在点击TextView时弹出的对话框，在对话框中的TextView中输入想要的数字后，确定即可退出对话框，然后将数字填写入控件的TextView。

在控件数值改变后可以触发监听器，用于回调。

主要代码

attrs.xml

首先在attrs.xml文件中定义所要用到的属性，如下所示：

<declare-styleable name="IncreaseReduceTextView">    <attr name="textBackground" format="reference"/>    <attr name="textSize" format="dimension"/>    <attr name="verticalPadding" format="dimension"/>    <attr name="horizontalPadding" format="dimension"/>    <attr name="viewSpace" format="dimension"/></declare-styleable>

简单解释一下：

• textBackground
  控件TextView文本域背景
• textSize
  文本域字体大小, 默认为14sp
• verticalPadding
  文本域垂直方向上的内边距, 默认为2dp
• horizontalPadding
  文本域水平方向上的内边距, 默认为2dp
• viewSpace
  TextView左右Margin

IncreaseReduceTextView

接下来是主控件代码，代码较多，但逻辑很简单，如下所示：

package com.witmoon.xmb.ui.widget;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Paint;import android.support.v4.app.FragmentActivity;import android.util.AttributeSet;import android.util.TypedValue;import android.view.Gravity;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView;import com.witmoon.xmb.R;import com.witmoon.xmb.activity.common.fragment.PurchaseQuantityDialogFragment;import com.witmoon.xmb.util.DensityUtils;/** * 自定义数值增减控件, 用于购买数量 * Created by zhyh on 2015/5/26. */public class IncreaseReduceTextView extends ViewGroup implements View.OnClickListener {    private Context mContext;    private int number = 1;    private int mTargetWidth;    private ImageView mMinusImageButton;    private TextView mNumberTextView;    private ImageView mAddImageButton;    private int mBackground;                // TextView背景资源    private int mTextSize = 14;             // 字体大小, 默认为14sp    private int mVerticalPadding = 2;       // TextView上下内边距, 默认为2dp    private int mHorizontalPadding = 2;     // TextView左右内边距, 默认为2dp    private int mViewSpace = 0;             // TextView左右Margin    public IncreaseReduceTextView(Context context) {        this(context, null);    }    public IncreaseReduceTextView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public IncreaseReduceTextView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        if (getChildCount() > 0) {            throw new RuntimeException("IncreaseReduceTextView不允许有子元素.");        }        this.mContext = context;        // 读取自定义属性        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.IncreaseReduceTextView);        mBackground = ta.getResourceId(R.styleable.IncreaseReduceTextView_textBackground, 0);        mTextSize = ta.getDimensionPixelSize(R.styleable.IncreaseReduceTextView_textSize,                DensityUtils.sp2px(context, mTextSize));        mVerticalPadding = ta.getDimensionPixelSize(R.styleable                .IncreaseReduceTextView_verticalPadding, DensityUtils.dp2px(context,                mVerticalPadding));        mHorizontalPadding = ta.getDimensionPixelSize(R.styleable                .IncreaseReduceTextView_horizontalPadding, DensityUtils.dp2px(context,                mHorizontalPadding));        mViewSpace = ta.getDimensionPixelSize(R.styleable.IncreaseReduceTextView_viewSpace,                mViewSpace);        ta.recycle();        Paint paint = new Paint();        paint.setTextSize(mTextSize);        mTargetWidth = (int) paint.measureText("00");        initializeView();    }    // 初始化视图    private void initializeView() {        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,                LayoutParams.MATCH_PARENT);        mMinusImageButton = new ImageView(mContext);        mMinusImageButton.setLayoutParams(params);        mMinusImageButton.setImageResource(R.mipmap.icon_minus_rounded_square);        mMinusImageButton.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                if (number > 1) {                    number--;                    numberChanged();                }            }        });        addView(mMinusImageButton);        mNumberTextView = new TextView(mContext);        LayoutParams editLayoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams                .WRAP_CONTENT);        mNumberTextView.setLayoutParams(editLayoutParams);        mNumberTextView.setBackgroundResource(mBackground);        mNumberTextView.setPadding(mHorizontalPadding, mVerticalPadding, mHorizontalPadding,                mVerticalPadding);        mNumberTextView.setGravity(Gravity.CENTER);        mNumberTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextSize);        mNumberTextView.setText(String.valueOf(number));        mNumberTextView.setOnClickListener(this);        addView(mNumberTextView);        mAddImageButton = new ImageView(mContext);        mAddImageButton.setLayoutParams(params);        mAddImageButton.setImageResource(R.mipmap.icon_add_rounded_square);        mAddImageButton.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                if (number < 999) {                    number++;                    numberChanged();                }            }        });        addView(mAddImageButton);        numberChanged();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        measureChildren(widthMeasureSpec, heightMeasureSpec);        int widthSum;   // 总宽度, 最终结果为自定义组件的宽度        // 处理中间的TextView        View middleView = getChildAt(1);        int childHeight = middleView.getMeasuredHeight();        int childWidth = middleView.getMeasuredWidth();        widthSum = childWidth + mTargetWidth;        middleView.measure(MeasureSpec.makeMeasureSpec(childWidth + mTargetWidth, MeasureSpec                .EXACTLY), MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY));        // 处理左右ImageView，重新计算其尺寸        int count = getChildCount();        for (int i = 0; i < count; i++) {            if (i == 1) continue;            View child = getChildAt(i);            int ms = MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY);            child.measure(ms, ms);            widthSum = widthSum + childHeight;        }        // 设置组件自身尺寸， 总宽度再加上两个间距(间距默认为0)        setMeasuredDimension(widthSum + mViewSpace * 2, childHeight);    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        int childCount = getChildCount();        int left = 0;        for (int i = 0; i < childCount; i++) {            View childView = getChildAt(i);            int childWidth = childView.getMeasuredWidth();            int childHeight = childView.getMeasuredHeight();            childView.layout(left, 0, left + childWidth, childHeight);            left += childWidth;            if (i != childCount - 1) {                left += mViewSpace;            }        }    }    public void setNumber(int number) {        this.number = number;        numberChanged(false);    }    private void numberChanged() {        numberChanged(true);    }    private void numberChanged(boolean isTriggerChanged) {        mNumberTextView.setText(String.valueOf(number));        if (mOnNumberChangeListener != null && isTriggerChanged) {            mOnNumberChangeListener.onNumberChange(number);        }        if (number <= 1) {            mMinusImageButton.setImageResource(R.mipmap.icon_minus_rounded_square_grey);        } else {            mMinusImageButton.setImageResource(R.mipmap.icon_minus_rounded_square);        }    }    public int getNumber() {        return this.number;    }    @Override    public void onClick(View v) {        PurchaseQuantityDialogFragment pqFragment = new PurchaseQuantityDialogFragment();        pqFragment.setInitNumber(this.number);        pqFragment.setOnInputCompleteListener(new PurchaseQuantityDialogFragment                .OnInputCompleteListener() {            @Override            public void onInputComplete(String data) {                number = Integer.parseInt(data);                numberChanged();            }        });        pqFragment.show(((FragmentActivity) mContext).getSupportFragmentManager(),                "DialogFragment");    }    // ------------------- 数值更改回调接口 -------------------    private OnNumberChangeListener mOnNumberChangeListener;    public void setOnNumberChangeListener(OnNumberChangeListener listener) {        mOnNumberChangeListener = listener;    }    public interface OnNumberChangeListener {        void onNumberChange(int number);    }}

代码还算清晰，首先是读取自定义属性；然后初始化控件内容，测量各内部控件的尺寸，并将它们摆放好；最后注册事件监听器。

弹出对话框DialogFragment

在点击控件TextView时将弹出一个AlertDialog，用户可以直接输入一个数字；点击确定可以将用户输入更新到控件的TextView中，弹出对话框在这里使用DialogFragment来实现，代码如下所示：

package com.witmoon.xmb.activity.common.fragment;import android.app.AlertDialog;import android.app.Dialog;import android.content.Context;import android.content.DialogInterface;import android.os.Bundle;import android.support.annotation.NonNull;import android.support.v4.app.DialogFragment;import android.support.v7.widget.AppCompatEditText;import android.text.InputFilter;import android.text.InputType;import android.text.TextUtils;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.EditText;import android.widget.LinearLayout;import com.witmoon.xmb.R;import com.witmoon.xmb.util.DensityUtils;/** * 数量增减对话框 * Created by zhyh on 2015/6/6. */public class PurchaseQuantityDialogFragment extends DialogFragment {    private OnInputCompleteListener mOnInputCompleteListener;    public void setOnInputCompleteListener(OnInputCompleteListener listener) {        mOnInputCompleteListener = listener;    }    private EditText mEditText;    private String mInitInput;    @NonNull    @Override    public Dialog onCreateDialog(Bundle savedInstanceState) {        LayoutInflater inflater = getActivity().getLayoutInflater();        View view = inflater.inflate(R.layout.layout_purchase_quantity, null);//        View view = createView(getActivity());        mEditText = (EditText) view.findViewById(R.id.edit);        mEditText.setText(mInitInput);        mEditText.selectAll();        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());        builder.setView(view).setTitle("修改购买数量").setPositiveButton(R.string.text_confirm, new                DialogInterface.OnClickListener() {                    @Override                    public void onClick(DialogInterface dialog, int which) {                        String data = mEditText.getText().toString();                        if (isInputValid(data)) {                            if (mOnInputCompleteListener != null) {                                mOnInputCompleteListener.onInputComplete(data);                            }                            dialog.dismiss();                        }                    }                }).setNegativeButton(R.string.text_cancel, null);        return builder.create();    }    // 创建对话框View    private View createView(Context context) {        LinearLayout layout = new LinearLayout(context);        layout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,                ViewGroup.LayoutParams.MATCH_PARENT));        layout.setGravity(Gravity.CENTER);        AppCompatEditText editText = new AppCompatEditText(context);        editText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(3)});        editText.setInputType(InputType.TYPE_CLASS_NUMBER);        editText.setId(R.id.edit);        editText.setGravity(Gravity.CENTER_HORIZONTAL);        editText.setPadding(12, 0, 12, 0);        editText.setMinWidth(DensityUtils.dp2px(context, 40));        layout.addView(editText, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,                ViewGroup.LayoutParams.WRAP_CONTENT));        return layout;    }    // 设置初始值    public void setInitNumber(int number) {        this.mInitInput = String.valueOf(number);    }    private boolean isInputValid(String input) {        if (TextUtils.isEmpty(input)) {            return false;        }        if (!input.matches("\\d+")) {            return false;        }        try {            return Integer.parseInt(input) > 0;        } catch (NumberFormatException e) {            return false;        }    }    public interface OnInputCompleteListener {        void onInputComplete(String data);    }}

DiaglogFragment所使用的xml布局文件

接下来还有一个上面DialogFragment要使用的XML布局文件，内容很简单，仅仅是一个EditText控件而已，如下所示：

<?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="wrap_content"              android:gravity="center"              android:paddingTop="12dp"              android:orientation="vertical">    <android.support.v7.widget.AppCompatEditText        android:id="@+id/edit"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:gravity="center"        android:inputType="number"        android:maxLength="3"        android:background="@drawable/bg_input_area"        android:minWidth="48dp"        android:padding="4dp"/></LinearLayout>