Android自定義方框EditText注冊(cè)驗(yàn)證碼
先來(lái)個(gè)效果圖讓大家看一看,現(xiàn)在好多app都用類(lèi)似的注冊(cè)頁(yè)
實(shí)現(xiàn)思路
- 用一個(gè)透明的EditText與四個(gè)TextView重疊,并給TextView設(shè)置默認(rèn)背景
- 第4個(gè)TextView輸入完成后,要設(shè)置回調(diào),并且要加入增加刪除的回調(diào)
- 還要監(jiān)聽(tīng)EditText內(nèi)容的變化,獲取內(nèi)容,并且改變EditText下面的TextView的顏色
- 重新發(fā)送的是采用一個(gè)自定義的CountDownTimer類(lèi)
- 彈出效果自定義的一個(gè)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)聽(tīng)代碼
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) 如果字符不為""時(shí)才進(jìn)行操作 if (!editable.toString().equals("")) { if (stringBuffer.length() > 3) { //當(dāng)文本長(zhǎng)度大于3位時(shí)edittext置空 editText.setText(""); return; } else { //將文字添加到StringBuffer中 stringBuffer.append(editable); editText.setText("");//添加后將EditText置空 造成沒(méi)有文字輸入的錯(cuò)局 // Log.e("TAG", "afterTextChanged: stringBuffer is " + stringBuffer); count = stringBuffer.length();//記錄stringbuffer的長(zhǎng)度 inputContent = stringBuffer.toString(); if (stringBuffer.length() == 4) { //文字長(zhǎng)度位4 則調(diào)用完成輸入的監(jiān)聽(tīng) 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="輸入驗(yàn)證碼表示同意《用戶(hù)協(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="電話(huà)" /> <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)擊事件之后彈出一個(gè)Dialog,然后再這個(gè)頁(yè)面進(jìn)行注冊(cè),有可能這個(gè)Dialog會(huì)復(fù)用,或者改一些樣式(采用Builder設(shè)計(jì)模式)]
接下來(lái)自定義Dialog
要實(shí)現(xiàn)EditText的兩個(gè)接口
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("驗(yàn)證碼輸入錯(cuò)誤"); text.setTextColor(Color.RED); } } @Override public void deleteContent(boolean isDelete) { if (isDelete) { text.setText("輸入驗(yàn)證碼表示同意《用戶(hù)協(xié)議》"); text.setTextColor(Color.BLACK); } } }
至于那個(gè)自定義的CountDownTimer在這里有介紹
Android實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼60秒后重新獲取功能
源碼地址:Android自定義方框EditText注冊(cè)驗(yàn)證碼
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android自定義view制作絢麗的驗(yàn)證碼
- Android自定義控件通用驗(yàn)證碼輸入框的實(shí)現(xiàn)
- Android自定義控件深入學(xué)習(xí) Android生成隨機(jī)驗(yàn)證碼
- Android自定義View獲取注冊(cè)驗(yàn)證碼倒計(jì)時(shí)按鈕
- Android自定義Chronometer實(shí)現(xiàn)短信驗(yàn)證碼秒表倒計(jì)時(shí)功能
- Android自定義View實(shí)現(xiàn)隨機(jī)驗(yàn)證碼
- Android自定義View實(shí)現(xiàn)驗(yàn)證碼
- Android自定義控件實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)
- Android自定義View繪制隨機(jī)生成圖片驗(yàn)證碼
- Android View教程之自定義驗(yàn)證碼輸入框效果
相關(guān)文章
單獨(dú)編譯Android 源代碼中的模塊實(shí)現(xiàn)方法
本文主要講解單獨(dú)編譯Android 源代碼中的模塊,這里對(duì)Android源碼單獨(dú)編譯模塊,做出了詳細(xì)的步驟,希望能幫助研究Android 源代碼的朋友2016-08-08android使用Messenger綁定Service的多種實(shí)現(xiàn)方法
android使用Messenger綁定Service的多種實(shí)現(xiàn)方法,需要的朋友可以參考一下2013-05-05Android如何實(shí)現(xiàn)鎖屏狀態(tài)下彈窗
在鎖屏狀態(tài)下彈窗的效果我們平時(shí)并不少見(jiàn),如QQ、微信和鬧鐘等,但是Android開(kāi)發(fā)者要怎么實(shí)現(xiàn)這一功能呢?下面一起來(lái)看看。2016-08-08基于android樣式與主題(style&theme)的詳解
本篇文章是對(duì)android中的樣式與主題(style&theme)進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06為Android Studio編寫(xiě)自定義Gradle插件的教程
這篇文章主要介紹了為Android Studio編寫(xiě)自定義Gradle插件的教程,Android Studio現(xiàn)在基本上已經(jīng)成為了安卓開(kāi)發(fā)的標(biāo)配IDE,友可以參考下2016-02-02Android開(kāi)發(fā)自定義控件之折線(xiàn)圖實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Android開(kāi)發(fā)自定義控件之折線(xiàn)圖實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了Android自定義控件中折線(xiàn)圖原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05Android實(shí)現(xiàn)上下菜單雙向滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)上下菜單雙向滑動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01Android中在WebView里實(shí)現(xiàn)Javascript調(diào)用Java類(lèi)的方法
這篇文章主要介紹了Android中在WebView里實(shí)現(xiàn)Javascript調(diào)用Java類(lèi)的方法,本文直接給出示例,需要的朋友可以參考下2015-03-03Android開(kāi)發(fā)之自定義加載動(dòng)畫(huà)詳解
這篇文章主要介紹了Android開(kāi)發(fā)的自定義加載動(dòng)畫(huà),效果為一個(gè)連續(xù)的動(dòng)畫(huà),就是這個(gè)大圓不停地吞下小圓,文中示例代碼講解詳細(xì),感興趣的可以了解一下2022-03-03