前言
项目中有时要用到数目加减的问题，直接布局的话显得有些麻烦，于是查查，决定自定义一个加减控件。
此篇文章的由来参考自以下链接
高仿美团外卖加减号自定义控件
我只是在他的基础上做了一些简单的代码优化，此篇文章的作用
- 学习简单的自定义控件
- 学习控件的测量和重新定义宽高
ok，下面开始正式讲解。
第一步，附上自定义控件 CicleAddAndSubView 的代码
package com.test.ui.main;
import android.content.Context;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.test.R;
/**
* Instruction:自定义加减数量控件
* <p>
* Author:pei
* Date: 2017/7/13
* Description:
*/
public class CicleAddAndSubView extends LinearLayout implements View.OnClickListener{
public static final int TYPE_SUBTRACT = 0;//减
public static final int TYPE_ADD = 1;//加
private static final int DEFAULT_NUM=0;//默认num值
private View mLayoutView;
private Context mContext;
private ImageView mBtnAdd;//加按钮
private ImageView mBtnSub;//减按钮
private TextView mTvCount;//数量显示
private int mNum;
private OnNumChangeListener mOnNumChangeListener;
/**
* 设置监听回调
*
* @param onNumChangeListener
*/
public void setOnNumChangeListener(OnNumChangeListener onNumChangeListener) {
this.mOnNumChangeListener = onNumChangeListener;
}
public CicleAddAndSubView(Context context, AttributeSet attrs) {
super(context, attrs);
mLayoutView=LayoutInflater.from(context).inflate(R.layout.add_sub_view, this);
this.mContext=context;
initView();
initData();
setListener();
}
private void initView(){
mBtnAdd = (ImageView) mLayoutView.findViewById(R.id.btn_add);
mBtnSub = (ImageView) mLayoutView.findViewById(R.id.btn_sub);
mTvCount = (TextView) mLayoutView.findViewById(R.id.tv_count);
setPadding(1, 1, 1, 1);
//重新设置mBtnAdd，mBtnSub宽高，用来保证显示正方形
setViewSize(mBtnAdd);
setViewSize(mBtnSub);
}
private void initData(){
setAddBtnImageResource(R.drawable.goods_add_btn);
setSubBtnImageResource(R.drawable.goods_sub_btn);
mNum=DEFAULT_NUM;
setNum(mNum);//设置默认数量
}
private void setListener(){
mBtnAdd.setOnClickListener(this);
mBtnSub.setOnClickListener(this);
}
private void setViewSize(final View view){
view.post(new Runnable(){
public void run() {//这里获取宽高
int width=view.getWidth();
int height=view.getHeight();
LinearLayout.LayoutParams params= (LayoutParams) view.getLayoutParams();
if(width<height){
params.height=width;
}else if(width>height){
params.width=height;
}
view.setLayoutParams(params);
}
});
}
@Override
public void onClick(View v) {
String countText = mTvCount.getText().toString();
if (TextUtils.isEmpty(countText)) {
mNum = DEFAULT_NUM;
mTvCount.setText(String.valueOf(mNum));
return;
}
switch(v.getId()){
case R.id.btn_add://加号
mNum++;
setNum(mNum);
if (mOnNumChangeListener != null) {
mOnNumChangeListener.onNumChange(mLayoutView, TYPE_ADD, getNum());
}
break;
case R.id.btn_sub://减号
mNum--;
setNum(mNum);
if (mOnNumChangeListener != null) {
mOnNumChangeListener.onNumChange(mLayoutView, TYPE_SUBTRACT, getNum());
}
break;
default:
break;
}
}
/**
* 设置中间的距离
*
* @param distance
*/
public void setMiddleDistance(int distance) {
mTvCount.setPadding(distance, 0, distance, 0);
}
/**
* 设置数量
*
* @param num
*/
public void setNum(int num) {
this.mNum = num;
if (mNum > 0) {
mBtnSub.setVisibility(View.VISIBLE);
mTvCount.setVisibility(View.VISIBLE);
} else {
mBtnSub.setVisibility(View.INVISIBLE);
mTvCount.setVisibility(View.INVISIBLE);
}
mTvCount.setText(String.valueOf(mNum));
}
/**
* 获取值
*
* @return
*/
public int getNum() {
String countText=mTvCount.getText().toString().trim();
if (!TextUtils.isEmpty(countText)) {
return Integer.parseInt(countText);
} else {
return DEFAULT_NUM;
}
}
/**
* 设置加号图片
*
* @param addBtnDrawable
*/
public void setAddBtnImageResource(int addBtnDrawable) {
mBtnAdd.setImageResource(addBtnDrawable);
}
/**
* 设置减法图片
*
* @param subBtnDrawable
*/
public void setSubBtnImageResource(int subBtnDrawable) {
mBtnSub.setImageResource(subBtnDrawable);
}
/**
* 设置加法减法的背景色
*
* @param addBtnColor
* @param subBtnColor
*/
public void setButtonBgColor(int addBtnColor, int subBtnColor) {
mBtnAdd.setBackgroundColor(addBtnColor);
mBtnSub.setBackgroundColor(subBtnColor);
}
public interface OnNumChangeListener {
/**
* 监听方法
*
* @param view
* @param stype 点击按钮的类型
* @param num 返回的数值
*/
void onNumChange(View view, int stype, int num);
}
}
对应的 add_sub_view.xml 布局代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="@+id/btn_sub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tv_count"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:gravity="center"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="0"
android:textColor="@color/black"
android:textSize="16sp"/>
<ImageView
android:id="@+id/btn_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
然后涉及到的 R.drawable.goods_add_btn 和 R.drawable.goods_sub_btn 分别是两张 加，减 圆形图片，这里就不深讲了。
第二步，activity_main.xml 中引用控件：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:gravity="center"
android:orientation="vertical">
<com.test.ui.main.CicleAddAndSubView
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_margin="10dp"
android:padding="10dp"/>
</LinearLayout>
第三步，MainActivity中使用控件：
package com.test.ui.main;
import android.support.annotation.Nullable;
import android.view.View;
import com.test.R;
import com.test.base.BaseActivity;
import com.test.base.BasePresenter;
import com.test.util.LogUtil;
import butterknife.BindView;
/**
* Created by Admin on 2017/5/19.
*/
public class MainActivity extends BaseActivity implements View.OnClickListener{
@BindView(R.id.btn)
CicleAddAndSubView mCicleAddAndSubView;
@Override
protected int getContentViewId() {
return R.layout.activity_main;
}
@Override
protected void initData() {
}
@Override
protected void setListener() {
mCicleAddAndSubView.setOnNumChangeListener(new CicleAddAndSubView.OnNumChangeListener() {
@Override
public void onNumChange(View view, int stype, int num) {
//点击加号，减号打印数量值
LogUtil.e("====num====="+num);
}
});
}
@Nullable
@Override
protected BasePresenter getPresenter() {
return null;
}
@Override
protected void onDestroy(){
super.onDestroy();
}
@Override
public void onClick(View v) {
}
}
最后，让我们来看看效果图
1.gif
好了，今天的内容就讲到这里吧，谢谢诶。
