先上图
device-2018-11-01-142638.gif
自定义键盘view
public class PwdKeyboardView extends KeyboardView implements KeyboardView.OnKeyboardActionListener {
private static final int KEY_EMPTY = -10;
private int delKeyBackgroundColor = 0xffcccccc;
private Rect keyIconRect;
public PwdKeyboardView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public PwdKeyboardView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private void init(Context context) {
Keyboard keyboard = new Keyboard(context, R.xml.key_password_number);
setKeyboard(keyboard);
setEnabled(true);
setFocusable(true);
setPreviewEnabled(false); // 设置点击按键不显示预览气泡
setOnKeyboardActionListener(this);
}
@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
List<Keyboard.Key> keys = getKeyboard().getKeys();
for (Keyboard.Key key : keys) {
if (key.codes[0] == KEY_EMPTY) {
drawKeyBackground(key, canvas, getResources().getColor(R.color.colorKeyPress));
}
if (key.codes[0] == Keyboard.KEYCODE_DELETE) {
drawKeyBackground(key, canvas, getResources().getColor(R.color.colorKeyPress));
drawKeyIcon(key, canvas, getResources().getDrawable(R.mipmap.ic_delete));
}
}
}
/**
* 绘制按键的背景
*
* @param key
* @param canvas
* @param color
*/
private void drawKeyBackground(Keyboard.Key key, Canvas canvas, int color) {
ColorDrawable colorDrawable = new ColorDrawable(color);
colorDrawable.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
colorDrawable.draw(canvas);
}
/**
* 绘制按键的 icon
*
* @param key
* @param canvas
* @param iconDrawable
*/
private void drawKeyIcon(Keyboard.Key key, Canvas canvas, Drawable iconDrawable) {
if (iconDrawable == null) {
return;
}
if (keyIconRect == null || keyIconRect.isEmpty()) {
// 得到 keyicon 的显示大小，因为图片放在不同的drawable-dpi目录下，显示大小也不一样
int intrinsicWidth = iconDrawable.getIntrinsicWidth();
int intrinsicHeight = iconDrawable.getIntrinsicHeight();
int drawWidth = intrinsicWidth;
int drawHeight = intrinsicHeight;
// 限制图片的大小，防止图片按键范围
if (drawWidth > key.width) {
drawWidth = key.width;
// 此时高就按照比例缩放
drawHeight = (int) (drawWidth * 1.0f / intrinsicWidth * intrinsicHeight);
} else if (drawHeight > key.height) {
drawHeight = key.height;
drawWidth = (int) (drawHeight * 1.0f / intrinsicHeight * intrinsicWidth);
}
// 获取图片的 x,y 坐标,图片在按键的正中间
int left = key.x + key.width / 2 - drawWidth / 2;
int top = key.y + key.height / 2 - drawHeight / 2;
keyIconRect = new Rect(left, top, left + drawWidth, top + drawHeight);
}
if (keyIconRect != null && !keyIconRect.isEmpty()) {
iconDrawable.setBounds(keyIconRect);
iconDrawable.draw(canvas);
}
}
@Override
public void onPress(int primaryCode) {
}
@Override
public void onRelease(int primaryCode) {
}
@Override
public void onKey(int primaryCode, int[] keyCodes) {
// Log.d(TAG, "onKey: primaryCode = " + primaryCode + ", keyCodes = " + Arrays.toString(keyCodes));
if (primaryCode == KEY_EMPTY) {
return;
}
if (listener != null) {
if (primaryCode == Keyboard.KEYCODE_DELETE) {
listener.onDelete();
} else {
listener.onInput(String.valueOf((char) primaryCode));
}
}
}
@Override
public void onText(CharSequence charSequence) {
}
@Override
public void swipeLeft() {
}
@Override
public void swipeRight() {
}
@Override
public void swipeDown() {
}
@Override
public void swipeUp() {
}
public interface OnKeyListener {
void onInput(String text);
void onDelete();
}
private OnKeyListener listener;
public void setOnKeyListener(OnKeyListener listener) {
this.listener = listener;
}
}
自定义EditText输入框
public class PwdEditText extends EditText {
private final int STYLE_RECTANGLE = 0;
private final int STYLE_ROUND_RECTANGLE = 1;
private final int DEFAULT_STYLE = STYLE_RECTANGLE;
private final int DEFAULT_PWD_COUNT = 6;
private final float DEFAULT_STROKE_RADIUS = dp2Px(3);
private final float DEFAULT_STROKE_WIDTH = dp2Px(1);
private final int DEFAULT_STROKE_COLOR = Color.parseColor("#90cccccc");
private final int DEFAULT_DOT_COLOR = Color.BLACK;
private final float DEFAULT_DOT_RADIUS = dp2Px(4);
private int style; // 控件的样式，矩形或圆角矩形
private float strokeRadius; // 边框圆角的半径
private float strokeWidth; // 边框宽度
private int strokeColor; // 边框颜色
private int pwdDotColor; // 密码圆点颜色
private float pwdDotRadius; // 密码圆点半径
private int mWidth; // 控件宽度
private int mHeight; // 控件高度
private Paint strokePaint; // 绘制边框paint
private Paint pwdDotPaint; // 绘制密码圆点paint
private int mCount; // 密码框个数
private float cellWidth; // 每个密码框的宽度
private float halfStrokeWidth;
private int mCurInputCount; // 当前输入字符个数
public PwdEditText(Context context) {
this(context, null);
Log.i("debug", "one params");
}
/**
* 无论xml布局文件中有没有写自定义属性，都调用两个参数的构造函数
*/
public PwdEditText(Context context, AttributeSet attrs) {
super(context, attrs);
Log.i("debug", "two params");
initAttrs(context, attrs);
init();
}
/**
* 当有自定义的样式时，调用三个参数的构造函数
*/
public PwdEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
Log.i("debug", "three params");
}
/**
* 初始化自定义属性
*/
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PwdEditText);
style = typedArray.getInt(R.styleable.PwdEditText_style, DEFAULT_STYLE);
mCount = typedArray.getInt(R.styleable.PwdEditText_pwdCount, DEFAULT_PWD_COUNT);
strokeColor = typedArray.getColor(R.styleable.PwdEditText_strokeColor, DEFAULT_STROKE_COLOR);
strokeWidth = typedArray.getDimension(R.styleable.PwdEditText_strokeWidth, DEFAULT_STROKE_WIDTH);
strokeRadius = typedArray.getDimension(R.styleable.PwdEditText_strokeRadius, DEFAULT_STROKE_RADIUS);
pwdDotColor = typedArray.getColor(R.styleable.PwdEditText_dotColor, DEFAULT_DOT_COLOR);
pwdDotRadius = typedArray.getDimension(R.styleable.PwdEditText_dotRadius, DEFAULT_DOT_RADIUS);
typedArray.recycle();
}
/**
* 初始化操作
*/
private void init() {
// 初始化边框画笔
strokePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
strokePaint.setColor(strokeColor);
strokePaint.setStrokeWidth(strokeWidth);
strokePaint.setStyle(Paint.Style.STROKE);
// 初始化圆点画笔
pwdDotPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
pwdDotPaint.setStyle(Paint.Style.FILL);
pwdDotPaint.setColor(pwdDotColor);
halfStrokeWidth = strokeWidth / 2;
// 设置光标不可见
setCursorVisible(false);
// 设置限定最大长度
setFilters(new InputFilter[]{new InputFilter.LengthFilter(mCount)});
// 设置无背景
// setBackgroundColor(getResources().getColor(android.R.color.transparent));
setBackgroundColor(Color.WHITE);
setMaxLines(1);
setFocusable(false);
this.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
if (onTextChangedListener != null) {
onTextChangedListener.beforeTextChanged(s, start, count, after);
}
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if (onTextChangedListener != null) {
onTextChangedListener.onTextChanged(s, start, before, count);
}
mCurInputCount = s.toString().length();
// 输入完成的回调
if (mCurInputCount == mCount) {
if (onTextInputListener != null) {
onTextInputListener.onComplete(s.toString());
}
}
}
@Override
public void afterTextChanged(Editable s) {
if (onTextChangedListener != null) {
onTextChangedListener.afterTextChanged(s);
}
}
});
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
cellWidth = (mWidth - strokeWidth) / mCount;
}
@Override
protected void onDraw(Canvas canvas) {
// super.onDraw(canvas); // 不需要父类的绘制方法
drawStroke(canvas);
drawVerticalDivder(canvas);
drawPwdDot(canvas);
}
private void drawPwdDot(Canvas canvas) {
for (int i = 1; i <= mCurInputCount; i++) {
canvas.drawCircle(halfStrokeWidth + cellWidth / 2 + cellWidth * (i - 1), (mHeight) / 2,
pwdDotRadius, pwdDotPaint);
}
}
// 绘制竖直方向分割线
private void drawVerticalDivder(Canvas canvas) {
if (mCount == 1) {
return;
}
for (int i = 1; i < mCount; i++) {
canvas.drawLine(halfStrokeWidth + cellWidth * i, halfStrokeWidth, halfStrokeWidth + cellWidth * i,
mHeight - halfStrokeWidth, strokePaint);
}
}
private void drawStroke(Canvas canvas) {
if (style == STYLE_RECTANGLE) {
canvas.drawRect(halfStrokeWidth, halfStrokeWidth, mWidth - halfStrokeWidth,
mHeight - halfStrokeWidth, strokePaint);
} else {
RectF rectF = new RectF(halfStrokeWidth, halfStrokeWidth, mWidth - halfStrokeWidth,
mHeight - halfStrokeWidth);
canvas.drawRoundRect(rectF, strokeRadius, strokeRadius, strokePaint);
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_ENTER) {
return false;
}
return super.onKeyDown(keyCode, event);
}
private float dp2Px(int dpValue) {
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, getResources().getDisplayMetrics());
}
public interface OnTextChangedListener {
void beforeTextChanged(CharSequence s, int start, int count, int after);
void onTextChanged(CharSequence s, int start, int before, int count);
void afterTextChanged(Editable s);
}
public interface OnTextInputListener {
void onComplete(String result);
}
private OnTextInputListener onTextInputListener;
public void setOnTextInputListener(OnTextInputListener onTextInputListener) {
this.onTextInputListener = onTextInputListener;
}
private OnTextChangedListener onTextChangedListener;
public void addTextChangedListener(OnTextChangedListener listener) {
this.onTextChangedListener = listener;
}
}
PayDialogFragment
public class PayDialogFragment extends DialogFragment implements PwdEditText.OnTextInputListener {
private static final String TAG = "PayDialogFragment";
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable final ViewGroup container, @Nullable Bundle savedInstanceState) {
Log.d(TAG, "onCreateView: ");
//去掉dialog的标题，需要在setContentView()之前
getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
getDialog().setCanceledOnTouchOutside(false);
View view = inflater.inflate(R.layout.layout_pay_dialog, null);
ImageView exitImgView = view.findViewById(R.id.iv_exit);
exitImgView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
PayDialogFragment.this.dismiss();
}
});
final PwdEditText editText = view.findViewById(R.id.et_input);
editText.setOnTextInputListener(this);
PwdKeyboardView keyboardView = view.findViewById(R.id.key_board);
keyboardView.setOnKeyListener(new PwdKeyboardView.OnKeyListener() {
@Override
public void onInput(String text) {
Log.d(TAG, "onInput: text = " + text);
editText.append(text);
String content = editText.getText().toString();
Log.d(TAG, "onInput: content = " + content);
}
@Override
public void onDelete() {
Log.d(TAG, "onDelete: ");
String content = editText.getText().toString();
if (content.length() > 0) {
editText.setText(content.substring(0, content.length() - 1));
}
}
});
return view;
}
@Override
public void onStart() {
super.onStart();
Log.d(TAG, "onStart: ");
Window window = getDialog().getWindow();
WindowManager.LayoutParams lp = window.getAttributes();
lp.windowAnimations = R.style.DialogFragmentAnimation;
lp.width = WindowManager.LayoutParams.MATCH_PARENT;
lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
//设置dialog的位置在底部
lp.gravity = Gravity.BOTTOM;
window.setAttributes(lp);
//去掉dialog默认的padding
// window.getDecorView().setPadding(0, 0, 0, 0);
window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
}
@Override
public void onComplete(String result) {
Log.d(TAG, "onComplete: result = " + result);
Toast.makeText(getContext(), "input complete : " + result, Toast.LENGTH_SHORT).show();
}
}
anim dialog_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="@android:integer/config_shortAnimTime"
android:fromYDelta="100%p"
android:toYDelta="0%p" />
<alpha
android:duration="@android:integer/config_shortAnimTime"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
</set>
dialog_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="@android:integer/config_mediumAnimTime"
android:fromYDelta="0%p"
android:toYDelta="100%p" />
<alpha
android:duration="@android:integer/config_mediumAnimTime"
android:fromAlpha="1.0"
android:toAlpha="0.3" />
</set>
layout_pay_dialog.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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<ImageView
android:id="@+id/iv_exit"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:src="@drawable/ic_exit" />
<com.wawi.android.pwdkeyboardView.PwdEditText
android:id="@+id/et_input"
android:layout_width="300dp"
android:layout_height="52dp"
android:layout_below="@id/iv_exit"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
app:pwdCount="6"
app:style="roundRectangle" />
<com.wawi.android.pwdkeyboardView.PwdKeyboardView
android:id="@+id/key_board"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/et_input"
android:layout_marginTop="40dp"
android:paddingTop="0.5dp"
android:background="#E2E7ED"
android:keepScreenOn="true"
android:keyBackground="@drawable/selector_key_board"
android:keyTextColor="@android:color/black"
android:keyTextSize="26sp"
android:shadowRadius="0" />
</RelativeLayout>
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="PwdEditText">
<attr name="style" format="enum">
<enum name="rectangle" value="0" />
<enum name="roundRectangle" value="1" />
</attr>
<attr name="pwdCount" format="integer" />
<attr name="strokeRadius" format="dimension" />
<attr name="strokeWidth" format="dimension" />
<attr name="strokeColor" format="color" />
<attr name="dotColor" format="color" />
<attr name="dotRadius" format="dimension" />
</declare-styleable>
</resources>
<style name="DialogFragmentAnimation" parent="android:Animation">
<item name="android:windowEnterAnimation">@anim/dialog_in</item>
<item name="android:windowExitAnimation">@anim/dialog_out</item>
</style>
键盘xml
<?xml version="1.0" encoding="utf-8"?>
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
android:horizontalGap="1dp"
android:keyHeight="9%p"
android:keyWidth="33.3333%p"
android:verticalGap="1dp">
<Row>
<Key
android:codes="49"
android:keyLabel="1" />
<Key
android:codes="50"
android:keyLabel="2" />
<Key
android:codes="51"
android:keyLabel="3" />
</Row>
<Row>
<Key
android:codes="52"
android:keyLabel="4" />
<Key
android:codes="53"
android:keyLabel="5" />
<Key
android:codes="54"
android:keyLabel="6" />
</Row>
<Row>
<Key
android:codes="55"
android:keyLabel="7" />
<Key
android:codes="56"
android:keyLabel="8" />
<Key
android:codes="57"
android:keyLabel="9" />
</Row>
<Row>
<Key
android:codes="-10"
android:keyLabel="" />
<Key
android:codes="48"
android:keyLabel="0" />
<Key
android:codes="-5"
android:keyLabel="" />
</Row>
</Keyboard>
使用
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void pay(View view) {
PayDialogFragment payDialogFragment = new PayDialogFragment();
payDialogFragment.show(getSupportFragmentManager(), "payFragment");
}
}
结束
