加减视图.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();
}
});
其实就是那么简单
