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(context, R.layout.view_verify_code, this); textViews = new TextView[MAX]; textViews[0] = (TextView) findViewById(R.id.tv_0); textViews[1] = (TextView) findViewById(R.id.tv_1); textViews[2] = (TextView) findViewById(R.id.tv_2); textViews[3] = (TextView) findViewById(R.id.tv_3); textViews[4] = (TextView) findViewById(R.id.tv_4); textViews[5] = (TextView) findViewById(R.id.tv_5); editText = (EditText) 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.其中的布局如下
<?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.example.bruce.verifycodeviewdemo.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" />
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 如何使用呢,我在mainactivity中的布局
<?xml version="1.0" encoding="utf-8"?> <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="@android:color/holo_blue_light" tools:context="com.example.bruce.verifycodeviewdemo.MainActivity"> <com.example.bruce.verifycodeviewdemo.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>
6 MainActivity中的代码如下
public class MainActivity extends AppCompatActivity { VerifyCodeView verifyCodeView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); verifyCodeView = (VerifyCodeView) findViewById(R.id.verify_code_view); verifyCodeView.setInputCompleteListener(new VerifyCodeView.InputCompleteListener() { @Override public void inputComplete() { Toast.makeText(MainActivity.this, "inputComplete: " + verifyCodeView.getEditContent(), Toast.LENGTH_SHORT).show(); } @Override public void invalidContent() { } }); } }