您好,登錄后才能下訂單哦!
這篇文章給大家介紹怎么在Android中實(shí)現(xiàn)一個(gè)自定義短信驗(yàn)證碼組件,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
1.布局實(shí)現(xiàn)
因?yàn)橐霉鈽?biāo),所以我用TextView代替了EditText,每一行顯示的驗(yàn)證碼個(gè)數(shù)由用戶決定,所以我這里用線性布局的權(quán)重,對(duì)TextView進(jìn)行控制寬度等分,然后設(shè)置選中和未選中當(dāng)前TextView的底部邊框,設(shè)置高亮顏色背景
2.接受用戶輸入
我這里使用了TextView,但是怎么接受用戶輸入的值呢。這里我直接繼承了RelativeLayout,然后添加了一個(gè)透明的EditText,覆蓋在這幾個(gè)TextView上面,用戶就可以點(diǎn)擊喚起鍵盤輸入
3.TextView如何顯示值和刪除值
我這里設(shè)置EditText的TextColor和BackgroundColor為Color.TRANSPARENT 透明,然后監(jiān)聽EditText的addTextChangedListener事件和setOnKeyListener按鍵刪除事件,然后把值添加到TextView上,就能實(shí)現(xiàn)了,然后在寫一個(gè)對(duì)外的接口。獲取到輸入的驗(yàn)證碼。
4.添加閃爍的動(dòng)畫
我這里使用了ObjectAnimator,初始化給每個(gè)TextView添加動(dòng)畫,然后在輸入的時(shí)候給當(dāng)前的TextView啟動(dòng)動(dòng)畫,取消其他TextView動(dòng)畫
具體源碼如下:
/** * @author wu_ming_zhi_bei * @date 2021/1/27 15:00 * @Notes */ public class VerificationCodeView extends RelativeLayout { private Context mContext; private RelativeLayout.LayoutParams layoutParams; private int num = 4;//驗(yàn)證碼數(shù)量 private int codeSize;//字體大小 private int codeColor;//字體顏色 private List<TextView> tvs = new ArrayList<>(); private List<String> codes = new ArrayList<>(); private EditText etCode; private InputMethodManager imm; List<ObjectAnimator> animators = new ArrayList<>(); public VerificationCodeView(Context context) { this(context,null); } public VerificationCodeView(Context context, AttributeSet attrs) { this(context,attrs,0); } public VerificationCodeView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context,attrs); } private void init(Context context, AttributeSet attrs) { this.mContext = context; imm = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE); TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.VerificationCodeView); num = a.getInteger(R.styleable.VerificationCodeView_num,4); codeSize = a.getDimensionPixelSize(R.styleable.VerificationCodeView_codeSize,18); codeColor = a.getColor(R.styleable.VerificationCodeView_codeColor,getResources().getColor(R.color.theme_color)); //初始化一個(gè)大的LinearLayout來存放驗(yàn)證碼 LinearLayout codeBox = new LinearLayout(mContext); codeBox.setOrientation(LinearLayout.HORIZONTAL); codeBox.setGravity(Gravity.CENTER); //添加方塊 for(int i=0;i<num;i++){ TextView tv = new TextView(mContext); tv.setTextSize(codeSize); tv.setTextColor(codeColor); tv.setGravity(Gravity.CENTER); tv.setPadding(0,0,0,10); LinearLayout.LayoutParams param = new LinearLayout.LayoutParams( LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, 1); param.gravity = Gravity.CENTER; param.rightMargin = 20; param.leftMargin = 20; param.topMargin = 20; param.bottomMargin = 20; tv.setLayoutParams(param); //默認(rèn)第一個(gè)選中 if(i==0){ tv.setText("|"); tv.setBackground(mContext.getResources().getDrawable(R.drawable.code_border_current_bottom)); }else{ tv.setBackground(mContext.getResources().getDrawable(R.drawable.code_border_bottom)); } codeBox.addView(tv); tvs.add(tv);//添加到數(shù)組 } layoutParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); //添加codebox的位置在組件的最上面 layoutParams.addRule(RelativeLayout.ALIGN_PARENT_TOP,TRUE); layoutParams.setMargins(60,0,60,0); codeBox.setLayoutParams(layoutParams); //添加Edit etCode = new EditText(mContext); etCode.setLayoutParams(layoutParams); etCode.setLines(1); etCode.setMaxLines(1); etCode.setTextColor(Color.TRANSPARENT); etCode.setBackgroundColor(Color.TRANSPARENT); etCode.setCursorVisible(false); //添加edit監(jiān)聽 etCode.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) { if(editable != null && editable.length()>0) { etCode.setText("");//清空數(shù)據(jù) if(codes.size() < num){ codes.add(editable.toString()); showCode(); } } } }); // 監(jiān)聽驗(yàn)證碼刪除按鍵 etCode.setOnKeyListener(new View.OnKeyListener() { @Override public boolean onKey(View view, int keyCode, KeyEvent keyEvent) { if (keyCode == KeyEvent.KEYCODE_DEL && keyEvent.getAction() == KeyEvent.ACTION_DOWN && codes.size()>0) { codes.remove(codes.size()-1); showCode(); return true; } return false; } }); addView(codeBox); addView(etCode); addAnimation();//添加?xùn)|安湖 setTwinkle();//開啟動(dòng)畫 } //顯示驗(yàn)證碼 private void showCode(){ int size = codes.size();//1 6 for(int i=0;i<num;i++){ if(size>i){ tvs.get(i).setText(codes.get(i));//添加到textview }else if(size==i){ tvs.get(i).setText("|"); }else{ tvs.get(i).setText(""); } } etCode.setFocusable(true); etCode.requestFocus(); etCode.setFocusableInTouchMode(true); etCode.requestFocusFromTouch(); setTwinkle();//動(dòng)畫 callBack();//回調(diào) } private void showColor(){ int size = codes.size(); if(size==0){ tvs.get(0).setBackground(mContext.getResources().getDrawable(R.drawable.code_border_current_bottom)); }else{ for(int i=0;i<tvs.size();i++){ if(i==size-1){ tvs.get(i).setBackground(mContext.getResources().getDrawable(R.drawable.code_border_current_bottom)); }else{ tvs.get(i).setBackground(mContext.getResources().getDrawable(R.drawable.code_border_bottom)); } } } } /** * 回調(diào) */ private void callBack(){ if(onInputListener==null){ return; } if(codes.size()==num){ onInputListener.onSucess(getPhoneCode()); }else{ onInputListener.onInput(); } } //定義回調(diào) public interface OnInputListener{ void onSucess(String code); void onInput(); } private OnInputListener onInputListener; public void setOnInputListener(OnInputListener onInputListener){ this.onInputListener = onInputListener; } /** * 獲得手機(jī)號(hào)驗(yàn)證碼 * @return 驗(yàn)證碼 */ public String getPhoneCode(){ StringBuilder sb = new StringBuilder(); for (String code : codes) { sb.append(code); } return sb.toString(); } /** * 顯示鍵盤 */ public void showSoftInput(){ //顯示軟鍵盤 if(imm!=null && etCode!=null) { etCode.postDelayed(new Runnable() { @Override public void run() { imm.showSoftInput(etCode, 0); } },200); } } /** * 隱藏鍵盤 */ public void hideSoftInput(){ //顯示軟鍵盤 if(imm!=null && etCode!=null) { etCode.postDelayed(new Runnable() { @Override public void run() { imm.hideSoftInputFromWindow(etCode.getWindowToken(), 0); } },200); } } /** * 添加動(dòng)畫 */ private void addAnimation(){ for(int i=0;i<tvs.size();i++){ ObjectAnimator animator = ObjectAnimator.ofInt(tvs.get(i), "TextColor", 0x00000000, 0xfff00000); animator.setDuration(10000); final int index = i; animator.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animator) { } @Override public void onAnimationEnd(Animator animator) { } @Override public void onAnimationCancel(Animator animator) { tvs.get(index).setTextColor(codeColor); } @Override public void onAnimationRepeat(Animator animator) { } }); animator.setInterpolator(new LinearInterpolator()); animator.setRepeatCount(Animation.INFINITE); animators.add(animator); } } /** * 開啟動(dòng)畫 */ private void setTwinkle(){ int size = codes.size(); for(int i=0;i<tvs.size();i++){ if(i==size){ animators.get(i).start(); tvs.get(i).setBackground(mContext.getResources().getDrawable(R.drawable.code_border_current_bottom)); }else{ animators.get(i).cancel(); tvs.get(i).setBackground(mContext.getResources().getDrawable(R.drawable.code_border_bottom)); } } } @Override protected void onDetachedFromWindow() { super.onDetachedFromWindow(); for(int i=0;i<tvs.size();i++){ animators.get(i).cancel(); } } }
關(guān)于怎么在Android中實(shí)現(xiàn)一個(gè)自定義短信驗(yàn)證碼組件就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。