自定义控件——加减计数器

一、需求分析

    目前，公司要求做一个房间套数和入住人数的加减计数器，需要在最小套数和入住人数时－不可点击并且置灰，在最大时+不可点击并置灰。决定做一个自定义控件——加减计数器，可以做加减选择。首先得写一个基础的加减计数器控件的布局，然后设置加减逻辑。

二、自定义控件——加减计数器

1、设置基本的布局xml

2、设置加减计数器加减监听

       其中，ammout 为默认加减计数器的值，maxRange 为加减计数器最大值。

 @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.ll_delta:
                if (ammount > 1) {
                    ammount--;
                    if (ammount == 1) {
                        delete.setImageResource(R.drawable.delete_unclicked);
                        delta.setClickable(false);
                    }
                    count.setText(ammount + value);
                    add.setImageResource(R.drawable.add_clicked);
                    add.setClickable(true);
                } else {
                    delete.setImageResource(R.drawable.delete_unclicked);
                    delta.setClickable(false);
                }
                break;
            case R.id.iv_add:
                if (ammount < maxRange) {
                    ammount++;
                    if (ammount == maxRange) {
                        add.setImageResource(R.drawable.add_unclicked);
                        add.setClickable(false);
                    }
                    count.setText(ammount + value);
                    delete.setImageResource(R.drawable.delete_clicked);
                    delta.setClickable(true);
                } else {
                    add.setImageResource(R.drawable.add_unclicked);
                    add.setClickable(false);
                }
                break;
        }

    }

3、设置外部方法，可以改变加减计数器的范围以及加减计数器的显示内容、加减图片

/**
     * 外部设置属性的方法
     *
     * @param add
     * @param delete
     */
    public void setValues(int add, int delete, String value) {
        this.add.setImageResource(add);
        this.delete.setImageResource(delete);
        this.count.setText(ammount + value);
        this.value = value;
    }

4、设置加减外部监听

    

   if (mListener != null) {
            mListener.onAmountChange(this, ammount);
        }

三、计数器效果

      可点击状态：

 

       不可点击状态：

四、完整代码共享

public class AddDeleteView extends LinearLayout implements View.OnClickListener {
    private final ImageView delete;
    private final ImageView add;
    private final TextView count;
    private final LinearLayout delta;
    private int ammount = 1; // 加减计数器值
    private String value;//加减计数器的单位
    private int maxRange; // 加减计数器的最大值
    private OnAmountChangeListener mListener; // 加减计数器的加减监听

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

    public AddDeleteView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AddDeleteView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        LayoutInflater.from(context).inflate(R.layout.add_delete_view, this);
        delete = (ImageView) findViewById(R.id.iv_delete);
        count = (TextView) findViewById(R.id.tv_count);
        add = (ImageView) findViewById(R.id.iv_add);
        delta = (LinearLayout) findViewById(R.id.ll_delta);
        delta.setOnClickListener(this);
        add.setOnClickListener(this);

        TypedArray attr = getContext().obtainStyledAttributes(attrs, R.styleable.AddDeleteView);
        int tvTextSize = attr.getDimensionPixelSize(R.styleable.AddDeleteView_tvTextSize, 0);
        attr.recycle();
        if (tvTextSize != 0) {
            count.setTextSize(tvTextSize);
        }
    }

    public void setMaxRange(int maxRange) {
        this.maxRange = maxRange;
    }

    public void setAmmount(int ammount) {
        this.ammount = ammount;
    }

    /**
     * 外部设置属性的方法
     *
     * @param add
     * @param delete
     */
    public void setValues(int add, int delete, String value) {
        this.add.setImageResource(add);
        this.delete.setImageResource(delete);
        this.count.setText(ammount + value);
        this.value = value;
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.ll_delta:
                if (ammount > 1) {
                    ammount--;
                    if (ammount == 1) {
                        delete.setImageResource(R.drawable.delete_unclicked);
                        delta.setClickable(false);
                    }
                    count.setText(ammount + value);
                    add.setImageResource(R.drawable.add_clicked);
                    add.setClickable(true);
                } else {
                    delete.setImageResource(R.drawable.delete_unclicked);
                    delta.setClickable(false);
                }
                break;
            case R.id.iv_add:
                if (ammount < maxRange) {
                    ammount++;
                    if (ammount == maxRange) {
                        add.setImageResource(R.drawable.add_unclicked);
                        add.setClickable(false);
                    }
                    count.setText(ammount + value);
                    delete.setImageResource(R.drawable.delete_clicked);
                    delta.setClickable(true);
                } else {
                    add.setImageResource(R.drawable.add_unclicked);
                    add.setClickable(false);
                }
                break;
        }

        if (mListener != null) {
            mListener.onAmountChange(this, ammount);
        }
    }

    public void setOnAmountChangeListener(OnAmountChangeListener onAmountChangeListener) {
        this.mListener = onAmountChangeListener;
    }

    public interface OnAmountChangeListener {
        void onAmountChange(View view, int amount);
    }
}