仿支付寶輸入框+輸入鍵盤
阿新 • • 發佈：2019-02-10
1、輸入框。
public class CustomEditor extends View { private Paint linePaint = new Paint(); private Paint pwPaint = new Paint(); // 密碼 private StringBuffer password = new StringBuffer(); private int mWidth = 0; private int mHeight = 0; private RectF oval = new RectF(); // 圓角物件 // 密碼圓點半徑 private int cornerRadius = 20; // 邊框線寬 private int mStrokeWidth = 2; public CustomEditor(Context context) { this(context, null); } public CustomEditor(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CustomEditor(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { pwPaint.setColor(Color.parseColor("#3e3e3e")); pwPaint.setAntiAlias(true); pwPaint.setStyle(Style.FILL); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); mWidth = getMeasuredWidth(); mHeight = getMeasuredHeight(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 畫最外層框 drawBorder(canvas); // 畫分割線 drawCuttingLine(canvas); // 畫密碼 drawPassWord(password, canvas); } private void drawPassWord(StringBuffer password, Canvas canvas) { for (int i = 0; i < password.length(); i++) { canvas.drawCircle((mWidth - mStrokeWidth) * (i * 2 + 1) / 12, (mHeight - mStrokeWidth) / 2, mHeight / 8, pwPaint); } } private void drawBorder(Canvas canvas) { linePaint.setColor(Color.parseColor("#acacac")); linePaint.setStrokeWidth(mStrokeWidth); linePaint.setAntiAlias(true); linePaint.setStyle(Style.STROKE); canvas.drawLine(cornerRadius, 0, mWidth - cornerRadius - mStrokeWidth, 0, linePaint); canvas.drawLine(0, cornerRadius, 0, mHeight - cornerRadius, linePaint); canvas.drawLine(mWidth - mStrokeWidth, cornerRadius, mWidth - mStrokeWidth, mHeight - cornerRadius, linePaint); canvas.drawLine(cornerRadius, mHeight - mStrokeWidth, mWidth - cornerRadius, mHeight - mStrokeWidth, linePaint); oval.left = 0; oval.top = 0; oval.right = cornerRadius * 2; oval.bottom = cornerRadius * 2; canvas.drawArc(oval, 180, 90, false, linePaint); oval.left = mWidth - cornerRadius * 2 - mStrokeWidth; oval.top = 0; oval.right = mWidth - mStrokeWidth; oval.bottom = cornerRadius * 2; canvas.drawArc(oval, 270, 90, false, linePaint); oval.left = 0; oval.top = mHeight - cornerRadius * 2 - mStrokeWidth; oval.right = cornerRadius * 2 + mStrokeWidth; oval.bottom = mHeight - mStrokeWidth; canvas.drawArc(oval, 90, 90, false, linePaint); oval.left = mWidth - cornerRadius * 2 - mStrokeWidth; oval.top = mHeight - cornerRadius * 2 - mStrokeWidth; oval.right = mWidth - mStrokeWidth; oval.bottom = mHeight - mStrokeWidth; canvas.drawArc(oval, 0, 90, false, linePaint); } private void drawCuttingLine(Canvas canvas) { linePaint.setColor(Color.parseColor("#d9d9d9")); linePaint.setStrokeWidth(1); linePaint.setAntiAlias(true); for (int i = 1; i < 6; i++) { canvas.drawLine(mWidth * i / 6, 0, mWidth * i / 6, mHeight - 2, linePaint); } } public String getPassword() { return password.toString(); } public void setPassword(int password) { // 如果為-1則刪除 if (password == -1) { if (this.password.length() != 0) { this.password.deleteCharAt(this.password.length() - 1); } } else { if (this.password.length() < 6) { this.password.append(password); } } if (this.password.length() == 6) { onPasswordSixListener.isSix(this.password.toString()); } invalidate(); } public OnPasswordSixListener onPasswordSixListener; public void setOnPasswordSixListener(OnPasswordSixListener onPasswordSixListener) { this.onPasswordSixListener = onPasswordSixListener; } // 監聽是否已達到6位數 public interface OnPasswordSixListener { public void isSix(String password); } }
2、鍵盤。
3、引用。public class CustomKeyBoard extends View { private Paint textPaint = new Paint(); private Paint linePaint = new Paint(); private Paint linePaint2 = new Paint(); private int mWidth = 0; private int mHeight = 0; private int select = -2; // 鬆開數字 private static final int SELECT_NUMBER = -2; // 鬆開狀態 private static final int SELECT_STATE = 1; public OnKeyBoardClickLitener onKeyBoardClickLitener; public CustomKeyBoard(Context context) { super(context); } public CustomKeyBoard(Context context, AttributeSet attrs) { super(context, attrs); } public CustomKeyBoard(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); mWidth = getMeasuredWidth(); mHeight = getMeasuredHeight(); textPaint.setColor(Color.BLACK); textPaint.setTextSize(mHeight / 7); textPaint.setAntiAlias(true); linePaint.setAntiAlias(true); linePaint.setStrokeWidth(1); linePaint.setStyle(Style.FILL); linePaint2.setStrokeWidth(4); linePaint2.setColor(Color.BLACK); linePaint2.setStyle(Style.FILL); linePaint2.setAntiAlias(true); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawColor(Color.WHITE); // 判斷是否進行了點選 // 畫灰色塊 linePaint.setColor(Color.parseColor("#d2d6db")); if (select <= 9 && select > 0) { canvas.drawRect(mWidth * (float) ((select - 1) % 3) / 3, // mHeight * (float) ((select - 1) / 3) / 4 + 1, // mWidth * (float) (((select - 1) % 3) + 1) / 3, // mHeight * (float) (((select - 1) / 3) + 1) / 4, linePaint); } else if (select == 0) { canvas.drawRect((float) mWidth / 3, mHeight * (float) 3 / 4 + 1, mWidth * (float) 2 / 3, mHeight, linePaint); } linePaint.setColor(Color.parseColor("#8c8c8c")); // 畫豎線 canvas.drawLine(mWidth - 1, 0, mWidth - 1, mHeight, linePaint); // 畫橫線 canvas.drawLine(0, mHeight - 1, mWidth, mHeight - 1, linePaint); for (int i = 0; i < 9; i++) { // 畫豎線 if (i < 3) { canvas.drawLine(mWidth * i / 3, 0, mWidth * i / 3, mHeight, linePaint); } // 畫橫線 if (i < 4) { canvas.drawLine(0, mHeight * i / 4, mWidth, mHeight * i / 4, linePaint); } // 畫數字1~9 canvas.drawText(String.valueOf(i + 1), mWidth * (float) ((3 + 2 * ((i % 3) - 1))) / 6 - 15, mHeight * (float) ((1 + 2 * (i / 3))) / 8 + mHeight / 24, textPaint); } // 畫0 canvas.drawText("0", mWidth / 2 - 15, mHeight * 7 / 8 + mHeight / 24, textPaint); // 畫灰色塊 linePaint.setColor(Color.parseColor("#d2d6db")); canvas.drawRect(1, mHeight * 3 / 4 + 1, mWidth / 3, mHeight - 1, linePaint); canvas.drawRect(mWidth * 2 / 3 + 1, mHeight * 3 / 4 + 1, mWidth - 1, mHeight - 1, linePaint); // 畫取消符號 // 向上傾斜 canvas.drawLine(mWidth * (float) 50 / 63, // mHeight * 7 / 8, // mWidth * ((float) 50 / 63 + (float) 1 / 42), // mHeight * ((float) 7 / 8 - (float) 5 / 144), linePaint2); // 上面那一橫 canvas.drawLine(mWidth * ((float) 50 / 63 + (float) 1 / 42), // mHeight * ((float) 7 / 8 - (float) 5 / 144), // mWidth * ((float) 50 / 63 + (float) 1 / 42 + (float) 1 / 21), // mHeight * ((float) 7 / 8 - (float) 5 / 144), linePaint2); // 向下傾斜 canvas.drawLine(mWidth * (float) 50 / 63, // mHeight * 7 / 8, // mWidth * ((float) 50 / 63 + (float) 1 / 42), // mHeight * ((float) 7 / 8 + (float) 5 / 144), linePaint2); // 下面那一橫 canvas.drawLine(mWidth * ((float) 50 / 63 + (float) 1 / 42), // mHeight * ((float) 7 / 8 + (float) 5 / 144), // mWidth * ((float) 50 / 63 + (float) 1 / 42 + (float) 1 / 21), // mHeight * ((float) 7 / 8 + (float) 5 / 144), linePaint2); // 垂直線 canvas.drawLine(mWidth * ((float) 50 / 63 + (float) 1 / 42 + (float) 1 / 21), // mHeight * ((float) 7 / 8 - (float) 5 / 144), // mWidth * ((float) 50 / 63 + (float) 1 / 42 + (float) 1 / 21), // mHeight * ((float) 7 / 8 + (float) 5 / 144), linePaint2); // 叉叉X canvas.drawLine(mWidth * ((float) 50 / 63 + (float) 1 / 42 + (float) 1 / 84), // mHeight * ((float) 7 / 8 - (float) 5 / 144) + mWidth * (float) 1 / 84, // mWidth * ((float) 50 / 63 + (float) 1 / 42 + (float) 1 / 21 - (float) 1 / 84), // mHeight * ((float) 7 / 8 + (float) 5 / 144) - mWidth * (float) 1 / 84, linePaint2); canvas.drawLine(mWidth * ((float) 50 / 63 + (float) 1 / 42 + (float) 1 / 84), // mHeight * ((float) 7 / 8 + (float) 5 / 144) - mWidth * (float) 1 / 84, // mWidth * ((float) 50 / 63 + (float) 1 / 42 + (float) 1 / 21 - (float) 1 / 84), // mHeight * ((float) 7 / 8 - (float) 5 / 144) + mWidth * (float) 1 / 84, linePaint2); } @SuppressLint("ClickableViewAccessibility") @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: float pointX = event.getX(); float pointY = event.getY(); select = getNumber(pointX, pointY); // // 通知系統更新介面,相當於呼叫了onDraw函式 postInvalidate(); return true; case MotionEvent.ACTION_UP: Message msg = new Message(); msg.what = SELECT_STATE; msg.arg1 = select; handler.sendMessage(msg); return true; default: break; } return super.onTouchEvent(event); } @SuppressLint("HandlerLeak") Handler handler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); switch (msg.what) { case SELECT_STATE: if (msg.arg1 != SELECT_NUMBER) { onKeyBoardClickLitener.getNumber(msg.arg1); } select = SELECT_NUMBER; // 通知系統更新介面,相當於呼叫了onDraw函式 postInvalidateDelayed(50); break; default: break; } } }; /** * 得到點選的數字 * * @param pointX * @param pointY * @return */ private int getNumber(float pointX, float pointY) { if (pointX >= mWidth * ((float) 1 / 3) && pointX < mWidth * ((float) 2 / 3) && pointY >= mHeight * ((float) 3 / 4) && pointY < mHeight) { return 0; } if (pointX >= mWidth * ((float) 2 / 3) && pointX < mWidth && pointY >= mHeight * ((float) 3 / 4) && pointY < mHeight) { return -1; } for (int j = 1; j < 4; j++) { for (int i = 0; i < 3; i++) { if (pointX >= mWidth * (float) i / 3 && pointX < mWidth * (float) (i + 1) / 3 && pointY >= mHeight * (float) (j - 1) / 4 && pointY < mHeight * (float) j / 4) { return j * 3 + i - 2; } } } return -2; } public void setOnKeyBoardClickLitener(OnKeyBoardClickLitener onKeyBoardClickLitener) { this.onKeyBoardClickLitener = onKeyBoardClickLitener; } public interface OnKeyBoardClickLitener { public void getNumber(int num); } }
4、效果圖。public class MainActivity extends Activity { CustomEditor et; CustomKeyBoard keyBoard; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); keyBoard = (CustomKeyBoard) findViewById(R.id.keyBoard); et = (CustomEditor) findViewById(R.id.et); keyBoard.setOnKeyBoardClickLitener(new CustomKeyBoard.OnKeyBoardClickLitener() { @Override public void getNumber(int num) { et.setPassword(num); } }); et.setOnPasswordSixListener(new CustomEditor.OnPasswordSixListener() { @Override public void isSix(String password) { Toast.makeText(CardActivity.this, "您的密碼是：" + password, Toast.LENGTH_SHORT).show(); } }); } }
