自定义View(十三)自己动手实现加减号

作者: Ayres | 来源:发表于2017-08-16 10:20 被阅读0次

自定义View(十三)自己动手实现加减号
android 自定义View
自定义View理论
为Recycler添加下拉刷新，上拉加载更多功能（简单实现）
View的点击泛黑显示效果
抖音网红罗盘时钟
iOS 自定义view创建和使用问题积累
自定义view，你真的理解onMeasure了吗？
Android 之自定义View全解
iOS扩大按钮点击范围

加减视图.png

在做商城类项目时，购物车是不可避免的，与此同时加减商品也不可或缺，这么简单控件同事竟然还要在github上找库，添加依赖。不如自己动手鲁一个。其实就是个组合控件，两个Button和一个TextView。

万里长城第一步：创建组合控件布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
 android:background="@drawable/number_add_sub_view_bg"
 android:gravity="center"
 android:orientation="horizontal">


<Button
    android:id="@+id/btn_sub"
    android:layout_width="40dp"
    android:layout_height="wrap_content"
    android:background="@drawable/btn_style_while_bg"
    android:gravity="center"
    android:text="-"
    android:textColor="#000000"
    android:textSize="20sp" />

<TextView
    android:id="@+id/tv_values"
    android:layout_width="40dp"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="1"
    android:textColor="#55000000"
    android:textSize="20sp" />

<Button
    android:id="@+id/btn_add"
    android:layout_width="40dp"
    android:layout_height="wrap_content"
    android:background="@drawable/btn_style_while_bg"
    android:gravity="center"
    android:text="+"
    android:textColor="#000000"
    android:textSize="20sp" />
 </LinearLayout>

当然样式可以自己定义，这里我只定义了一种普通的。干脆把代码上来

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_enabled="false">
    <shape android:shape="rectangle">
        <corners android:radius="2.0dp"></corners>
        <solid android:color="#7fd8d8d8"></solid>
        <stroke android:width="1dp" android:color="#dddddd" />
    </shape>
</item>
<item android:state_pressed="true">
    <shape android:shape="rectangle">
        <corners android:radius="2.0dp"></corners>
        <solid android:color="#ffd8d8d8"></solid>
        <stroke android:width="1dp" android:color="#dddddd" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle">
        <corners android:radius="2.0dp"></corners>
        <solid android:color="#ffffff"></solid>
        <stroke android:width="1dp" android:color="#dddddd" />
    </shape>
</item>
</selector>

还有个shop

  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
 <corners android:radius="2.0dp"/>
 <solid android:color="#ffffff"/>
 <stroke android:color="#dddddd" android:width="1dp"/>
</shape>

第二步：自定义属性

根据需要自己添加相应属性

   <declare-styleable name="NumberAddSubView">
    <attr name="value" format="integer|reference"/>
    <attr name="minValue" format="integer|reference"/>
    <attr name="maxValue" format="integer|reference"/>
    <attr name="numberAddSubViewBackground" format="reference"/>
    <attr name="btnSubBackgroud" format="reference"/>
    <attr name="btnAddBackgroud" format="reference"/>
 </declare-styleable>

属性分别为：

1.当前值

2.最小值

3.最大值

4.背景样式

5.加号样式

6.减号样式

最重要一步：开始写逻辑

1.创建view

  public class NumberAddSubView extends LinearLayout  {

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

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

@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
public NumberAddSubView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

  }

2.获取属性，创建设置方法

private Button btn_sub;
private TextView tv_values;
private Button btn_add;
private int value = 1;
private int minValue = 1;
private int maxValue  = 10;

public int getValue() {
    String valueStr = tv_values.getText().toString();
    if(!TextUtils.isEmpty(valueStr)){
        value = Integer.parseInt(valueStr)  ;
    }
    return value;
}

public void setValue(int value) {
    this.value = value;
    tv_values.setText(value+"");
}

public int getMinValue() {
    return minValue;
}

public void setMinValue(int minValue) {
    this.minValue = minValue;
}

public int getMaxValue() {
    return maxValue;
}

public void setMaxValue(int maxValue) {
    this.maxValue = maxValue;
}

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

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

@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
public NumberAddSubView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    /**
     * 最后一个参数：把布局实例化成View并且填充到NumberAddSubView类里面
     * 认NumberAddSubView为父类
     */
    View.inflate(context,R.layout.number_add_sub_view,this);
    btn_sub = (Button) findViewById(R.id.btn_sub);
    tv_values = (TextView) findViewById(R.id.tv_values);
    btn_add = (Button) findViewById(R.id.btn_add);

    getValue();

    //得到属性
    TypedArray tt = context.obtainStyledAttributes(attrs, R.styleable.NumberAddSubView);

    int value =  tt.getInt(R.styleable.NumberAddSubView_value, 0);
    if(value > 0){
        setValue(value);
    }

    int minValue =  tt.getInt(R.styleable.NumberAddSubView_minValue,0);
    if(minValue >0){
        setMinValue(minValue);
    }

    int maxValue =  tt.getInt(R.styleable.NumberAddSubView_maxValue,0);
    if(maxValue >0){
        setMaxValue(maxValue);
    }

    Drawable bg = tt.getDrawable(R.styleable.NumberAddSubView_numberAddSubViewBackground);
    if(bg != null){
        setBackground(bg);
    }


    Drawable sub_bg = tt.getDrawable(R.styleable.NumberAddSubView_btnSubBackgroud);
    if(sub_bg != null){
        btn_sub.setBackground(sub_bg);
    }

    Drawable add_bg = tt.getDrawable(R.styleable.NumberAddSubView_btnAddBackgroud);
    if(add_bg != null){
        btn_add.setBackground(add_bg);
    }
}

3.设置加减按钮点击事件

 @Override
public void onClick(View v) {

    switch (v.getId()){
        case R.id.btn_sub://减
            subNumber();
            if(listener != null){
                listener.onSubNumberClick(v,value);
            }
            break;
        case R.id.btn_add://加
            addNumber();
            if(listener != null){
                listener.onAddNumberClick(v, value);
            }
            break;
    }
}
private void addNumber() {

    if(value < maxValue){
        value = value +1;
    }
    tv_values.setText(value+"");//注意要加上""
}

/**
 * 减
 */
private void subNumber() {

    if(value > minValue){
        value = value-1;
    }
    tv_values.setText(value+"");//注意要加上""
}

/**
 * 监听按钮点击
 */
public interface OnButtonClickListener{
    /**
     * 当点击减按钮的时候回调这个方法
     * @param view
     * @param value
     */
    public void onSubNumberClick(View view, int value);

    /**
     * 当点击加按钮的时候回调这个方法
     * @param view
     * @param value
     */
    public void onAddNumberClick(View view, int value);
}
private OnButtonClickListener listener;

/**
 * 设置监听减和加按钮
 * @param listener
 */
public void setOnButtonClickListener(OnButtonClickListener listener) {
    this.listener = listener;
}

最后是使用

<com.projectdemo.zwz.numberaddsub.NumberAddSubView
    android:id="@+id/number_add_sub_view"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:value="1"
    app:minValue="1"
    app:maxValue="12"
    app:numberAddSubViewBackground="@drawable/number_add_sub_view_bg"
    app:btnSubBackgroud="@drawable/btn_style_while_bg"
    app:btnAddBackgroud="@drawable/btn_style_while_bg"
    />

获取

     number_add_sub_view = (NumberAddSubView) findViewById(R.id.number_add_sub_view);
    number_add_sub_view.setOnButtonClickListener(new NumberAddSubView.OnButtonClickListener() {
        @Override
        public void onSubNumberClick(View view, int value) {
            Toast.makeText(MainActivity.this, "减-value==" + value, Toast.LENGTH_SHORT).show();
        }

        @Override
        public void onAddNumberClick(View view, int value) {
            Toast.makeText(MainActivity.this, "加 value==" + value, Toast.LENGTH_SHORT).show();
        }
    });

其实就是那么简单

自定义View(十三)自己动手实现加减号
在做商城类项目时，购物车是不可避免的，与此同时加减商品也不可或缺，这么简单控件同事竟然还要在github上找库，添...
android 自定义View
网上有很多关于关于自定义view 的文章，这里我还是自己动手谢了一下自定义view，来熟悉自定义view 的主要步...
自定义View理论
自定义View类型 1. 自定义View 在没有现成的View，需要自己实现的时候，就使用自定义View，一般继承...
为Recycler添加下拉刷新，上拉加载更多功能（简单实现）
当然，完全可以自己动手通过自定义view来实现下拉刷新的功能，但是具体实现起来还是比较麻烦的。如果有兴趣，可以参考...
View的点击泛黑显示效果
老的方法都是FrameLayout加一个foreground，这里是用自定义view去实现
抖音网红罗盘时钟
前言周末无事，看到抖音上罗盘时钟壁纸很炫酷，所以想着自己动手实践一下，顺便复习下自定义View的相关知识。实现...
iOS 自定义view创建和使用问题积累
自定义view创建 1.纯代码的方式创建自定义View 自定义view的基本步骤具体实现代码以上是纯代码实现的...
自定义view，你真的理解onMeasure了吗？
疑惑当android内置view无法实现我们的需求，此刻我们需要自定义view来实现定制需求效果。自定义view...
Android 之自定义View全解
本文主要有以下内容：自定义View的分类自定义View的注意事项自定义View的不同实现自定义View使其...
iOS扩大按钮点击范围
1、在自定义的view上使用hitTest:withEvent:方法可以实现其实就是自定义view，实现hitTe...