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

87 阅读 0 评论 58 点赞

我是靠谱客的博主碧蓝唇膏，这篇文章主要介绍自定义控件——加减计数器，现在分享给大家，希望可以做个参考。

一、需求分析

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

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

1、设置基本的布局xml

复制代码

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

</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="105dp"
    android:layout_height="30dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/ll_delta"
        android:layout_width="wrap_content"
        android:layout_marginRight="25dp"
        android:layout_height="match_parent">
        <ImageView
            android:id="@+id/iv_delete"
            android:src="@drawable/delete_unclicked"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
    </LinearLayout>


    <TextView
        android:id="@+id/tv_count"
        android:text="1人"
        android:textSize="13sp"
        android:textColor="@color/gray_4d4d4d"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/iv_add"
        android:src="@drawable/add_clicked"
        android:layout_marginLeft="25dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

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;
        }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 @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、设置外部方法，可以改变加减计数器的范围以及加减计数器的显示内容、加减图片

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
/**
     * 外部设置属性的方法
     *
     * @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、设置加减外部监听

复制代码

1
2
3
   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;
    }

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
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);
    }
}