Android自定義方框EditText注冊驗證碼
更新時間：2018年06月05日 11:02:20 作者：Xia_焱
這篇文章主要為大家詳細(xì)介紹了Android自定義方框EditText注冊驗證碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
先來個效果圖讓大家看一看，現(xiàn)在好多app都用類似的注冊頁
實現(xiàn)思路
- 用一個透明的EditText與四個TextView重疊，并給TextView設(shè)置默認(rèn)背景
- 第4個TextView輸入完成后,要設(shè)置回調(diào),并且要加入增加刪除的回調(diào)
- 還要監(jiān)聽EditText內(nèi)容的變化,獲取內(nèi)容,并且改變EditText下面的TextView的顏色
- 重新發(fā)送的是采用一個自定義的CountDownTimer類
- 彈出效果自定義的一個Dialog繼承DialogFragment
自定義EditText的布局
<?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="wrap_content" android:layout_height="47dp" android:gravity="center" android:orientation="horizontal" android:weightSum="3"> <TextView android:id="@+id/item_code_iv1" style="@style/text_editStyle" /> <View android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" /> <TextView android:id="@+id/item_code_iv2" style="@style/text_editStyle" /> <View android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" /> <TextView android:id="@+id/item_code_iv3" style="@style/text_editStyle" /> <View android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" /> <TextView android:id="@+id/item_code_iv4" style="@style/text_editStyle" /> </LinearLayout> <EditText android:id="@+id/item_edittext" android:layout_width="match_parent" android:layout_height="47dp" android:background="@android:color/transparent" android:inputType="number" /> </RelativeLayout>
style
<style name="text_editStyle" > <item name="android:layout_height">47dp</item> <item name="android:layout_width">47dp</item> <item name="android:background">@mipmap/bg_verify</item> <item name="android:gravity">center</item> <item name="android:textColor">@color/common_blue_0090FF</item> <item name="android:textSize">18sp</item> </style>
View的代碼
private EditText editText;
private TextView[] TextViews;
private StringBuffer stringBuffer = new StringBuffer();
private int count = 4;
private String inputContent;
public SecurityCodeView(Context context) {
this(context, null);
}
public SecurityCodeView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SecurityCodeView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TextViews = new TextView[4];
View.inflate(context, R.layout.view_security_code, this);
editText = (EditText) findViewById(R.id.item_edittext);
TextViews[0] = (TextView) findViewById(R.id.item_code_iv1);
TextViews[1] = (TextView) findViewById(R.id.item_code_iv2);
TextViews[2] = (TextView) findViewById(R.id.item_code_iv3);
TextViews[3] = (TextView) findViewById(R.id.item_code_iv4);
editText.setCursorVisible(false);//將光標(biāo)隱藏
setListener();
}
/**
* 清空輸入內(nèi)容
*/
public void clearEditText() {
stringBuffer.delete(0, stringBuffer.length());
inputContent = stringBuffer.toString();
for (int i = 0; i < TextViews.length; i++) {
TextViews[i].setText("");
TextViews[i].setBackgroundResource(R.mipmap.bg_verify);
}
}
private InputCompleteListener inputCompleteListener;
public void setInputCompleteListener(InputCompleteListener inputCompleteListener) {
this.inputCompleteListener = inputCompleteListener;
}
public interface InputCompleteListener {
void inputComplete();
void deleteContent(boolean isDelete);
}
/**
* 獲取輸入文本
*
* @return
*/
public String getEditContent() {
return inputContent;
}
監(jiān)聽代碼
private void setListener() {
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) {
//重點(diǎn) 如果字符不為""時才進(jìn)行操作
if (!editable.toString().equals("")) {
if (stringBuffer.length() > 3) {
//當(dāng)文本長度大于3位時edittext置空
editText.setText("");
return;
} else {
//將文字添加到StringBuffer中
stringBuffer.append(editable);
editText.setText("");//添加后將EditText置空 造成沒有文字輸入的錯局
// Log.e("TAG", "afterTextChanged: stringBuffer is " + stringBuffer);
count = stringBuffer.length();//記錄stringbuffer的長度
inputContent = stringBuffer.toString();
if (stringBuffer.length() == 4) {
//文字長度位4 則調(diào)用完成輸入的監(jiān)聽
if (inputCompleteListener != null) {
inputCompleteListener.inputComplete();
}
}
}
for (int i = 0; i < stringBuffer.length(); i++) {
TextViews[i].setText(String.valueOf(inputContent.charAt(i)));
TextViews[i].setBackgroundResource(R.mipmap.bg_verify_press);
}
}
}
});
editText.setOnKeyListener(new OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_DEL
&& event.getAction() == KeyEvent.ACTION_DOWN) {
if (onKeyDelete()) return true;
return true;
}
return false;
}
});
}
public boolean onKeyDelete() {
if (count == 0) {
count = 4;
return true;
}
if (stringBuffer.length() > 0) {
//刪除相應(yīng)位置的字符
stringBuffer.delete((count - 1), count);
count--;
// Log.e(TAG, "afterTextChanged: stringBuffer is " + stringBuffer);
inputContent = stringBuffer.toString();
TextViews[stringBuffer.length()].setText("");
TextViews[stringBuffer.length()].setBackgroundResource(R.mipmap.bg_verify);
if (inputCompleteListener != null)
inputCompleteListener.deleteContent(true);//有刪除就通知manger
}
return false;
}
自定義的EditText到這了算是結(jié)束了
彈出框的布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="283dp" android:layout_height="273dp" android:layout_gravity="center" android:layout_marginBottom="50dp" android:background="@mipmap/bg_view1" android:orientation="vertical"> <include layout="@layout/layout_titile" /> <com.example.admin.myapplication.SecurityCodeView android:id="@+id/scv_edittext" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_marginTop="35dp" /> <TextView android:id="@+id/tv_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_marginTop="13dp" android:text="輸入驗證碼表示同意《用戶協(xié)議》" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="25dp" android:layout_marginTop="3dp" android:orientation="horizontal"> <TextView android:id="@+id/tv_phone" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_marginTop="13dp" android:layout_weight="1" android:text="電話" /> <TextView android:id="@+id/tv_click" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_marginTop="13dp" android:text="重新發(fā)送" android:textColor="@color/colorPrimary" /> </LinearLayout> </LinearLayout>
[大體的思路,點(diǎn)擊事件之后彈出一個Dialog,然后再這個頁面進(jìn)行注冊,有可能這個Dialog會復(fù)用,或者改一些樣式(采用Builder設(shè)計模式)]
接下來自定義Dialog
要實現(xiàn)EditText的兩個接口
public class XyAlertDialog extends DialogFragment implements SecurityCodeView.InputCompleteListener {
private SecurityCodeView editText;
private TextView text;
private TextView tv_title;
private ImageView img_close;
public static final String TAG = XyAlertDialog.class.getSimpleName();
private Builder builder;
private static XyAlertDialog instance = new XyAlertDialog();
private TextView tv_phone;
private TextView tv_click;
public static XyAlertDialog getInstance() {
return instance;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
this.setCancelable(true);
setRetainInstance(true);
super.onCreate(savedInstanceState);
if (savedInstanceState != null) {
try {
if (isAdded() && getActivity() != null)
if (builder != null)
builder = (Builder) savedInstanceState.getSerializable(Builder.class.getSimpleName());
} catch (Exception e) {
}
}
}
@Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
try {
if (isAdded() && getActivity() != null)
if (builder != null)
outState.putSerializable(Builder.class.getSimpleName(), builder);
} catch (Exception e) {
Log.d(TAG, e.toString());
}
}
@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
Dialog dialog = super.onCreateDialog(savedInstanceState);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
dialog.setCanceledOnTouchOutside(false);//點(diǎn)擊旁白不消失
return dialog;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup
container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.activity_xia, container, false);
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
initViews(view);
}
private Dialog show(Activity activity, Builder builder) {
this.builder = builder;
if (!isAdded())
show(((AppCompatActivity) activity).getSupportFragmentManager(), TAG);
return getDialog();
}
private void initViews(View view) {
tv_title = (TextView) view.findViewById(R.id.tv_title);
img_close = (ImageView) view.findViewById(R.id.img_close);
editText = (SecurityCodeView) view.findViewById(R.id.scv_edittext);
text = (TextView) view.findViewById(R.id.tv_text);
tv_phone = (TextView) view.findViewById(R.id.tv_phone);
tv_click = (TextView) view.findViewById(R.id.tv_click);
editText.setInputCompleteListener(this);
tv_phone.setText(builder.getTextTitle());
img_close.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
dismiss();
}
});
tv_click.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
CountDownTimerUtils mCountDownTimerUtils = new CountDownTimerUtils(tv_click, 60000, 1000);
mCountDownTimerUtils.start();
}
});
}
public static class Builder implements Serializable {
private String positiveButtonText;
private String negativeButtonText;
private String textTitle;
private String body;
private OnPositiveClicked onPositiveClicked;
private OnNegativeClicked onNegativeClicked;
private boolean autoHide;
private int timeToHide;
private int positiveTextColor;
private int backgroundColor;
private int negativeColor;
private int titleColor;
private int bodyColor;
private Typeface titleFont;
private Typeface bodyFont;
private Typeface positiveButtonFont;
private Typeface negativeButtonFont;
private Typeface alertFont;
private Context context;
private PanelGravity buttonsGravity;
public PanelGravity getButtonsGravity() {
return buttonsGravity;
}
public Builder setButtonsGravity(PanelGravity buttonsGravity) {
this.buttonsGravity = buttonsGravity;
return this;
}
public Typeface getAlertFont() {
return alertFont;
}
public Builder setAlertFont(String alertFont) {
this.alertFont = Typeface.createFromAsset(context.getAssets(), alertFont);
return this;
}
public Typeface getPositiveButtonFont() {
return positiveButtonFont;
}
public Builder setPositiveButtonFont(String positiveButtonFont) {
this.positiveButtonFont = Typeface.createFromAsset(context.getAssets(), positiveButtonFont);
return this;
}
public Typeface getNegativeButtonFont() {
return negativeButtonFont;
}
public Builder setNegativeButtonFont(String negativeButtonFont) {
this.negativeButtonFont = Typeface.createFromAsset(context.getAssets(), negativeButtonFont);
return this;
}
public Typeface getTitleFont() {
return titleFont;
}
public Builder setTitleFont(String titleFontPath) {
this.titleFont = Typeface.createFromAsset(context.getAssets(), titleFontPath);
return this;
}
public Typeface getBodyFont() {
return bodyFont;
}
public Builder setBodyFont(String bodyFontPath) {
this.bodyFont = Typeface.createFromAsset(context.getAssets(), bodyFontPath);
return this;
}
public int getTimeToHide() {
return timeToHide;
}
public Builder setTimeToHide(int timeToHide) {
this.timeToHide = timeToHide;
return this;
}
public boolean isAutoHide() {
return autoHide;
}
public Builder setAutoHide(boolean autoHide) {
this.autoHide = autoHide;
return this;
}
public Context getContext() {
return context;
}
public Builder setActivity(Context context) {
this.context = context;
return this;
}
public Builder(Context context) {
this.context = context;
}
public void setCancelable(boolean flag) {
throw new RuntimeException("Stub!");
}
public int getPositiveTextColor() {
return positiveTextColor;
}
public Builder setPositiveColor(int positiveTextColor) {
this.positiveTextColor = positiveTextColor;
return this;
}
public int getBackgroundColor() {
return backgroundColor;
}
public Builder setBackgroundColor(int backgroundColor) {
this.backgroundColor = backgroundColor;
return this;
}
public int getNegativeColor() {
return negativeColor;
}
public Builder setNegativeColor(int negativeColor) {
this.negativeColor = negativeColor;
return this;
}
public int getTitleColor() {
return titleColor;
}
public Builder setTitleColor(int titleColor) {
this.titleColor = titleColor;
return this;
}
public int getBodyColor() {
return bodyColor;
}
public Builder setBodyColor(int bodyColor) {
this.bodyColor = bodyColor;
return this;
}
public String getPositiveButtonText() {
return positiveButtonText;
}
public Builder setPositiveButtonText(int positiveButtonText) {
this.positiveButtonText = context.getString(positiveButtonText);
return this;
}
public Builder setPositiveButtonText(String positiveButtonText) {
this.positiveButtonText = positiveButtonText;
return this;
}
public String getNegativeButtonText() {
return negativeButtonText;
}
public Builder setNegativeButtonText(String negativeButtonText) {
this.negativeButtonText = negativeButtonText;
return this;
}
public Builder setNegativeButtonText(int negativeButtonText) {
this.negativeButtonText = context.getString(negativeButtonText);
return this;
}
public String getTextTitle() {
return textTitle;
}
public Builder setTextTitle(String textTitle) {
this.textTitle = textTitle;
return this;
}
public Builder setTextTitle(int textTitle) {
this.textTitle = context.getString(textTitle);
return this;
}
public String getBody() {
return body;
}
public Builder setBody(String body) {
this.body = body;
return this;
}
public Builder setBody(int body) {
this.body = context.getString(body);
return this;
}
public OnPositiveClicked getOnPositiveClicked() {
return onPositiveClicked;
}
public Builder setOnPositiveClicked(OnPositiveClicked onPositiveClicked) {
this.onPositiveClicked = onPositiveClicked;
return this;
}
public OnNegativeClicked getOnNegativeClicked() {
return onNegativeClicked;
}
public Builder setOnNegativeClicked(OnNegativeClicked onNegativeClicked) {
this.onNegativeClicked = onNegativeClicked;
return this;
}
public Builder build() {
return this;
}
public Dialog show() {
return XyAlertDialog.getInstance().show(((Activity) context), this);
}
}
@Override
public void onPause() {
if (isAdded() && getActivity() != null) {
builder = null;
}
super.onPause();
}
public interface OnPositiveClicked {
void OnClick(View view, Dialog dialog);
}
public interface OnNegativeClicked {
void OnClick(View view, Dialog dialog);
}
public enum PanelGravity {
LEFT,
RIGHT,
CENTER
}
//EditText的接口
@Override
public void inputComplete() {
if (!editText.getEditContent().equals("1234")) {
text.setText("驗證碼輸入錯誤");
text.setTextColor(Color.RED);
}
}
@Override
public void deleteContent(boolean isDelete) {
if (isDelete) {
text.setText("輸入驗證碼表示同意《用戶協(xié)議》");
text.setTextColor(Color.BLACK);
}
}
}
至于那個自定義的CountDownTimer在這里有介紹
Android實現(xiàn)點(diǎn)擊獲取驗證碼60秒后重新獲取功能
源碼地址：Android自定義方框EditText注冊驗證碼
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Android BottomNavigationView與Fragment重建與重疊問題解決方法探索
這篇文章主要介紹了Android BottomNavigationView與Fragment重建與重疊問題解決，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2023-01-01
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)動態(tài)曲線繪制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了通過實例解析android Activity啟動過程,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)圓形漸變加載進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
詳解Android如何設(shè)計一個全局可調(diào)用的ViewModel對象
很多時候我們需要維護(hù)一個全局可用的ViewModel，因為這樣可以維護(hù)全局同一份數(shù)據(jù)源，且方便使用協(xié)程綁定App的生命周期，那如何設(shè)計全局可用的ViewModel對象，文中介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
Android 動態(tài)添加Fragment的實例代碼
這篇文章主要介紹了Android 動態(tài)添加Fragment的實例代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了android實現(xiàn)加載動畫對話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
Android 詳解Studio引用Library與導(dǎo)入jar
這篇文章主要介紹了Android Studio引用Library與導(dǎo)入jar的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細(xì)介紹了OpenGL Shader實例分析第4篇，實現(xiàn)閃光效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
Android使用OKhttp3實現(xiàn)登錄注冊功能+springboot搭建后端的詳細(xì)過程
這篇教程主要實現(xiàn)Android使用OKhttp3實現(xiàn)登錄注冊的功能，后端使用SSM框架，本文通過實例圖文相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-07-07