先来看UI给的效果图
实现思路
- 绘制多个TextView控件用来显示数字
- 绘制隐藏EditText用来接收输入法内容(防止部分手机或输入法监听不到内容)
- 将EditText的内容显示到TextView中
代码实现
- 自定义控件继承至LinearLayout
public class CodeEditView extends LinearLayout
- 绘制多个TextView并绘制方块边框背景用来显示数字
for (int i = 0; i < EditViewNum; i++) {
TextView textView = new TextView(mContext);
textView.setBackgroundResource(R.drawable.shape_border_normal);
textView.setGravity(Gravity.CENTER);
textView.setTextSize(DensityUtil.sp2px(mContext,textSize));
textView.getPaint().setFakeBoldText(true);
textView.setLayoutParams(params);
textView.setInputType(inputTyte);
textView.setTextColor(textColor);
textView.setOnClickListener(this);
mTextViewsList.add(textView);
addView(textView);
}
- 绘制EditText并将背景设为透明(不让用户看到,仅用来监听输入法内容,防止部分手机或输入法不兼容)
mEditText = new EditText(context);
mEditText.setBackgroundColor(Color.parseColor("#00000000"));
mEditText.setMaxLines(1);
mEditText.setInputType(EditorInfo.TYPE_CLASS_NUMBER);
mEditText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(EditViewNum)});
mEditText.addTextChangedListener(this);
mEditText.setTextSize(0);
addView(mEditText);
- 监听输入法内容进行逻辑处理
@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 (callBack!=null) {
callBack.afterTextChanged(s.toString());
}
if (s.length() <= 1) {
mTextViewsList.get(0).setText(s);
} else {
mTextViewsList.get(mEditText.getText().length() - 1).setText(s.subSequence(s.length() - 1, s.length()));
}
if (s.length()==EditViewNum) {
if (callBack!=null) {
callBack.input(mEditText.getText().toString());
}
}
}
- 当点击TextView时,将EditText获取到焦点并弹出输入法
@Override
public void onClick(View v) { //TextView点击时获取焦点弹出输入法
mEditText.setFocusable(true);
mEditText.setFocusableInTouchMode(true);
mEditText.requestFocus();
InputMethodManager imm = (InputMethodManager) mContext.getSystemService(Context.INPUT_METHOD_SERVICE);
imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);
}
完成后效果图
使用方法
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
dependencies {
implementation 'com.github.lvkaixuan:CodeEditView:v1.0.1'
}
布局中使用控件
<com.lkx.library.CodeEditView
android:id="@+id/codeEditView"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
代码中的回调监听
codeEditView.setOnInputEndCallBack(new CodeEditView.inputEndListener() {
@Override
public void input(String text) { //输入完毕后的回调
Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
}
@Override
public void afterTextChanged(String text) { //输入内容改变后的回调
textView.setText(text);
}
});
Demo地址
- GitHub地址: https://github.com/lvkaixuan/CodeEditView
- 扫码下载apk