第一次在上码文章，主要是记录下以后可能会用到的代码，自用顺便提供给可能需要的同学。
一、需求背景
产品经理突然要求更改短信验证码的样式，觉得验证码输入太过于简单，已经落后市场上其他竞品了，效果图如下：
输入满6位，自动调用接口去验证输入是否正确。验证错误后，验证码变红并提醒用户。允许用户进行删除。
二、简单思路及实现方案
本来是准备使用6个Edittext进行操作，后来研究发现焦点的传递和删除时，处理逻辑过于复杂，后决定使用1个Edittext+6个Textview进行实现，虽然好像感觉有点low，但最快最简单实现不才是我想要的么？直接上代码吧。
1.自定义输入布局（verification_code_layout.xml）
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="233dp" android:layout_height="wrap_content"> android:id="@+id/ll_code" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> android:layout_width="27dp" android:layout_height="wrap_content" android:orientation="vertical"> android:id="@+id/tv_code1" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#FF303030" android:textSize="30dp" android:background="@null" android:gravity="center"/> android:id="@+id/v1" android:layout_width="match_parent" android:layout_height="2dp" android:layout_marginTop="6dp" android:background="#FFEFEFEF" /> android:layout_width="27dp" android:layout_height="wrap_content" android:orientation="vertical" android:layout_marginLeft="9dp"> android:id="@+id/tv_code2" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#FF303030" android:textSize="30dp" android:background="@null" android:gravity="center"/> android:id="@+id/v2" android:layout_width="match_parent" android:layout_height="2dp" android:layout_marginTop="6dp" android:background="#FFEFEFEF"/> android:layout_width="27dp" android:layout_height="wrap_content" android:orientation="vertical" android:layout_marginLeft="9dp"> android:id="@+id/tv_code3" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#FF303030" android:textSize="30dp" android:background="@null" android:gravity="center"/> android:id="@+id/v3" android:layout_width="match_parent" android:layout_height="2dp" android:layout_marginTop="6dp" android:background="#FFEFEFEF" /> android:layout_width="27dp" android:layout_height="wrap_content" android:orientation="vertical" android:layout_marginLeft="35dp"> android:id="@+id/tv_code4" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#FF303030" android:background="@null" android:textSize="30dp" android:gravity="center"/> android:id="@+id/v4" android:layout_width="match_parent" android:layout_height="2dp" android:layout_marginTop="6dp" android:background="#FFEFEFEF" /> android:layout_width="27dp" android:layout_height="wrap_content" android:orientation="vertical" android:layout_marginLeft="9dp"> android:id="@+id/tv_code5" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#FF303030" android:background="@null" android:textSize="30dp" android:gravity="center"/> android:id="@+id/v5" android:layout_width="match_parent" android:layout_height="2dp" android:layout_marginTop="6dp" android:background="#FFEFEFEF" /> android:layout_width="27dp" android:layout_height="wrap_content" android:orientation="vertical" android:layout_marginLeft="9dp"> android:id="@+id/tv_code6" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#FF303030" android:background="@null" android:textSize="30dp" android:gravity="center"/> android:id="@+id/v6" android:layout_width="match_parent" android:layout_height="2dp" android:layout_marginTop="6dp" android:background="#FFEFEFEF" /> android:id="@+id/et_code" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignTop="@+id/ll_code" android:layout_alignBottom="@+id/ll_code" android:background="@android:color/transparent" android:textColor="@android:color/transparent" android:cursorVisible="false" android:inputType="number"/> 自定义控件代码实现 import android.content.Context; import android.graphics.Color; import android.text.Editable; import android.text.TextWatcher; import android.util.AttributeSet; import android.view.KeyEvent; import android.view.LayoutInflater; import android.view.View; import android.view.inputmethod.InputMethodManager; import android.widget.EditText; import android.widget.RelativeLayout; import android.widget.TextView; import java.util.ArrayList; import java.util.List; /** * 6位验证码控件实现 */ public class VerificationCodeViewextends RelativeLayout { private Context context; private TextView tv_code1; private TextView tv_code2; private TextView tv_code3; private TextView tv_code4; private TextView tv_code5; private TextView tv_code6; private View v1; private View v2; private View v3; private View v4; private View v5; private View v6; private EditTextet_code; private Listcodes =new ArrayList<>(); private InputMethodManagerimm; public VerificationCodeView(Context context) { super(context); this.context = context; loadView(); } public VerificationCodeView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; loadView(); } public VerificationCodeView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.context = context; loadView(); } private void loadView(){ imm = (InputMethodManager)context.getSystemService(Context.INPUT_METHOD_SERVICE); View view = LayoutInflater.from(context).inflate(R.layout.verification_code_layout, this); initView(view); initEvent(); } private void initView(View view){ tv_code1 = (TextView) view.findViewById(R.id.tv_code1); tv_code2 = (TextView) view.findViewById(R.id.tv_code2); tv_code3 = (TextView) view.findViewById(R.id.tv_code3); tv_code4 = (TextView) view.findViewById(R.id.tv_code4); tv_code5 = (TextView) view.findViewById(R.id.tv_code5); tv_code6 = (TextView) view.findViewById(R.id.tv_code6); et_code = (EditText) view.findViewById(R.id.et_code); v1 = view.findViewById(R.id.v1); v2 = view.findViewById(R.id.v2); v3 = view.findViewById(R.id.v3); v4 = view.findViewById(R.id.v4); v5 = view.findViewById(R.id.v5); v6 = view.findViewById(R.id.v6); } private void initEvent(){ //验证码输入 et_code.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void afterTextChanged(Editable editable) { if(editable !=null && editable.length()>0) { et_code.setText(""); if(codes.size() <6){ codes.add(editable.toString()); showCode(); } } } }); // 监听验证码删除按键 et_code.setOnKeyListener(new View.OnKeyListener() { @Override public boolean onKey(View view, int keyCode, KeyEvent keyEvent) { if (keyCode == KeyEvent.KEYCODE_DEL && keyEvent.getAction() == KeyEvent.ACTION_DOWN &&codes.size()>0) { codes.remove(codes.size()-1); showCode(); //删除时重置textview的颜色 resetTvColor(); return true; } return false; } }); } /** * 显示输入的验证码 */ private void showCode(){ String code1 =""; String code2 =""; String code3 =""; String code4 =""; String code5 =""; String code6 =""; if(codes.size()>=1){ code1 =codes.get(0); } if(codes.size()>=2){ code2 =codes.get(1); } if(codes.size()>=3){ code3 =codes.get(2); } if(codes.size()>=4){ code4 =codes.get(3); } if (codes.size()>=5){ code5 =codes.get(4); } if (codes.size()>=6){ code6 =codes.get(5); } tv_code1.setText(code1); tv_code2.setText(code2); tv_code3.setText(code3); tv_code4.setText(code4); tv_code5.setText(code5); tv_code6.setText(code6); // setColor();//设置高亮颜色 callBack();//回调 } /** * 错误时设置红色 */ public void setErrorRedColor(){ tv_code1.setTextColor(getResources().getColor(R.color.red_0xFD4440)); tv_code2.setTextColor(getResources().getColor(R.color.red_0xFD4440)); tv_code3.setTextColor(getResources().getColor(R.color.red_0xFD4440)); tv_code4.setTextColor(getResources().getColor(R.color.red_0xFD4440)); tv_code5.setTextColor(getResources().getColor(R.color.red_0xFD4440)); tv_code6.setTextColor(getResources().getColor(R.color.red_0xFD4440)); } /** * 重置textview的颜色 */ public void resetTvColor(){ tv_code1.setTextColor(getResources().getColor(R.color.color_303030)); tv_code2.setTextColor(getResources().getColor(R.color.color_303030)); tv_code3.setTextColor(getResources().getColor(R.color.color_303030)); tv_code4.setTextColor(getResources().getColor(R.color.color_303030)); tv_code5.setTextColor(getResources().getColor(R.color.color_303030)); tv_code6.setTextColor(getResources().getColor(R.color.color_303030)); } /** * 回调 */ private void callBack(){ if(onInputListener==null){ return; } if(codes.size()==6){ onInputListener.onSucess(getPhoneCode()); }else{ onInputListener.onInput(); } } //定义回调 public interface OnInputListener{ // void onInputSucess(String code); //输入状态 void onInput(); } private OnInputListeneronInputListener; public void setOnInputListener(OnInputListener onInputListener){ this.onInputListener = onInputListener; } /** * 显示键盘 */ public void showSoftInput(){ //显示软键盘 if(imm!=null &&et_code!=null) { et_code.postDelayed(new Runnable() { @Override public void run() { imm.showSoftInput(et_code, 0); } },200); } } /** * 获得手机号验证码 * @return 验证码 */ public String getPhoneCode(){ StringBuilder sb =new StringBuilder(); for (String code :codes) { sb.append(code); } return sb.toString(); } } 3.自定义控件的使用 verificationCodeView.setOnInputListener(new VerificationCodeView.OnInputListener() { @Override public void onInputInputSucess(String code) { //输入6个数字后，调用接口查询数据是否正确 } @Override public void onInput() { } }); verificationCodeView.showSoftInput(); 实现非常简单，实现方式比较low