先看一下效果图
1.先自定义一个类 ,继承RelativeLayout
public class VerifyCodeView extends RelativeLayout {
private EditText editText;
private TextView[] textViews;
private static int MAX = 6;
private String inputContent;
public VerifyCodeView(Context context) {
this(context, null);
}
public VerifyCodeView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public VerifyCodeView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
View inflate = View.inflate(context, R.layout.view_verify_code, this);
textViews = new TextView[MAX];
textViews[0] = (TextView)inflate.findViewById(R.id.tv_0);
textViews[1] = (TextView) inflate.findViewById(R.id.tv_1);
textViews[2] = (TextView) inflate.findViewById(R.id.tv_2);
textViews[3] = (TextView) inflate.findViewById(R.id.tv_3);
textViews[4] = (TextView) inflate.findViewById(R.id.tv_4);
textViews[5] = (TextView) inflate.findViewById(R.id.tv_5);
editText = (EditText) inflate.findViewById(R.id.edit_text_view);
editText.setCursorVisible(false);//隐藏光标
setEditTextListener();
}
private void setEditTextListener() {
editText.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 = editText.getText().toString();
if (inputCompleteListener != null) {
if (inputContent.length() >= MAX) {
inputCompleteListener.inputComplete();
} else {
inputCompleteListener.invalidContent();
}
}
for (int i = 0; i < MAX; i++) {
if (i < inputContent.length()) {
textViews[i].setText(String.valueOf(inputContent.charAt(i)));
} else {
textViews[i].setText("");
}
}
}
});
}
private InputCompleteListener inputCompleteListener;
public void setInputCompleteListener(InputCompleteListener inputCompleteListener) {
this.inputCompleteListener = inputCompleteListener;
}
public interface InputCompleteListener {
void inputComplete();
void invalidContent();
}
public String getEditContent() {
return inputContent;
}
}
2.view_verify_code 布局
<?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:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_0"
style="@style/textview_style" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="@+id/tv_1"
style="@style/textview_style" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="@+id/tv_2"
style="@style/textview_style" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="@+id/tv_3"
style="@style/textview_style" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="@+id/tv_4"
style="@style/textview_style" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="@+id/tv_5"
style="@style/textview_style" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center"
android:orientation="horizontal">
<View
android:layout_width="41dp"
android:layout_height="2dp"
android:layout_gravity="bottom"
android:background="@color/translucent_white" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<View
android:layout_width="41dp"
android:layout_height="2dp"
android:layout_gravity="bottom"
android:background="@color/translucent_white" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<View
android:layout_width="41dp"
android:layout_height="2dp"
android:layout_gravity="bottom"
android:background="@color/translucent_white" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<View
android:layout_width="41dp"
android:layout_height="2dp"
android:layout_gravity="bottom"
android:background="@color/translucent_white" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<View
android:layout_width="41dp"
android:layout_height="2dp"
android:layout_gravity="bottom"
android:background="@color/translucent_white" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<View
android:layout_width="41dp"
android:layout_height="2dp"
android:layout_gravity="bottom"
android:background="@color/translucent_white" />
</LinearLayout>
<com.csdn.demo.MyEditText
android:id="@+id/edit_text_view"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@android:color/transparent"
android:textColor="@color/transparent"
android:longClickable="false"
android:maxLength="6"
android:inputType="number" />
</RelativeLayout>
3.再创建一个输入框的类 MyEditText
public class MyEditText extends AppCompatEditText {
private long lastTime = 0;
public MyEditText(Context context) {
super(context);
}
public MyEditText(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onSelectionChanged(int selStart, int selEnd) {
super.onSelectionChanged(selStart, selEnd);
this.setSelection(this.getText().length());
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
long currentTime = System.currentTimeMillis();
if (currentTime - lastTime < 500) {
lastTime = currentTime;
return true;
} else {
lastTime = currentTime;
}
break;
}
return super.onTouchEvent(event);
}
}
4.在Style中加入这些样式 直接粘贴进去
<style name="textview_style">
<item name="android:layout_height">48dp</item>
<item name="android:layout_width">41dp</item>
<item name="android:background">@color/transparent</item>
<item name="android:gravity">center</item>
<item name="android:textColor">@color/white</item>
<item name="android:textSize">30dp</item>
<item name="android:textStyle">bold</item>
</style>
5.在colors中添加这些 直接粘贴进去
<color name="white">#AAB2CB</color>
<color name="transparent">#00000000</color>
<color name="translucent_white">#ddd</color>
6.mainactivity中的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity"
android:background="#fff">
<com.csdn.demo.VerifyCodeView
android:id="@+id/verify_code_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="80dp"/>
</LinearLayout>
7.MainActivity的代码
public class MainActivity extends AppCompatActivity {
private VerifyCodeView verifyCodeView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
verifyCodeView = findViewById(R.id.verify_code_view);
verifyCodeView.setInputCompleteListener(new VerifyCodeView.InputCompleteListener() {
@Override
public void inputComplete() {
Toast.makeText(MainActivity.this, ""+ verifyCodeView.getEditContent(), Toast.LENGTH_SHORT).show();
}
@Override
public void invalidContent() {
}
});
}
}