自定义支付键盘（仿支付宝）

摘要: 自定义支付密码键盘，仿支付宝。

参考http://blog.csdn.net/a_running_wolf/article/details/50043421 等
公司需求写的仿支付宝支付键盘，在网上找了些代码整理。效果图如下：



说明：

输入密码的键盘是自定义的控件；

本自定义键盘的显示输入密码框部分和键盘部分使分离的，通过CustomKeyBoardUtil将两部分连接起来。这样写的好处是你可以自定义界面的其他部分，对输入键盘没有影响。

自定义键盘控件

首先我们先实现自定义键盘，其布局文件custom_keyboard.xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EEEEEE"
android:gravity="bottom">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="visible">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:id="@+id/tv_custom_keyboard_keys1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1px"
android:layout_weight="1"
android:background="@drawable/bg_keyboard_keys"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="1"
android:textSize="25sp" />

<TextView
android:id="@+id/tv_custom_keyboard_keys2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1px"
android:layout_weight="1"
android:background="@drawable/bg_keyboard_keys"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="2"
android:textSize="25sp" />

<TextView
android:id="@+id/tv_custom_keyboard_keys3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1px"
android:layout_weight="1"
android:background="@drawable/bg_keyboard_keys"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="3"
android:textSize="25sp" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:id="@+id/tv_custom_keyboard_keys4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1px"
android:layout_weight="1"
android:background="@drawable/bg_keyboard_keys"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="4"
android:textSize="25sp" />

<TextView
android:id="@+id/tv_custom_keyboard_keys5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1px"
android:layout_weight="1"
android:background="@drawable/bg_keyboard_keys"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="5"
android:textSize="25sp" />

<TextView
android:id="@+id/tv_custom_keyboard_keys6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1px"
android:layout_weight="1"
android:background="@drawable/bg_keyboard_keys"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="6"
android:textSize="25sp" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:id="@+id/tv_custom_keyboard_keys7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1px"
android:layout_weight="1"
android:background="@drawable/bg_keyboard_keys"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="7"
android:textSize="25sp" />

<TextView
android:id="@+id/tv_custom_keyboard_keys8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1px"
android:layout_weight="1"
android:background="@drawable/bg_keyboard_keys"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="8"
android:textSize="25sp" />

<TextView
android:id="@+id/tv_custom_keyboard_keys9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1px"
android:layout_weight="1"
android:background="@drawable/bg_keyboard_keys"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="9"
android:textSize="25sp" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1px"
android:layout_weight="1"
android:background="@drawable/bg_keyboard_keys"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text=""
android:textSize="25sp" />

<TextView
android:id="@+id/tv_custom_keyboard_keys0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1px"
android:layout_weight="1"
android:background="@drawable/bg_keyboard_keys"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="0"
android:textSize="25sp" />

<ImageView
android:id="@+id/iv_custom_keyboard_keys_delete"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="1px"
android:layout_weight="1"
android:background="@drawable/bg_keyboard_keys"
android:src="@drawable/keyboard_delete"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:textSize="25sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

在custom_keyboard.xml中需要的数字按钮的背景，即android:background="@drawable/bg_keyboard_keys"。布局如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape>
<solid android:color="#C0C4C7" />
</shape>
</item>
<item android:state_enabled="true" android:state_pressed="false">
<shape>
<solid android:color="@android:color/white" />
</shape>
</item>
<item android:state_enabled="true" android:state_pressed="true">
<shape>
<solid android:color="#C0C4C7" />
</shape>
</item>
</selector>

下面来完成我们自定义键盘控件CustomKeyboardView.java，以及实现键盘控件和输入密码框的关联的帮助类CustomKeyBoardUtil.java。

package com.hjqjl.paypwdkeyboard;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class CustomKeyboardView extends RelativeLayout {
Context context;
private TextView tv0;
private TextView tv1;
private TextView tv2;
private TextView tv3;
private TextView tv4;
private TextView tv5;
private TextView tv6;
private TextView tv7;
private TextView tv8;
private TextView tv9;
private ImageView ivDelete;

public CustomKeyboardView(Context context) {
this(context, null);
}

public CustomKeyboardView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
View view = View.inflate(context, R.layout.custom_keyboard, null);
tv0 = (TextView) view.findViewById(R.id.tv_custom_keyboard_keys0);
tv1 = (TextView) view.findViewById(R.id.tv_custom_keyboard_keys1);
tv2 = (TextView) view.findViewById(R.id.tv_custom_keyboard_keys2);
tv3 = (TextView) view.findViewById(R.id.tv_custom_keyboard_keys3);
tv4 = (TextView) view.findViewById(R.id.tv_custom_keyboard_keys4);
tv5 = (TextView) view.findViewById(R.id.tv_custom_keyboard_keys5);
tv6 = (TextView) view.findViewById(R.id.tv_custom_keyboard_keys6);
tv7 = (TextView) view.findViewById(R.id.tv_custom_keyboard_keys7);
tv8 = (TextView) view.findViewById(R.id.tv_custom_keyboard_keys8);
tv9 = (TextView) view.findViewById(R.id.tv_custom_keyboard_keys9);
ivDelete = (ImageView) view.findViewById(R.id.iv_custom_keyboard_keys_delete);

addView(view);      //必须要，不然不显示控件
}

public TextView getTv0() {
return tv0;
}

public TextView getTv1() {
return tv1;
}

public TextView getTv2() {
return tv2;
}

public TextView getTv3() {
return tv3;
}

public TextView getTv4() {
return tv4;
}

public TextView getTv5() {
return tv5;
}

public TextView getTv6() {
return tv6;
}

public TextView getTv7() {
return tv7;
}

public TextView getTv8() {
return tv8;
}

public TextView getTv9() {
return tv9;
}

public ImageView getIvDelete() {
return ivDelete;
}
}

package com.hjqjl.paypwdkeyboard;

import android.content.Context;
import android.support.v4.content.ContextCompat;
import android.text.method.PasswordTransformationMethod;
import android.view.Gravity;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

public class CustomKeyBoardUtil {
private Context mContext;
private InputFinishListener mInputOver;
private TextView[] textViews = new TextView[6];
private LinearLayout mLayoutParent;
private CustomKeyboardView mKeyboardView;

//传入自定义的键盘和LinearLayout（密码的父布局）
public CustomKeyBoardUtil(Context context, LinearLayout layoutParent, CustomKeyboardView keyboardView, InputFinishListener inputOver) {
this.mContext = context;
this.mLayoutParent = layoutParent;
this.mInputOver = inputOver;
this.mKeyboardView = keyboardView;
initTextViews();

}

/**
* 初始化输入框
*/
private void initTextViews() {
for (int i = 0; i < textViews.length; i++) {
textViews[i] = new TextView(mContext);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
params.weight = 1;
textViews[i].setLayoutParams(params);
mLayoutParent.addView(textViews[i]);
textViews[i].setTransformationMethod(PasswordTransformationMethod.getInstance());
textViews[i].setGravity(Gravity.CENTER);
textViews[i].setTextSize(30);
if (i < textViews.length - 1) {
View view = new View(mContext);
LinearLayout.LayoutParams viewParams = new LinearLayout.LayoutParams(1, LinearLayout.LayoutParams.MATCH_PARENT);
view.setLayoutParams(viewParams);
view.setBackgroundColor(ContextCompat.getColor(mContext, android.R.color.holo_red_dark));
mLayoutParent.addView(view);
}
}
setOnKeysListener();
}

/**
* mKeyboardView的点击事件，分别是0123456789和删除键。
*/
private void setOnKeysListener() {
mKeyboardView.getTv0().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputTextView("0");
}
});
mKeyboardView.getTv1().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputTextView("1");
}
});
mKeyboardView.getTv2().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputTextView("2");
}
});
mKeyboardView.getTv3().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputTextView("3");
}
});
mKeyboardView.getTv4().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputTextView("4");
}
});
mKeyboardView.getTv5().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputTextView("5");
}
});
mKeyboardView.getTv6().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputTextView("6");
}
});
mKeyboardView.getTv7().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputTextView("7");
}
});
mKeyboardView.getTv8().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputTextView("8");
}
});
mKeyboardView.getTv9().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputTextView("9");
}
});
mKeyboardView.getIvDelete().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
deleteTextView();
}
});
}

private View.OnClickListener listener = new View.OnClickListener() {
@Override
public void onClick(View view) {

}
};

public void showKeyboard() {
int visibility = mKeyboardView.getVisibility();
if (visibility == View.GONE || visibility == View.INVISIBLE) {
mKeyboardView.setVisibility(View.VISIBLE);
}
}

public void hideKeyboard() {
int visibility = mKeyboardView.getVisibility();
if (visibility == View.VISIBLE) {
mKeyboardView.setVisibility(View.INVISIBLE);
}
}

/**
* 输入密码
*/
private void inputTextView(String code) {
for (int i = 0; i < textViews.length; i++) {
TextView tv = textViews[i];
if (tv.getText().toString().equals("")) {
tv.setText(code);
if (i == textViews.length - 1) {
mInputOver.inputHasOver(getInputText());//当密码输入到最后一个了，回调此方法
}
return;
}
}
}

/**
* 清空所有密码
*/
public void clearTextView() {
for (int i = textViews.length - 1; i >= 0; i--) {
TextView tv = textViews[i];
if (!tv.getText().toString().equals("")) {
tv.setText("");
}
mLayoutParent.invalidate();
}
}

/**
* 删除最后一格的密码
*/
private void deleteTextView() {
for (int i = textViews.length - 1; i >= 0; i--) {
TextView tv = textViews[i];
if (!tv.getText().toString().equals("")) {
tv.setText("");
return;
}
}
}

/**
* 获取输入的密码
*/
private String getInputText() {
StringBuffer sb = new StringBuffer();
for (TextView tv : textViews) {
sb.append(tv.getText().toString());
}
return sb.toString();
}

/**
* 输入监听
*/
public interface InputFinishListener {
void inputHasOver(String text);
}
}

下面看看是怎么使用的：

package com.hjqjl.paypwdkeyboard;

import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.layout_input);
CustomKeyboardView customKeyboardView = (CustomKeyboardView) findViewById(R.id.custom_keyboard_view);
CustomKeyBoardUtil customKeyBoardUtil = new CustomKeyBoardUtil(this, linearLayout, customKeyboardView, new CustomKeyBoardUtil.InputFinishListener() {
@Override
public void inputHasOver(String text) {
Toast.makeText(MainActivity.this, "输入完成:" + text, Toast.LENGTH_LONG).show();
}
});

}
}

activity_main.xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#624762">

<LinearLayout
android:id="@+id/layout_input"
android:layout_width="match_parent"
android:layout_height="50dip"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:layout_marginTop="131dip"
android:background="@drawable/bg_pwd_input"
android:orientation="horizontal" />

<com.hjqjl.paypwdkeyboard.CustomKeyboardView
android:id="@+id/custom_keyboard_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />

</RelativeLayout>

在activity_main中需要的密码输入框的背景，即：bg_pwd_input.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<solid android:color="#ffffff" />

<!-- 描边 ：边框宽度与颜色 -->
<stroke
android:width="1dip"
android:color="@android:color/holo_red_dark" />
<!--圆角-->
<corners android:radius="6px" />

</shape>

ok，至此完毕。

demo：https://git.oschina.net/hjqjl/PayPwdKeyboard