Android 仿微信支付密碼輸入框
今天在專案中遇到一個類似微信支付的密碼輸入框的需求,具體的實現要求如下:
因為這樣的一個控制元件主要實現的密碼輸入的功能,這大體上和Edittext相似,但不同於EditText的一點就是該控制元件需要顯示六個密碼框。對於控制元件在展示上不同的問題,毫無疑問,需要通過重寫onDraw方法來實現。
具體程式碼如下:
package com.example.pwdeditttextdemo; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android.util.AttributeSet; import android.widget.EditText; /** * * 自定義密碼輸入框 * * @author zhangke * */ public class PwdEditText extends EditText { /** * 間隔 */ private final int PWD_SPACING = 5; /** * 密碼大小 */ private final int PWD_SIZE = 5; /** * 密碼長度 */ private final int PWD_LENGTH = 6; /** * 上下文 */ private Context mContext; /** * 寬度 */ private int mWidth; /** * 高度 */ private int mHeight; /** * 密碼框 */ private Rect mRect; /** * 密碼畫筆 */ private Paint mPwdPaint; /** * 密碼框畫筆 */ private Paint mRectPaint; /** * 輸入的密碼長度 */ private int mInputLength; /** * 輸入結束監聽 */ private OnInputFinishListener mOnInputFinishListener; /** * 構造方法 * * @param context * @param attrs */ public PwdEditText(Context context, AttributeSet attrs) { super(context, attrs); // 初始化密碼畫筆 mPwdPaint = new Paint(); mPwdPaint.setColor(Color.BLACK); mPwdPaint.setStyle(Paint.Style.FILL); mPwdPaint.setAntiAlias(true); // 初始化密碼框 mRectPaint = new Paint(); mRectPaint.setStyle(Paint.Style.STROKE); mRectPaint.setColor(Color.LTGRAY); mRectPaint.setAntiAlias(true); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mWidth = getWidth(); mHeight = getHeight(); // 這三行程式碼非常關鍵,大家可以註釋點在看看效果 Paint paint = new Paint(); paint.setColor(Color.WHITE); canvas.drawRect(0, 0, mWidth, mHeight, paint); // 計算每個密碼框寬度 int rectWidth = (mWidth - PWD_SPACING * (PWD_LENGTH - 1)) / PWD_LENGTH; // 繪製密碼框 for (int i = 0; i < PWD_LENGTH; i++) { int left = (rectWidth + PWD_SPACING) * i; int top = 2; int right = left + rectWidth; int bottom = mHeight - top; mRect = new Rect(left, top, right, bottom); canvas.drawRect(mRect, mRectPaint); } // 繪製密碼 for (int i = 0; i < mInputLength; i++) { int cx = rectWidth / 2 + (rectWidth + PWD_SPACING) * i; int cy = mHeight / 2; canvas.drawCircle(cx, cy, PWD_SIZE, mPwdPaint); } } @Override protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) { super.onTextChanged(text, start, lengthBefore, lengthAfter); this.mInputLength = text.toString().length(); invalidate(); if (mInputLength == PWD_LENGTH && mOnInputFinishListener != null) { mOnInputFinishListener.onInputFinish(text.toString()); } } public interface OnInputFinishListener { /** * 密碼輸入結束監聽 * * @param password */ void onInputFinish(String password); } /** * 設定輸入完成監聽 * * @param onInputFinishListener */ public void setOnInputFinishListener( OnInputFinishListener onInputFinishListener) { this.mOnInputFinishListener = onInputFinishListener; } }
在程式碼中呼叫:
public class MainActivity extends Activity { private PwdEditText mPetPwd; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mPetPwd = (PwdEditText) findViewById(R.id.pet_pwd); mPetPwd.setOnInputFinishListener(new OnInputFinishListener() { @Override public void onInputFinish(String password) { Toast.makeText(MainActivity.this, password, 1).show(); } }); } }
佈局檔案:
<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:gravity="center" android:orientation="vertical" > <com.example.pwdeditttextdemo.PwdEditText android:id="@+id/pet_pwd" android:layout_width="200dp" android:layout_height="50dp" android:background="@android:color/transparent" android:cursorVisible="false" android:enabled="true" android:focusable="true" android:maxLength="6" /> </LinearLayout>
效果圖
相關推薦
Android 仿微信支付密碼輸入框
今天在專案中遇到一個類似微信支付的密碼輸入框的需求,具體的實現要求如下: 因為這樣的一個控制元件主要實現的密碼輸入的功能,這大體上和Edittext相似,但不同於EditText的一點就是該控制元件需要顯示六個密碼框。對於控制元件在展示上不同的問題,毫無疑問,需要通過重
Android 仿微信/支付寶的密碼輸入框效果(一)
前言: 最近專案中碰到了一個像支付寶跟微信一樣的輸入密碼自動驗證的一個需求,因為之前在外包待過,所以你懂的!!用過太多封裝好的控制元件了,都是略過,能實現功能就可以了,也都不管其實現過程,現在靜下心了,於是打算研究研究。 先上一張類似需求的圖片: 說明一
Android 平板中 自定義鍵盤(popuwindow) 居於螢幕左下方 仿微信的密碼輸入介面
之前部落格中,介紹過使用谷歌提供的鍵盤的一些api,可以很好地自定義鍵盤,參考我之前的部落格連結:android 自定義鍵盤 ,這個有一個侷限性,只能佔滿螢幕,無法做到只能佔一部分的需求鍵盤,如下圖我平板中的鍵盤需求:(由於公司保密需要,所以比較恐怖一點,嘿嘿)
移動端H5 仿微信支付密碼
1、先上圖 2、CSS程式碼 <style> .pwd-box{ display: none; width:310px; height: 220px;
android 仿微信、支付寶支付密碼框效果
GitHub:https://github.com/Jungerr/GridPasswordView 新增依賴: compile 'com.jungly:gridPasswordView:
仿支付寶/微信的password輸入框效果GridPasswordView解析
arp 主類 center 大小 str .get fcm android def 仿支付寶/微信的password輸入框效果GridPasswordView解析,把一些設置和一些關鍵的地方列了出來,方便大家使用,可能能夠省一部分的時間,也算是自己的積累吧。
android仿微信、QQ等聊天介面,實現點選輸入框彈出軟鍵盤、點選其他區域收起軟鍵盤,預設滑動至最低端
如圖所示,點選輸入框及選擇圖片和傳送按鈕時軟鍵盤顯示且不消失,點選其他區域,則隱藏軟鍵盤。 主要程式碼如下: override fun dispatchTouchEvent(ev: MotionEvent?): Boolean { if (ev!!.getAction() ==
Android 平板中 自己定義鍵盤(popuwindow) 居於屏幕左下方 仿微信的password輸入界面
博客 font eat str 千分位 ani odm true 需求 ? ? ? 之前博客中,介紹過使用谷歌提供的鍵盤的一些api,能夠非常好地自己定義鍵盤,參考
Android 支付密碼輸入框,自定義EditText實現密碼輸入框功能;
剛擼出來的密碼輸入框,註釋和邏輯看著挺清晰的,一些屬性還沒有新增,下個部落格把屬性新增上去; 看一下圖: 直接看程式碼吧! import android.content.Context; import android.graphics.Canvas; import android.
小程式自定義數字鍵盤|仿微信支付、支付寶支付密碼鍵盤
微信小程式自定義鍵盤外掛wcKeyboard|仿微信數字軟鍵盤|仿支付寶自定義數字鍵盤|小程式自定義模擬系統鍵盤 前段時間有開發過一個html5仿支付寶、微信支付數字鍵盤,在某些情況下自定義數字鍵盤應用還是蠻多的,比如 購物商城系統 零錢付款 ,會員卡支付,恰好微信小程式沒有內部數字鍵盤元件,這樣輸入密
Android自定義控制元件——仿微信半透明載入框
在我們的app中不免回遇到耗時操作,這時我們給個載入框進行過度,使使用者體驗大大加強。 一、CustomDialog類的編寫 package com.daqsoft.jingguan.weight; import android.app.Dialo
Android高仿微信/支付寶 掃一掃(弱光檢測掃一掃自動放大功能)
if (rawResult != null) { // Don't log the barcode contents for security. long end = System.currentTimeMillis(); Log.d(T
Android 仿微信調用第三方應用導航(百度,高德、騰訊)
detail decorview fcm onclick api 描述 log def repr 實現目標 先來一張微信功能截圖看看要做什麽 其實就是有一個目的地,點擊目的地的時候彈出可選擇的應用進行導航。 大腦動一下,要實現這個功能應該大體分成兩步: 底部彈出可選的地
android仿微信紅包動畫、Kotlin綜合應用、Xposed模塊、炫酷下拉視覺、UC瀏覽器滑動動畫等源碼
架構分析 body oot googl short html 博文 urn 管理 Android精選源碼 仿微信打開紅包旋轉動畫 使用Kotlin編寫的Android應用,內容你想象不到 Android手機上的免Root Android系統日誌Viewer 一個能讓微
微信支付密碼忘了咋辦客服電話
jhh微信支付密碼忘了咋辦客服電話O755-32914926撥通後請再按225#鍵或者226#鍵分機號切記雖然網上經常有刷單被騙的新聞傳出,雖然有法律人士說這個行業屬於灰色,但仍算是一個不錯的選擇。因為時間自由,雖然不能賺大錢,但收入也還能讓人基本滿意,主要是如果找對平臺,投入很少收益卻不低,勝在見效快,只要
android 仿微信表情雨下落!
block private www 事件觸發 dog ase 之間 apk ces 文章鏈接:https://mp.weixin.qq.com/s/yQXn-YjEFSW1X7A7CcuaVg 眾所周知,微信聊天中我們輸入一些關鍵詞會有表情雨下落,比如輸入「生日快樂」「
微信小程式輸入框屬性 cursor-spacing 問題
微信小程式輸入框屬性 cursor-spacing 問題 問題描述 微信小程式給輸入框提供了屬性 cursor-spacing,用處是聚焦時游標離軟鍵盤的距離,但是在安卓機子上會出現不太好使,比如,沒有達到預期的設定值,還有滑動到底部,設定的值不起作用。 解決方
微信小程式輸入框會字型顯示不全或者換行
微信小程式輸入框會字型顯示不全或者換行 問題描述 有的時候不同的裝置上會出現微信小程式輸入框表現不一致,比如:換行,字型顯示不全 解決方案 用開發者工具除錯發現,input,textarea 有預設的 weight or height,並且是 rem 為單位
類似微信的文字輸入框
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
Android 仿微信qq未讀訊息角標 BadgeView的使用
新增依賴: compile 'q.rorbin:badgeview:1.1.3' 使用方法: TextView textview = (TextView) findViewById(R.id.textview); new QBadgeView(this)