商城購物車子產品-自定義數字加減控件

啥都不說先看效果：

商城購物車子產品-自定義數字加減控件

可實作：

1.加減功能

2.點選背景變色

3.有最大值和最小值限制

源碼下載下傳位址：https://github.com/junmei520/JMAddSubView

現如今，無論什麼軟體都避免不了陷入”盈利“的愛河。這也是人之常情，唯有資金全備，才會有下文可談。于是乎，我也開始學習做與商城有關的項目啦。

我發現在商城購物車子產品，這種簡單的加減功能，如若直接零散地寫在代碼中，還要對它進行各種處理，會顯得代碼淩亂而臃腫。

于是我便把這個控件及其内部的處理邏輯都封裝在一個類中，并對外提供接口，以友善外界監聽到數字的變化，最後我還自定義了屬性，以便設定預設值以及擷取屬性。

這樣再用起來就特别友善了。

實作的思路

1.自定義加減控件的布局和樣式

布局 number_add_sub_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/selector_number_add_sub"
android:orientation="horizontal">
<Button
android:id="@+id/btn_sub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_btn_style_white"
android:padding="5dp"
android:text="-"
android:textColor="#000000"
android:textSize="20sp" />
<TextView
android:id="@+id/tv_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minWidth="100dp"
android:text="1" />
<Button
android:id="@+id/btn_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_btn_style_white"
android:padding="5dp"
android:text="+"android:textColor="#000000"
android:textSize="20sp" />
</LinearLayout>

樣式 selector_number_add_sub.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="2dp" />
<stroke
android:width="1dp"
android:color="#dddddd" />
<solid android:color="#FFFFFF" />
</shape>

按鈕背景樣式 bg_btn_style_white.xml

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

2.自定義 NumberAddSubView 繼承線性布局

public class NumberAddSubView extends LinearLayout {
private Button btn_sub;
private Button btn_add;
private TextView tv_num;
private Context mContext;
public NumberAddSubView(Context context) {
this(context, null);
}
public NumberAddSubView(Context context, AttributeSet attrs) {
this(context, attrs, );
}
public NumberAddSubView(Context context, AttributeSet attrs, int
defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
initView(context);
}
private void initView(Context context) {
//第三個參數：把目前 View 加載到 NumberAddSubView 控件上
View.inflate(context, R.layout.number_add_sub_view, this);
btn_sub = (Button) findViewById(R.id.btn_sub);
btn_add = (Button) findViewById(R.id.btn_add);
tv_num = (TextView) findViewById(R.id.tv_num);}
}

3.設定點選事件

public class NumberAddSubView extends LinearLayout implements
View.OnClickListener {
private Button btn_sub;
private Button btn_add;
private TextView tv_num;
private Context mContext;
/**
* 設定預設值
*/
private int value = ;
private int minValue = ;
private int maxValue = ;
public NumberAddSubView(Context context) {
this(context, null);
}
public NumberAddSubView(Context context, AttributeSet attrs) {
this(context, attrs, );
}
public NumberAddSubView(Context context, AttributeSet attrs, int
defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
initView(context);
}
private void initView(Context context) {
//第三個參數：把目前 View 加載到 NumberAddSubView 控件上View.inflate(context, R.layout.number_add_sub_view, this);
btn_sub = (Button) findViewById(R.id.btn_sub);
btn_add = (Button) findViewById(R.id.btn_add);
tv_num = (TextView) findViewById(R.id.tv_num);
btn_sub.setOnClickListener(this);
btn_add.setOnClickListener(this);
}
public int getValue() {
String val = tv_num.getText().toString();
if (!TextUtils.isEmpty(val)) {
value = Integer.parseInt(val);
}
return value;
}
public void setValue(int value) {
this.value = value;
tv_num.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;
}
@Override
public void onClick(View v) {
if (v.getId() == R.id.btn_sub) {
// Toast.makeText(mContext,"減",Toast.LENGTH_SHORT).show();subNum();
} else if (v.getId() == R.id.btn_add) {
// Toast.makeText(mContext,"加",Toast.LENGTH_SHORT).show();
addNum();
}
}
/**
* 減少資料
*/
private void subNum() {
if (value > minValue) {
value = value - ;
tv_num.setText(value + "");
}
}
/**
* 添加資料
*/
private void addNum() {
if (value < maxValue) {
value = value + ;
tv_num.setText(value + "");
}
}
}

4.提供接口，讓外界監聽到數字的變化

4.1設定接口

@Override
public void onClick(View v) {
if (v.getId() == R.id.btn_sub) {
// Toast.makeText(mContext,"減",Toast.LENGTH_SHORT).show();subNum();
if (onButtonClickListenter != null) {
onButtonClickListenter.onButtonSubClick(v, value);
}
} else if (v.getId() == R.id.btn_add) {
// Toast.makeText(mContext,"加",Toast.LENGTH_SHORT).show();
addNum();
if (onButtonClickListenter != null) {
onButtonClickListenter.onButtonAddClick(v, value);
}
}
}
public interface OnButtonClickListenter {
/**
* 當增加按鈕被點選的時候回調該方法
* *
@param view
* @param value
*/
public void onButtonAddClick(View view, int value);
/**
* 當減少按鈕被點選的時候回調這個方法
* *
@param view
* @param value
*/
public void onButtonSubClick(View view, int value);
}
private OnButtonClickListenter onButtonClickListenter;
public void setOnButtonClickListenter(OnButtonClickListenter
onButtonClickListenter) {
this.onButtonClickListenter = onButtonClickListenter;
}

4.2監聽變化

public class MainActivity extends AppCompatActivity {
private NumberAddSubView nb_addsub_view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
nb_addsub_view = (NumberAddSubView)
findViewById(R.id.nb_addsub_view);
nb_addsub_view.setOnButtonClickListenter(new
NumberAddSubView.OnButtonClickListenter() {
@Override
public void onButtonAddClick(View view, int value) {
Toast.makeText(MainActivity.this,"AddClick
Vaule=="+value,Toast.LENGTH_SHORT).show();
}
@Override
public void onButtonSubClick(View view, int value) {
Toast.makeText(MainActivity.this,"SubClick
Vaule=="+value,Toast.LENGTH_SHORT).show();
}
});
}
}

5.自定義屬性設定預設值并且擷取屬性

5.1在 value 目錄下建立檔案 number_add_sub_attrs.xml 内容

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="NumberAddSubView">
<attr name="value" format="integer|reference"/>
<attr name="minValue" format="integer|reference"/><attr name="maxValue" format="integer|reference"/>
<attr name="btnAddBackground" format="reference"/>
<attr name="btnSubBackground" format="reference"/>
<attr name="textViewBackground" format="reference"/>
</declare-styleable>
</resources>

5.2在布局檔案中使用自定義屬性（此處簡寫，具體看源代碼）

<com.atguigu.numberaddsubview.NumberAddSubView
android:id="@+id/nb_addsub_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:value="3"
app:minValue="3"
app:maxValue="10"
/>

5.3在代碼中擷取屬性，并且設定值

@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
public NumberAddSubView(Context context, AttributeSet attrs, int
defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
initView(context);
//得到屬性
if (attrs != null) {
TintTypedArray a = TintTypedArray.obtainStyledAttributes(context,
attrs, R.styleable.NumberAddSubView, defStyleAttr, );
int value = a.getInt(R.styleable.NumberAddSubView_value, );
setValue(value);
int maxValue = a.getInt(R.styleable.NumberAddSubView_maxValue, );
setMaxValue(maxValue);
int minValue = a.getInt(R.styleable.NumberAddSubView_minValue, );
setMinValue(minValue);
Drawable btnSubBackground =
a.getDrawable(R.styleable.NumberAddSubView_btnSubBackground);
if (btnSubBackground != null)
btn_sub.setBackground(btnSubBackground);
Drawable btnAddBackground =
a.getDrawable(R.styleable.NumberAddSubView_btnAddBackground);
if (btnAddBackground != null)
btn_sub.setBackground(btnAddBackground);
Drawable textViewBackground =
a.getDrawable(R.styleable.NumberAddSubView_textViewBackground);
if (textViewBackground != null)
tv_num.setBackground(textViewBackground);
a.recycle();
}
}

這樣就可以很友善的對這個控件進行操作了~

商城購物車子產品-自定義數字加減控件

實作的思路

繼續閱讀

Qt之自定義檢索框

php laravel中請求第三方接口資料

c#簡單的自定義控件

初見Java中的接口接口的概念

Android時間軸(Timeline)效果的實作

Python requests子產品params與data的差別（轉載）

安卓菜鳥的進階之路-自定義控件

使用者控件&自定義控件----.Net再學一、易創造性與易用性二、使用者控件和自定義控件

vb使用字元串分隔字元串_為什麼要使用字元串

設計模式之開閉原則（OCP) 詳解

go語言筆記（結構體、方法、接口）go語言筆記（結構體、方法、接口）

【筆者親測】jmeter跨線程組調用或jmeter跨線程組傳值

開源接口管理平台 eoLinker AMS開源版 V3.2.1更新，Mock增加允許新請求頭！

Request must contain an kbn-xsrf header 報錯

Django項目後端實作注冊功能---短信驗證碼(容聯雲)。

Charles打斷點--修改response值（wind版）