加減視圖.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>
當(dāng)然樣式可以自己定義，這里我只定義了一種普通的靖诗。干脆把代碼上來
<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ù)需要自己添加相應(yīng)屬性
<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.當(dāng)前值
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)建設(shè)置方法
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類里面
* 認(rèn)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.設(shè)置加減按鈕點擊事件
@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{
/**
* 當(dāng)點擊減按鈕的時候回調(diào)這個方法
* @param view
* @param value
*/
public void onSubNumberClick(View view, int value);
/**
* 當(dāng)點擊加按鈕的時候回調(diào)這個方法
* @param view
* @param value
*/
public void onAddNumberClick(View view, int value);
}
private OnButtonClickListener listener;
/**
* 設(shè)置監(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();
}
});
其實就是那么簡單
