一、前言：
我们在软件开发过程中，经常会遇到密码输入框，这就要我们自定控件来实现，下面的自定义密码框，是参考我的同事写出来的，今天分享一下。
1. gitHub 地址：
2. 效果图如下：
图 1.png
图 2.png
图 3.png
图 4.png
二、使用 ：
我只介绍第二种，第一种是弹窗，回调有点多，大家可以下载源码看一下啊。
强大工具类依赖：（自定义布局用不到，用到了弹窗和键盘的显示隐藏）
implementation 'com.blankj:utilcode:1.25.2'
1.TwoActivity调用：
public class TwoActivity extends Activity {
@BindView(R.id.activationCode)
ActivationCodeBox activationCode;
@BindView(R.id.btn_cancel)
Button btnCancel;
@BindView(R.id.container)
LinearLayout container;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_two);
ButterKnife.bind(this);
initData();
}
private void initData() {
//激活码输入完成
activationCode.setInputCompleteListener(new ActivationCodeBox.InputCompleteListener() {
@Override
public void inputComplete(String code) {
KeyboardUtils.hideSoftInput(TwoActivity.this);
//回调进入 Activity
if (code.equals("1234")) {
//激活成功
ToastUtils.showShort("激活成功");
activationCode.showTip(false, "");
} else {
//激活失败
ToastUtils.showShort("激活失败");
activationCode.showTip(true, "激活失败");
}
}
});
//返回上一页
btnCancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
TwoActivity.this.finish();
}
});
}
/**
* 页面跳转
*
* @param mContext
*/
public static void launch(Context mContext) {
Intent intent = new Intent(mContext, TwoActivity.class);
mContext.startActivity(intent);
}
2.自定义ActivationCodeBox布局：
public class ActivationCodeBox extends RelativeLayout {
private Context context;
private TextView[] textViews;
private static int MAXlength = 4;
private TextView tvTip;
private String inputContent;
private EditText etCode;
private List<String> codes = new ArrayList<>();
private InputMethodManager imm;
private Animation shake;
public ActivationCodeBox(Context context) {
super(context);
this.context = context;
loadView();
}
public ActivationCodeBox(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
loadView();
}
public ActivationCodeBox(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
loadView();
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public ActivationCodeBox(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
this.context = context;
loadView();
}
private void loadView(){
//抖动效果
shake = AnimationUtils.loadAnimation(context, R.anim.shake);
imm = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);
View view = LayoutInflater.from(context).inflate(R.layout.activation_code_box, this);
initView(view);
initEvent();
}
private void initView(View view){
textViews = new TextView[MAXlength];
textViews[0] = (TextView) view.findViewById(R.id.tv_code1);
textViews[1] = (TextView) view.findViewById(R.id.tv_code2);
textViews[2] = (TextView) view.findViewById(R.id.tv_code3);
textViews[3] = (TextView) view.findViewById(R.id.tv_code4);
etCode = (EditText) view.findViewById(R.id.et_code);
tvTip = (TextView) view.findViewById(R.id.tv_tip);
}
private void initEvent(){
//验证码输入
etCode.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) {
inputContent = etCode.getText().toString();
if (inputCompleteListener != null) {
if (inputContent.length() >= MAXlength) {
inputCompleteListener.inputComplete(inputContent);
}
}
for (int i = 0; i < MAXlength; i++) {
if (i < inputContent.length()) {
textViews[i].setText(String.valueOf(inputContent.charAt(i)));
} else {
textViews[i].setText("");
}
}
}
});
}
/**
* 设置高亮颜色
*/
private void setColor(boolean isShow, int color){
for (int i = 0; i <MAXlength ; i++) {
textViews[i].setTextColor(color);
if(isShow){
textViews[i].setBackground(context.getResources().getDrawable(R.drawable.box_red));
//抖动
textViews[i].startAnimation(shake);
}else {
textViews[i].setBackground(context.getResources().getDrawable(R.drawable.box_blue));
}
}
}
/**
* 获得手机号验证码
* @return 验证码
*/
public String getPhoneCode(){
StringBuilder sb = new StringBuilder();
for (String code : codes) {
sb.append(code);
}
return sb.toString();
}
/**
* 显示提示语
* @param isShow 是否显示提示语 true 代码验证码错误；false 验证码失败
* @param content 提示语内容
*/
public void showTip(boolean isShow,String content){
tvTip.setVisibility(isShow?VISIBLE:INVISIBLE);
tvTip.setText(content);
if(isShow){
setColor(isShow,context.getColor(R.color.color_ffe93a3a));
}else{
setColor(isShow,context.getColor(R.color.btn_press_bg_color));
etCode.setText("");
codes.clear();
}
}
private InputCompleteListener inputCompleteListener;
public void setInputCompleteListener(InputCompleteListener inputCompleteListener) {
this.inputCompleteListener = inputCompleteListener;
}
public interface InputCompleteListener {
void inputComplete(String code);
}
}
3.activation_code_box布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/ll_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_10"
android:layout_marginRight="@dimen/dp_10"
android:orientation="horizontal"
android:gravity="center"
>
<TextView
android:layout_marginRight="@dimen/dp_8"
android:id="@+id/tv_code1"
android:layout_width="50dp"
android:layout_height="50dp"
android:textColor="@color/color_ff333333"
android:textSize="@dimen/sp_15"
android:inputType="text"
android:background="@drawable/box_blue"
android:gravity="center"/>
<TextView
android:layout_marginRight="@dimen/dp_8"
android:layout_marginLeft="@dimen/dp_8"
android:id="@+id/tv_code2"
android:layout_width="50dp"
android:layout_height="50dp"
android:textColor="@color/color_ff333333"
android:textSize="@dimen/sp_15"
android:inputType="text"
android:background="@drawable/box_blue"
android:gravity="center"/>
<TextView
android:layout_marginRight="@dimen/dp_8"
android:layout_marginLeft="@dimen/dp_8"
android:id="@+id/tv_code3"
android:layout_width="50dp"
android:layout_height="50dp"
android:textColor="@color/color_ff333333"
android:textSize="@dimen/sp_15"
android:inputType="text"
android:background="@drawable/box_blue"
android:gravity="center"/>
<TextView
android:layout_marginLeft="@dimen/dp_8"
android:id="@+id/tv_code4"
android:layout_width="50dp"
android:layout_height="50dp"
android:textColor="@color/color_ff333333"
android:background="@drawable/box_blue"
android:inputType="text"
android:textSize="@dimen/sp_15"
android:gravity="center"/>
</LinearLayout>
<EditText
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="textPassword"
/>
<TextView
android:id="@+id/tv_tip"
android:layout_below="@+id/ll_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_8"
android:textSize="@dimen/sp_15"
android:textColor="@color/color_ffe93a3a"
android:maxLines="1"
android:ellipsize="end"
android:layout_margin="6dp"
android:visibility="invisible"
/>
</RelativeLayout>
3.activity_two布局：
<?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="vertical"
android:background="@drawable/button_white_fillet_rectangle"
android:id="@+id/container"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="请输入激活码"
android:layout_marginTop="15dp"
android:layout_marginLeft="20dp"
android:layout_marginBottom="25dp"
android:textColor="#ff333333"
android:textSize="18sp"
android:drawableLeft="@drawable/icon_activation_code"
android:drawablePadding="5dp"
/>
<com.function.luo.ui.ActivationCodeBox
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/activationCode"
android:layout_below="@+id/fpc_1"
android:layout_marginLeft="@dimen/dp_20"
android:layout_marginRight="@dimen/dp_20"/>
<Button
android:id="@+id/btn_cancel"
android:layout_width="150dp"
android:layout_height="35dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:background="@drawable/button_selector"
android:minHeight="0dp"
android:text="返回上一页"
android:textColor="@drawable/text_color_selector"
android:textSize="18sp" />
</LinearLayout>
三、总结 ：
布局方式：密码输入框采用的的相对布局，让 LinearLayout 中的四个TextView和EditText的布局重复。监听EditText输入数据，添加到TextView上。
1. 思路：
- 自定义ActivationCodeBox实现 RelativeLayout；
- 重写多个构造方法，构造方法调用loadView();
- loadView() 加载布局，获取各个控件；
- 通过initEvent()方法监听数据的输入；
- 在showCode()中，把 EditText 输入的值，放到对应的 TextVIew 上。
