自定义控件---加减控件

在进行商城开发时，购物车是必不可少的，而购物车中有一个重要控件---加减控件，用来对商品进行加减。现在就来实现此自定义控件。

①首先，实现自定义控件的布局文件，包括两个按钮和一个TextView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:background="@drawable/selector_number_add_sub">
    
    <Button
        android:id="@+id/btn_sub"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_btn_style_white"
        android:textColor="@color/black"
        android:text="-"/>
    <TextView
        android:id="@+id/etxt_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:minWidth="100dp"
        android:gravity="center"/>
    <Button
        android:id="@+id/btn_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_btn_style_white"
        android:textColor="@color/black"
        android:text="+"/>
</LinearLayout>

 

②自定义属性

<resources>
    <attr name="value" format="integer|reference"/>
    <attr name="minValue" format="integer|reference"/>
    <attr name="maxValue" format="integer|reference"/>
    <attr name="editBackground" format="reference"/>
    <attr name="buttonAddBackgroud" format="reference"/>
    <attr name="buttonSubBackgroud" format="reference"/>
    <declare-styleable name="NumberAddSubView">  
        <attr name="value"/>
        <attr name="minValue"/>
        <attr name="maxValue"/>
        <attr name="editBackground"/>
        <attr name="buttonAddBackgroud"/>
        <attr name="buttonSubBackgroud"/>
    </declare-styleable>
</resources>

 

③定义自定义控件，继承LinearLayout，并实现OnClickListener

public class NumberAddSubView extends LinearLayout implements View.OnClickListener 

 

④获得所有的控件

private void initView(){
    View view = mInflater.inflate(R.layout.widet_num_add_sub,this,true);

    mEtxtNum = (TextView) view.findViewById(R.id.etxt_num);
    mEtxtNum.setInputType(InputType.TYPE_NULL);
    mEtxtNum.setKeyListener(null);
    mBtnAdd = (Button) view.findViewById(R.id.btn_add);
    mBtnSub = (Button) view.findViewById(R.id.btn_sub);

    mBtnAdd.setOnClickListener(this);
    mBtnSub.setOnClickListener(this);
}

 

⑤解析自定义属性，并将自定义属性设置好

if(attrs !=null){

    final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
            R.styleable.NumberAddSubView, defStyleAttr, 0);

    int val =  a.getInt(R.styleable.NumberAddSubView_value,0);
    setValue(val);

    int maxVal = a.getInt(R.styleable.NumberAddSubView_maxValue,0);
    if(maxVal!=0)
        setMaxValue(maxVal);

    int minVal = a.getInt(R.styleable.NumberAddSubView_minValue,0);
    setMinValue(minVal);

    Drawable etBackground = a.getDrawable(R.styleable.NumberAddSubView_editBackground);
    if(etBackground!=null)
        setEditTextBackground(etBackground);

     Drawable buttonAddBackground = a.getDrawable(R.styleable.NumberAddSubView_buttonAddBackgroud);
     if(buttonAddBackground!=null)
         setButtonAddBackgroud(buttonAddBackground);

    Drawable buttonSubBackground = a.getDrawable(R.styleable.NumberAddSubView_buttonSubBackgroud);
    if(buttonSubBackground!=null)
        setButtonSubBackgroud(buttonSubBackground);

    a.recycle();
}

public void setMaxValue(int maxValue) {
    this.maxValue = maxValue;
}
public void setMinValue(int minValue) {
    this.minValue = minValue;
}
public void setEditTextBackground(Drawable drawable){
    mEtxtNum.setBackgroundDrawable(drawable);
}
public void setEditTextBackground(int drawableId){
  setEditTextBackground(getResources().getDrawable(drawableId));
}
@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
public void setButtonAddBackgroud(Drawable backgroud){
    this.mBtnAdd.setBackground(backgroud);
}
@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
public void setButtonSubBackgroud(Drawable backgroud){
    this.mBtnSub.setBackground(backgroud);
}

 

⑥为自定义控件，定义一个监听器接口，以实现此自定义控件的具体逻辑

private OnButtonClickListener onButtonClickListener;

public void setOnButtonClickListener(OnButtonClickListener onButtonClickListener) {
    this.onButtonClickListener = onButtonClickListener;
}
public interface  OnButtonClickListener{
    public void onButtonAddClick(View view, int value);
    public void onButtonSubClick(View view, int value);
}

 

⑦实现点击事件的监听器

@Override
public void onClick(View v) {
    if(v.getId() == R.id.btn_add){
        numAdd();
        if(onButtonClickListener !=null){
            onButtonClickListener.onButtonAddClick(v,this.value);
        }
    }
    else if(v.getId()==R.id.btn_sub){
            numSub();
        if(onButtonClickListener !=null){
            onButtonClickListener.onButtonSubClick(v,this.value);
        }
    }
}

private void numAdd(){
    getValue();
    if(this.value<=maxValue)
        this.value=+this.value+1;
    mEtxtNum.setText(value+"");
}
private void numSub(){
    getValue();
    if(this.value>minValue)
        this.value=this.value-1;
    mEtxtNum.setText(value+"");
}

 

现在，加减控件已经定义好了，下面就来使用它：

⑧将加减控件放置在布局文件中

<cniao5.com.cniao5shop.widget.NumberAddSubView
    android:id="@+id/num_control"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    app:minValue="1"
    />

 

⑨在Adapter的ViewHolder中有：

NumberAddSubView numberAddSubView = (NumberAddSubView) viewHoder.getView(R.id.num_control);
numberAddSubView.setValue(item.getCount());
numberAddSubView.setOnButtonClickListener(new NumberAddSubView.OnButtonClickListener() {
    @Override
    public void onButtonAddClick(View view, int value) {
        item.setCount(value);
        cartProvider.update(item);
        showTotalPrice();
    }

    @Override
    public void onButtonSubClick(View view, int value) {
        item.setCount(value);
        cartProvider.update(item);
        showTotalPrice();
    }
});

 

这样，即可实现逻辑。