先看来看效果图:
一、实现思路
整个控件其实是由两个Button和一个EditText组成,直接上代码进行分析。初始化控件,设置了自定义属性(这几个自定义属性的作用大概通过名字也能够知道了)和设置监听器
二.实践
layout文件夹下
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:focusable="true"
android:divider="@drawable/divider"
android:background="@drawable/bg_amount_layout"
android:showDividers="middle"
android:orientation="horizontal"
>
<Button
android:id="@+id/btnDecrease"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/btn_amount"
android:text="-"/>
<EditText
android:id="@+id/etAmount"
android:layout_width="0dp"
android:layout_height="match_parent"
android:minWidth="60dp"
android:layout_weight="2"
android:background="@null"
android:inputType="number"
android:gravity="center"
android:text="1"/>
<Button
android:id="@+id/btnIncrease"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/btn_amount"
android:text="+"/>
</LinearLayout>
2.activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
tools:context="xxx.addsubdemo.MainActivity">
//写自己的控件路径
<com.addsubdemo.AmountView
android:id="@+id/amount_view"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_centerInParent="true"
android:layout_gravity="right"
android:layout_marginRight="15dp"
app:btnTextSize="14sp"
app:btnWidth="36dp"
app:tvWidth="50dp"/>
</RelativeLayout>
drawable文件夹下
1.bg_amount_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="@color/divider" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
</shape>
2.btn_amount.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@color/divider" />
<item android:state_enabled="false" android:drawable="@color/divider" />
<item android:drawable="@android:color/white" />
</selector>
3.divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="0.5dp"/>
<solid android:color="@color/divider"/>
</shape>
values文件夹 1.自定义属性attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="AmountView">
<!-- 左右2边+-按钮的宽度 -->
<attr name="btnWidth" format="dimension" />
<!-- 中间TextView的宽度 -->
<attr name="tvWidth" format="dimension" />
<!--<attr name="tvColor" format="color"/>-->
<attr name="tvTextSize" format="dimension"/>
<attr name="btnTextSize" format="dimension"/>
</declare-styleable>
</resources>
2.bg_amount_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="@color/divider" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
</shape>
3.btn_amount.xml按钮选中状态
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@color/divider" />
<item android:state_enabled="false" android:drawable="@color/divider" />
<item android:drawable="@android:color/white" />
</selector>
4.divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="0.5dp"/>
<solid android:color="@color/divider"/>
</shape>
5.colors.xml,就一个颜色
<color name="divider">#ffd2d2d2</color>
JAVA类;
1.AmountView.class自定义view类:
import android.content.Context;
import android.content.res.TypedArray;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
/**
* Created by xue on 2017-11-22.
*/
public class AmountView extends LinearLayout implements View.OnClickListener, TextWatcher {
private static final String TAG = "AmountView";
private int amount = 1; //购买数量
private int goods_storage = 1; //商品库存
private OnAmountChangeListener mListener;
private EditText etAmount;
private Button btnDecrease;
private Button btnIncrease;
public AmountView(Context context) {
super(context);
}
public AmountView(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.number_add_sub_view, this);
etAmount = (EditText) findViewById(R.id.etAmount);
btnDecrease = (Button) findViewById(R.id.btnDecrease);
btnIncrease = (Button) findViewById(R.id.btnIncrease);
btnDecrease.setOnClickListener(this);
btnIncrease.setOnClickListener(this);
etAmount.addTextChangedListener(this);
TypedArray obtainStyledAttributes = getContext().obtainStyledAttributes(attrs, R.styleable.AmountView);
int btnWidth = obtainStyledAttributes.getDimensionPixelSize(R.styleable.AmountView_btnWidth, LayoutParams.WRAP_CONTENT);
int tvWidth = obtainStyledAttributes.getDimensionPixelSize(R.styleable.AmountView_tvWidth, 80);
int tvTextSize = obtainStyledAttributes.getDimensionPixelSize(R.styleable.AmountView_tvTextSize, 0);
int btnTextSize = obtainStyledAttributes.getDimensionPixelSize(R.styleable.AmountView_btnTextSize, 0);
obtainStyledAttributes.recycle();
LayoutParams btnParams = new LayoutParams(btnWidth, LayoutParams.MATCH_PARENT);
btnDecrease.setLayoutParams(btnParams);
btnIncrease.setLayoutParams(btnParams);
if (btnTextSize != 0) {
btnDecrease.setTextSize(TypedValue.COMPLEX_UNIT_PX, btnTextSize);
btnIncrease.setTextSize(TypedValue.COMPLEX_UNIT_PX, btnTextSize);
}
LayoutParams textParams = new LayoutParams(tvWidth, LayoutParams.MATCH_PARENT);
etAmount.setLayoutParams(textParams);
if (tvTextSize != 0) {
etAmount.setTextSize(tvTextSize);
}
}
public void setOnAmountChangeListener(OnAmountChangeListener onAmountChangeListener) {
this.mListener = onAmountChangeListener;
}
public void setGoods_storage(int goods_storage) {
this.goods_storage = goods_storage;
}
@Override
public void onClick(View v) {
int i = v.getId();
if (i == R.id.btnDecrease) {
if (amount > 1) {
amount--;
Log.d(TAG, "onClick:===== "+amount);
etAmount.setText(amount + "");
}
} else if (i == R.id.btnIncrease) {
if (amount < goods_storage) {
amount++;
etAmount.setText(amount + "");
}
}
//清除焦点
etAmount.clearFocus();
if (mListener != null) {
mListener.onAmountChange(this, amount);
}
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
if (s.toString().isEmpty())
return;
amount = Integer.valueOf(s.toString());
if (amount > goods_storage) {
etAmount.setText(goods_storage + "");
return;
}
if (mListener != null) {
mListener.onAmountChange(this, amount);
}
}
public interface OnAmountChangeListener {
void onAmountChange(View view, int amount);
}
}
2.MainActivity
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private AmountView mAmountView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAmountView = (AmountView) findViewById(R.id.amount_view);
mAmountView.setGoods_storage(50);
mAmountView.setOnAmountChangeListener(new AmountView.OnAmountChangeListener() {
@Override
public void onAmountChange(View view, int amount) {
Toast.makeText(getApplicationContext(), "Amount=> " + amount, Toast.LENGTH_SHORT).show();
}
});
}
}
作者的
Github下载
---------------------------------------------------再来一个简洁版的 ---------------------------------------------------
1.top_view.xml自定义view布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="horizontal"
android:background="#ccc"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/btn_jian"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/a"
/>
<TextView
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:id="@+id/num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text=""
/>
<ImageView
android:id="@+id/btn_jia"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/b"
/>
</LinearLayout>
2.activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="xuejian.bwie.com.xuejian20171122.MainActivity">
//自己的控件
<xxx.com.xxx.MyView
android:id="@+id/topPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
3.MyView
public class MyView extends LinearLayout{
private ImageView btn_jia;
private ImageView btn_jian;
private TextView numTv;
public MyView(Context context) {
super(context);
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
//加载布局
LayoutInflater.from(context).inflate(R.layout.top_view, this);
//获取控件
btn_jia = (ImageView) findViewById(R.id.btn_jia);
btn_jian = (ImageView) findViewById(R.id.btn_jian);
numTv = (TextView) findViewById(R.id.num);
}
// 为加返回按钮添加自定义点击事件
public void setOnclickJia(OnClickListener listener) {
btn_jia.setOnClickListener(listener);
}
// 为减返回按钮添加自定义点击事件
public void setOnclickJian(OnClickListener listener) {
btn_jian.setOnClickListener(listener);
}
// 设置数字的方法
public void setNum(String num) {
numTv.setText(num);
}
}
4.MainActivity
public class MainActivity extends AppCompatActivity {
private MyView topPanel;
int num;
//更新UI
Handler myHandler = new Handler() {
// 接收到消息后处理
public void handleMessage(Message msg) {
switch (msg.arg1) {
case 1:
// //调用赋值方法
topPanel.setNum(msg.arg2+"");
Log.d("Handler", "减 : --------"+msg.arg2);
break;
case 2:
//调用赋值方法
topPanel.setNum(msg.arg2+"");
Log.d("Handler", "加 : --------"+msg.arg2);
break;
}
super.handleMessage(msg);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
topPanel = (MyView) findViewById(R.id.topPanel);
topPanel.setOnclickJian(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (num<2){
Toast.makeText(MainActivity.this,"不能再减了-----"+num,Toast.LENGTH_SHORT).show();
}else{
num--;
Message message = new Message();
message.arg1 = 1;
message.arg2 = num;
myHandler.sendMessage(message);
Log.d("main", "onCreate: --------"+num);
Toast.makeText(MainActivity.this,"减一个-----"+num,Toast.LENGTH_SHORT).show();
}
}
});
topPanel.setOnclickJia(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (num>=5){
Toast.makeText(MainActivity.this,"不能再加了-----"+num,Toast.LENGTH_SHORT).show();
}else{
num++;
Message message = new Message();
message.arg1 = 2;
message.arg2 = num;
myHandler.sendMessage(message);
Log.d("main", "onCreate: --------"+num);
Toast.makeText(MainActivity.this,"加一个----"+num,Toast.LENGTH_SHORT).show();
}
}
});
}
}
简单啦................