自定義View(十三)自己動手實現(xiàn)加減號

加減視圖.png

在做商城類項目時，購物車是不可避免的，與此同時加減商品也不可或缺，這么簡單控件同事竟然還要在github上找?guī)?，添加依賴。不如自己動手魯一個。其實就是個組合控件，兩個Button和一個TextView。

萬里長城第一步：創(chuàng)建組合控件布局

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

第二步：自定義屬性

根據(jù)需要自己添加相應屬性

   <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.創(chuàng)建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.獲取屬性，創(chuàng)建設置方法
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);
    /**
     * 最后一個參數(shù)：把布局實例化成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+"");//注意要加上""
}

/**
 * 監(jiān)聽按鈕點擊
 */
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;

/**
 * 設置監(jiān)聽減和加按鈕
 * @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();
        }
    });

其實就是那么簡單

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容