怎么用Android自定義View實現(xiàn)微信支付密碼輸入框

本篇內(nèi)容介紹了“怎么用Android自定義View實現(xiàn)微信支付密碼輸入框”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

本文實例為大家分享了Android實現(xiàn)微信支付密碼輸入框的具體代碼，供大家參考，具體內(nèi)容如下

項目中使用到了支付密碼功能，其實這類界面是比較常用的，涉及支付密碼的輸入的一般都會用到對的，所以單獨(dú)地把這部分抽取出來，有需要的朋友可以拿去用哈!

效果就是支付,彈出密碼框,輸入密碼,這個過程密碼不可見,并且提供一個輸入完畢的監(jiān)聽!

這個彈出層呢,其實就是一個DialogFragment，邏輯封裝在其內(nèi)部

一.彈出層進(jìn)出動畫 (anim文件)

push_bottom_in.xml

<?xml version="1.0" encoding="utf-8"?><!-- 上下滑入式 --><set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="200" android:fromYDelta="100%p" android:toYDelta="0" /></set>

push_bottom_out.xml

<?xml version="1.0" encoding="utf-8"?><!-- 上下滑出式 --><set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="200" android:fromYDelta="0" android:toYDelta="100%p" /></set>

二.drawable資源

selector_item_pressed.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/gray_bg" android:state_pressed="true" /> <item android:drawable="@color/white" android:state_activated="false" /> <item android:drawable="@color/white" /></selector>

鍵盤的點(diǎn)擊效果

shape_dialog.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@android:color/white" /> <corners android:radius="10dp" /></shape>

彈出框樣式

三.mipmap資源

ic_arrow_down

ic_input_del

icon_del.png

四.layout布局

fragment_pay.xml

支付彈出層布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="40dp" android:layout_marginRight="40dp" android:layout_marginTop="100dp" android:background="@drawable/shape_dialog" android:orientation="vertical" android:paddingBottom="@dimen/spacing_large"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView  android:layout_width="wrap_content" android:layout_height="@dimen/text_item_height" android:layout_centerInParent="true" android:gravity="center" android:text="請輸入支付密碼" android:textSize="20sp" android:textStyle="bold" /> <!--cancel鍵--> <ImageView android:id="@+id/iv_close" android:clickable="true" android:layout_width="28dp" android:layout_height="28dp" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_marginLeft="@dimen/spacing_tiny" android:src="@mipmap/icon_del" /> </RelativeLayout> <View  /> <!--操作文字--> <TextView android:id="@+id/tv_content"  android:layout_width="wrap_content" android:layout_height="@dimen/text_item_height" android:layout_gravity="center_horizontal" android:gravity="center" android:textStyle="bold" /> <!--支付金額--> <TextView android:id="@+id/tv_content2"  android:layout_width="wrap_content" android:layout_height="@dimen/text_item_height" android:layout_gravity="center_horizontal" android:gravity="center" android:textStyle="bold" /> <!--額外扣除手續(xù)費(fèi)--> <TextView android:id="@+id/tv_content3"  android:layout_width="wrap_content" android:layout_height="@dimen/text_item_height2" android:layout_gravity="center_horizontal" android:gravity="center" /> <!--密碼輸入框--> <cn.xdeveloper.payui.PayPassWordView android:id="@+id/payPwdView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/spacing_large" android:layout_marginRight="@dimen/spacing_large" android:background="@color/white" /> </LinearLayout> <!--鍵盤--> <cn.xdeveloper.payui.PassWordInputView android:id="@+id/inputMethodView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" /></RelativeLayout>

自定義鍵盤布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/table_num" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="6" android:background="@color/gray_line" android:orientation="vertical"> <View  /> <RelativeLayout android:id="@+id/layout_hide" android:layout_width="match_parent" android:layout_height="25dp" android:background="@drawable/selector_item_pressed"> <ImageView android:layout_width="30dp" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@mipmap/ic_arrow_down" /> </RelativeLayout> <LinearLayout > <TextView android:id="@+id/btn_1"  android:layout_marginRight="@dimen/input_method_spacing" android:layout_marginTop="@dimen/input_method_spacing" android:onClick="onClick" android:tag="1" android:text="1" /> <TextView android:id="@+id/btn_2"  android:layout_marginRight="@dimen/input_method_spacing" android:layout_marginTop="@dimen/input_method_spacing" android:tag="2" android:text="2" /> <TextView android:id="@+id/btn_3"  android:layout_marginTop="@dimen/input_method_spacing" android:tag="3" android:text="3" /> </LinearLayout> <LinearLayout > <TextView android:id="@+id/btn_4"  android:layout_marginRight="@dimen/input_method_spacing" android:tag="4" android:text="4" /> <TextView android:id="@+id/btn_5"  android:layout_marginRight="@dimen/input_method_spacing" android:tag="5" android:text="5" /> <TextView android:id="@+id/btn_6"  android:tag="6" android:text="6" /> </LinearLayout> <LinearLayout > <TextView android:id="@+id/btn_7"  android:layout_marginRight="@dimen/input_method_spacing" android:tag="7" android:text="7" /> <TextView android:id="@+id/btn_8"  android:layout_marginRight="@dimen/input_method_spacing" android:tag="8" android:text="8" /> <TextView android:id="@+id/btn_9"  android:tag="9" android:text="9" /> </LinearLayout> <LinearLayout > <TextView  android:layout_marginRight="@dimen/input_method_spacing" android:background="@color/gray_btn" /> <TextView android:id="@+id/btn_0"  android:layout_marginRight="@dimen/input_method_spacing" android:tag="0" android:text="0" /> <ImageView android:id="@+id/btn_del" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:scaleType="center" android:src="@mipmap/ic_input_del" android:tag="-1" /> </LinearLayout></LinearLayout>

五.color資源

<?xml version="1.0" encoding="utf-8"?><resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="gray_text">#919191</color> <color name="gray_btn">#EBEBEB</color> <color name="gray_bg">#f0eff5</color> <color name="gray_line">#d5d1d1</color> <color name="white">#FFFFFF</color> <color name="black">#000000</color> <color name="black_text">#212121</color></resources>

六.dimen資源

<?xml version="1.0" encoding="utf-8"?><resources> <!-- 字體大小 --> <dimen name="font_larger">40sp</dimen> <dimen name="font_large">18sp</dimen> <dimen name="font_normal">15sp</dimen> <dimen name="font_small">12sp</dimen> <dimen name="font_tiny">10sp</dimen> <!-- 控件之間的距離 --> <dimen name="spacing_large">20dp</dimen> <dimen name="spacing_normal">15dp</dimen> <dimen name="spacing_small">10dp</dimen> <dimen name="spacing_tiny">10dp</dimen> <dimen name="pider_height">0.5dp</dimen> <dimen name="spacing_layout_padding">10dp</dimen> <dimen name="spacing_layout_margin">10dp</dimen> <!-- 描述性文字item項的高 --> <dimen name="text_item_height">50dp</dimen> <dimen name="text_item_height2">25dp</dimen> <dimen name="input_method_spacing">2px</dimen></resources>

七.styles樣式

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <!--底部彈框--> <style name="BottomDialog" parent="@style/Theme.AppCompat"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:windowIsFloating">true</item> <item name="android:backgroundDimEnabled">true</item> </style> <style name="AnimBottom" parent="@android:style/Animation"> <item name="android:windowEnterAnimation">@anim/push_bottom_in</item> <item name="android:windowExitAnimation">@anim/push_bottom_out</item> </style> <!-- 提示文字樣式 --> <style name="style_black_normal_text"> <item name="android:textColor">@color/black_text</item> <item name="android:textSize">@dimen/font_normal</item> <item name="android:includeFontPadding">false</item> </style> <!-- 輸入金額樣式 --> <style name="style_black_money_text"> <item name="android:textColor">@color/black_text</item> <item name="android:textSize">@dimen/font_larger</item> <item name="android:includeFontPadding">false</item> </style> <!-- 分割線樣式 --> <style name="style_separate_line"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">@dimen/pider_height</item> <item name="android:background">@color/gray_line</item> </style> <!--密碼彈出框--> <declare-styleable name="PayPassWordView"> <attr name="count" format="integer" /> <attr name="border_color" format="color" /> <attr name="dot_color" format="color" /> </declare-styleable> <!--輸入樣式--> <style name="layout_input_amount_style"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">55dp</item> <item name="android:layout_marginBottom">2px</item> <item name="android:gravity">center</item> <item name="android:orientation">horizontal</item> </style> <!--鍵盤數(shù)字--> <style name="btn_input_num_style"> <item name="android:layout_width">0dp</item> <item name="android:layout_height">match_parent</item> <item name="android:layout_weight">1</item> <item name="android:gravity">center</item> <item name="android:textSize">25sp</item> <item name="android:textColor">@color/black_text</item> <item name="android:background">@drawable/selector_item_pressed</item> </style></resources>

八.輸入鍵盤view

public class PassWordInputView extends LinearLayout implements View.OnClickListener { private InputReceiver inputReceiver; public PassWordInputView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); LayoutInflater.from(context).inflate(R.layout.view_password_input, this); initView(); } private void initView() { findViewById(R.id.btn_1).setOnClickListener(this); findViewById(R.id.btn_2).setOnClickListener(this); findViewById(R.id.btn_3).setOnClickListener(this); findViewById(R.id.btn_4).setOnClickListener(this); findViewById(R.id.btn_5).setOnClickListener(this); findViewById(R.id.btn_6).setOnClickListener(this); findViewById(R.id.btn_7).setOnClickListener(this); findViewById(R.id.btn_8).setOnClickListener(this); findViewById(R.id.btn_9).setOnClickListener(this); findViewById(R.id.btn_0).setOnClickListener(this); findViewById(R.id.btn_del).setOnClickListener(this); findViewById(R.id.layout_hide).setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { setVisibility(GONE); } }); } @Override public void onClick(View v) { String num = (String) v.getTag(); this.inputReceiver.receive(num); } /** * 設(shè)置接收器 * * @param receiver */ public void setInputReceiver(InputReceiver receiver) { this.inputReceiver = receiver; } /** * 輸入接收器 */ public interface InputReceiver { void receive(String num); }}

九.密碼框view

public class PayPassWordView extends View { private ArrayList<String> result;//輸入結(jié)果保存 private int count;//密碼位數(shù) private int size;//默認(rèn)每一格的大小 private Paint mBorderPaint;//邊界畫筆 private Paint mDotPaint;//掩蓋點(diǎn)的畫筆 private int mBorderColor;//邊界顏色 private int mDotColor;//掩蓋點(diǎn)的顏色 private RectF mRoundRect;//外面的圓角矩形 private int mRoundRadius;//圓角矩形的圓角程度 public PayPassWordView(Context context) { super(context); init(null);//初始化 } private InputCallBack inputCallBack;//輸入完成的回調(diào) private PassWordInputView inputMethodView; //輸入鍵盤 public interface InputCallBack { void onInputFinish(String result); } public PayPassWordView(Context context, AttributeSet attrs) { super(context, attrs); init(attrs); } public PayPassWordView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(attrs); } /** * 初始化相關(guān)參數(shù) */ void init(AttributeSet attrs) { final float dp = getResources().getDisplayMetrics().density; this.setFocusable(true); this.setFocusableInTouchMode(true); result = new ArrayList<>(); if (attrs != null) { TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.PayPassWordView); mBorderColor = ta.getColor(R.styleable.PayPassWordView_border_color, Color.LTGRAY); mDotColor = ta.getColor(R.styleable.PayPassWordView_dot_color, Color.BLACK); count = ta.getInt(R.styleable.PayPassWordView_count, 6); ta.recycle(); } else { mBorderColor = Color.LTGRAY; mDotColor = Color.GRAY; count = 6;//默認(rèn)6位密碼 } size = (int) (dp * 30);//默認(rèn)30dp一格 //color mBorderPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mBorderPaint.setStrokeWidth(3); mBorderPaint.setStyle(Paint.Style.STROKE); mBorderPaint.setColor(mBorderColor); mDotPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mDotPaint.setStrokeWidth(3); mDotPaint.setStyle(Paint.Style.FILL); mDotPaint.setColor(mDotColor); mRoundRect = new RectF(); mRoundRadius = (int) (5 * dp); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int w = measureWidth(widthMeasureSpec); int h = measureHeight(heightMeasureSpec); int wsize = MeasureSpec.getSize(widthMeasureSpec); int hsize = MeasureSpec.getSize(heightMeasureSpec); //寬度沒指定,但高度指定 if (w == -1) { if (h != -1) { w = h * count;//寬度=高*數(shù)量 size = h; } else {//兩個都不知道,默認(rèn)寬高 w = size * count; h = size; } } else {//寬度已知 if (h == -1) {//高度不知道 h = w / count; size = h; } } setMeasuredDimension(Math.min(w, wsize), Math.min(h, hsize)); } private int measureWidth(int widthMeasureSpec) { //寬度 int wmode = MeasureSpec.getMode(widthMeasureSpec); int wsize = MeasureSpec.getSize(widthMeasureSpec); if (wmode == MeasureSpec.AT_MOST) {//wrap_content return -1; } return wsize; } private int measureHeight(int heightMeasureSpec) { //高度 int hmode = MeasureSpec.getMode(heightMeasureSpec); int hsize = MeasureSpec.getSize(heightMeasureSpec); if (hmode == MeasureSpec.AT_MOST) {//wrap_content return -1; } return hsize; } @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) {//點(diǎn)擊控件彈出輸入鍵盤 requestFocus(); inputMethodView.setVisibility(VISIBLE); return true; } return true; } @Override protected void onFocusChanged(boolean gainFocus, int direction, Rect previouslyFocusedRect) { super.onFocusChanged(gainFocus, direction, previouslyFocusedRect); if (gainFocus) { inputMethodView.setVisibility(VISIBLE); } else { inputMethodView.setVisibility(GONE); } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); final int width = getWidth() - 2; final int height = getHeight() - 2; //先畫個圓角矩形 mRoundRect.set(0, 0, width, height); canvas.drawRoundRect(mRoundRect, 0, 0, mBorderPaint); //畫分割線 for (int i = 1; i < count; i++) { final int x = i * size; canvas.drawLine(x, 0, x, height, mBorderPaint); } //畫掩蓋點(diǎn), // 這是前面定義的變量 private ArrayList<Integer> result;//輸入結(jié)果保存 int dotRadius = size / 8;//圓圈占格子的三分之一 for (int i = 0; i < result.size(); i++) { final float x = (float) (size * (i + 0.5)); final float y = size / 2; canvas.drawCircle(x, y, dotRadius, mDotPaint); } } @Override public boolean onCheckIsTextEditor() { return true; } @Override public InputConnection onCreateInputConnection(EditorInfo outAttrs) { outAttrs.inputType = InputType.TYPE_CLASS_NUMBER;//輸入類型為數(shù)字 outAttrs.imeOptions = EditorInfo.IME_ACTION_DONE; return new MyInputConnection(this, false); } public void setInputCallBack(InputCallBack inputCallBack) { this.inputCallBack = inputCallBack; } public void clearResult() { result.clear(); invalidate(); } private class MyInputConnection extends BaseInputConnection { public MyInputConnection(View targetView, boolean fullEditor) { super(targetView, fullEditor); } @Override public boolean commitText(CharSequence text, int newCursorPosition) { //這里是接受輸入法的文本的，我們只處理數(shù)字，所以什么操作都不做 return super.commitText(text, newCursorPosition); } @Override public boolean deleteSurroundingText(int beforeLength, int afterLength) { //軟鍵盤的刪除鍵 DEL 無法直接監(jiān)聽，自己發(fā)送del事件 if (beforeLength == 1 && afterLength == 0) { return super.sendKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL))  && super.sendKeyEvent(new KeyEvent(KeyEvent.ACTION_UP, KeyEvent.KEYCODE_DEL)); } return super.deleteSurroundingText(beforeLength, afterLength); } } /** * 設(shè)置輸入鍵盤view * * @param inputMethodView */ public void setInputMethodView(PassWordInputView inputMethodView) { this.inputMethodView = inputMethodView; this.inputMethodView.setInputReceiver(new PassWordInputView.InputReceiver() { @Override public void receive(String num) { if (num.equals("-1")) {  if (!result.isEmpty()) {  result.remove(result.size() - 1);  invalidate();  } } else {  if (result.size() < count) {  result.add(num);  invalidate();  ensureFinishInput();  } } } }); } /** * 判斷是否輸入完成，輸入完成后調(diào)用callback */ void ensureFinishInput() { if (result.size() == count && inputCallBack != null) {//輸入完成 StringBuffer sb = new StringBuffer(); for (String i : result) { sb.append(i); } inputCallBack.onInputFinish(sb.toString()); } } /** * 獲取輸入文字 * * @return */ public String getInputText() { if (result.size() == count) { StringBuffer sb = new StringBuffer(); for (String i : result) { sb.append(i); } return sb.toString(); } return null; }}

十.支付彈出層

public class PayFragment extends DialogFragment implements View.OnClickListener { public static final String EXTRA_CONTENT = "extra_content"; //提示框內(nèi)容 public static final String EXTRA_CONTENT2 = "extra_content2"; //提示框內(nèi)容 public static final String EXTRA_CONTENT3 = "extra_content3"; //提示框內(nèi)容 private PayPassWordView psw_input; private PayPassWordView.InputCallBack inputCallBack; @NonNull @Override public Dialog onCreateDialog(Bundle savedInstanceState) { // 使用不帶Theme的構(gòu)造器, 獲得的dialog邊框距離屏幕仍有幾毫米的縫隙。 Dialog dialog = new Dialog(getActivity(), R.style.BottomDialog); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // 設(shè)置Content前設(shè)定 dialog.setContentView(R.layout.fragment_pay); dialog.setCanceledOnTouchOutside(true); //外部點(diǎn)擊取消 // 設(shè)置寬度為屏寬, 靠近屏幕底部。 final Window window = dialog.getWindow(); window.setWindowAnimations(R.style.AnimBottom); window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); final WindowManager.LayoutParams lp = window.getAttributes(); lp.width = WindowManager.LayoutParams.MATCH_PARENT; // 寬度持平 lp.gravity = Gravity.TOP; window.setAttributes(lp); initView(dialog); return dialog; } private void initView(Dialog dialog) { Bundle bundle = getArguments(); if (bundle != null) { TextView tv_content = (TextView) dialog.findViewById(R.id.tv_content); TextView tv_content2 = (TextView) dialog.findViewById(R.id.tv_content2); TextView tv_content3 = (TextView) dialog.findViewById(R.id.tv_content3); tv_content.setText(bundle.getString(EXTRA_CONTENT)); tv_content2.setText(bundle.getString(EXTRA_CONTENT2)); tv_content3.setText(bundle.getString(EXTRA_CONTENT3)); } psw_input = (PayPassWordView) dialog.findViewById(R.id.payPwdView); PassWordInputView inputMethodView = (PassWordInputView) dialog.findViewById(R.id.inputMethodView); psw_input.setInputMethodView(inputMethodView); psw_input.setInputCallBack(inputCallBack); dialog.findViewById(R.id.iv_close).setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.iv_close: dismiss(); break; } } /** * 設(shè)置輸入回調(diào) * * @param inputCallBack */ public void setPaySuccessCallBack(PayPassWordView.InputCallBack inputCallBack) { this.inputCallBack = inputCallBack; }}

十一.邏輯代碼中直接引用

public class MainActivity extends AppCompatActivity implements PayPassWordView.InputCallBack, View.OnClickListener { private PayFragment fragment; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findViewById(R.id.btn_pay).setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.btn_pay: Bundle bundle = new Bundle(); bundle.putString(PayFragment.EXTRA_CONTENT, "提現(xiàn)"); bundle.putString(PayFragment.EXTRA_CONTENT2, "&yen;" + 1.00); bundle.putString(PayFragment.EXTRA_CONTENT3, "額外扣除0.1手續(xù)費(fèi)"); fragment = new PayFragment();//創(chuàng)建支付彈出框?qū)嵗?fragment.setArguments(bundle);//傳遞信息 fragment.setPaySuccessCallBack(MainActivity.this);//設(shè)置回調(diào) fragment.show(getSupportFragmentManager(), "Pay"); break; } } @Override public void onInputFinish(String result) { Toast.makeText(this, result, Toast.LENGTH_SHORT).show(); fragment.dismiss();//窗口消失 }}

什么都沒有，只有一個點(diǎn)擊事件而已.

“怎么用Android自定義View實現(xiàn)微信支付密碼輸入框”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！