Androi 自定义输入支付密码框
1.布局中的使用
2.控件代码
@SuppressLint("CommitPrefEdits")
public class PayPopWindow implements OnDismissListener, OnClickListener {
private PopupWindow popupWindow;
private OnItemClickListener listener;
private Context context;
private String cate_id;//回调的id
private String strPassword; //输入的密码
private TextView[] tvList; //用数组保存6个TextView,为什么用数组?
//因为就6个输入框不会变了,用数组内存申请固定空间,比List省空间(自己认为)
private GridView gridView; //用GrideView布局键盘,其实并不是真正的键盘,只是模拟键盘的功能
private ArrayList<Map<String, String>> valueList; //有人可能有疑问,为何这里不用数组了?
//因为要用Adapter中适配,用数组不能往adapter中填充
private ImageView imgCancel;
private TextView tvForget;
private int currentIndex = -1; //用于记录当前输入密码格位置
private LinearLayout line;
private ImageView pic;
private PayViewAdp adapter;
private Intent intent;
private View backgroundView;
private AnimationDrawable animationDrawable;
public PayPopWindow(final Context context, View backgroundView) {
this.context = context;
this.backgroundView = backgroundView;
View view = LayoutInflater.from(context).inflate(R.layout.layout_popup_bottom, null);
popupWindow = new PopupWindow(view, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
//设置popwindow的动画效果
popupWindow.setAnimationStyle(R.style.popWindow_anim_style);
popupWindow.setBackgroundDrawable(new ColorDrawable(Color.WHITE));
popupWindow.setOnDismissListener(this);// 当popWindow消失时的监听
valueList = new ArrayList<Map<String, String>>();
tvList = new TextView[6];
setView();
imgCancel = (ImageView) view.findViewById(R.id.img_cance);
tvForget = (TextView) view.findViewById(R.id.tv_forgetPwd);
line = (LinearLayout) view.findViewById(R.id.pay_lin);
pic = (ImageView) view.findViewById(R.id.pay_status);
tvList[0] = (TextView) view.findViewById(R.id.tv_pass1);
tvList[1] = (TextView) view.findViewById(R.id.tv_pass2);
tvList[2] = (TextView) view.findViewById(R.id.tv_pass3);
tvList[3] = (TextView) view.findViewById(R.id.tv_pass4);
tvList[4] = (TextView) view.findViewById(R.id.tv_pass5);
tvList[5] = (TextView) view.findViewById(R.id.tv_pass6);
gridView = (GridView) view.findViewById(R.id.gv_keybord);
adapter = new PayViewAdp(context, valueList);
gridView.setAdapter(adapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
if (position < 11 && position != 9) { //点击0~9按钮
if (currentIndex >= -1 && currentIndex < 5) { //判断输入位置————要小心数组越界
tvList[++currentIndex].setText(valueList.get(position).get("name"));
}
} else {
if (position == 11) { //点击退格键
if (currentIndex - 1 >= -1) { //判断是否删除完毕————要小心数组越界
tvList[currentIndex--].setText("");
}
}
}
}
});
imgCancel.setOnClickListener(this);
tvForget.setOnClickListener(this);
}
public interface OnItemClickListener {
/**
* 设置点击确认按钮时监听接口
*/
void onClickOKPop();
}
/**
* 设置监听
*/
public void setOnItemClickListener(OnItemClickListener listener) {
this.listener = listener;
}
//当popWindow消失时响应
@Override
public void onDismiss() {
setBackgroundBlack(backgroundView, 1);
popupWindow.dismiss();
}
/**
* 弹窗显示的位置
*/
public void showAsDropDown(View position) {
popupWindow.showAtLocation(position, Gravity.BOTTOM, 0, 0);
popupWindow.setFocusable(true);
popupWindow.setOutsideTouchable(true);
popupWindow.update();
setBackgroundBlack(backgroundView, 0);
}
/**
* 控制背景变暗 0变暗 1变亮
*/
private void setBackgroundBlack(View view, int what) {
switch (what) {
case 0:
view.setVisibility(View.VISIBLE);
break;
case 1:
view.setVisibility(View.GONE);
break;
}
}
public void StartAnima() {
line.setVisibility(View.VISIBLE);
gridView.setVisibility(View.GONE);
// 播放逐帧动画
animationDrawable = (AnimationDrawable) pic.getDrawable();
animationDrawable.start();
int duration = 0;
for (int i = 0; i < animationDrawable.getNumberOfFrames(); i++) {
duration += animationDrawable.getDuration(i);
}
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
public void run() {
//此处调用第二个动画播放方法
onDismiss();
// ((Activity)context).finish();
}
}, duration);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.img_cance:
onDismiss();
break;
case R.id.tv_forgetPwd:
context.startActivity(new Intent(context, FindPayPswActivity.class));
break;
default:
break;
}
}
//设置监听方法,在第6位输入完成后触发
public void setOnFinishInput(final OnPasswordInputFinish pass) {
tvList[5].addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
if (s.toString().length() == 1) {
strPassword = ""; //每次触发都要先将strPassword置空,再重新获取,避免由于输入删除再输入造成混乱
for (int i = 0; i < 6; i++) {
strPassword += tvList[i].getText().toString().trim();
}
pass.inputFinish(); //接口中要实现的方法,完成密码输入完成后的响应逻辑
}
}
});
}
/* 获取输入的密码 */
public String getStrPassword() {
return strPassword;
}
private void setView() {
/* 初始化按钮上应该显示的数字 */
for (int i = 1; i < 13; i++) {
Map<String, String> map = new HashMap<String, String>();
if (i < 10) {
map.put("name", String.valueOf(i));
} else if (i == 10) {
map.put("name", "");
} else if (i == 11) {
map.put("name", String.valueOf(0));
} else if (i == 12) {
map.put("name", "<");
}
valueList.add(map);
}
}
}
各种资源的引用:
<!--支付弹出框-->
<style name="popWindow_anim_style" parent="android:Animation">
<item name="android:windowEnterAnimation">@anim/pop_down_in</item>
<item name="android:windowExitAnimation">@anim/pop_down_out</item>
</style>
布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/blackLight40"
android:gravity="bottom"
android:orientation="vertical">
<View
android:id="@+id/pay_view"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/userview" />
<LinearLayout
android:id="@+id/linear_pass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:padding="10dp">
<LinearLayout
android:layout_width="40dp"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="@+id/img_cance"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="@drawable/del" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="请输入交易密码"
android:textColor="@color/userblack"
android:textSize="@dimen/sp_16" />
<!-- 取消按钮 -->
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="@color/userview" />
<!-- 6位密码框布局,需要一个圆角边框的shape作为layout的背景 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:background="@drawable/shape_input_area"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_pass1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputType="numberPassword"
android:textSize="40sp" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#999999" />
<TextView
android:id="@+id/tv_pass2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputType="numberPassword"
android:textSize="40sp" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#999999" />
<TextView
android:id="@+id/tv_pass3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputType="numberPassword"
android:textSize="40sp" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#999999" />
<TextView
android:id="@+id/tv_pass4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputType="numberPassword"
android:textSize="40sp" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#999999" />
<TextView
android:id="@+id/tv_pass5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputType="numberPassword"
android:textSize="40sp" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#999999" />
<TextView
android:id="@+id/tv_pass6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputType="numberPassword"
android:textSize="40sp" />
</LinearLayout>
<!-- 忘记密码链接 -->
<TextView
android:id="@+id/tv_forgetPwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:text="忘记密码?"
android:textColor="#354EEF" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/userview" />
<RelativeLayout
android:id="@+id/pay_rel"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/pay_lin"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/white"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone">
<ImageView
android:id="@+id/pay_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tag_anim" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="center"
android:text="支付成功"
android:textColor="@color/textblack"
android:textSize="20dp" />
</LinearLayout>
<!-- 输入键盘 -->
<GridView
android:id="@+id/gv_keybord"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/usergray"
android:horizontalSpacing="1px"
android:numColumns="3"
android:verticalSpacing="1px" />
</RelativeLayout>
</LinearLayout>
3.JAVA中的使用
/**
* 提现输入密码操作
*/
private void withdrawEnterPassword() {
popWindow = new PayPopWindow(context, background); //background 一个在底层的空白View
popWindow.showAsDropDown(background);
popWindow.setOnFinishInput(new OnPasswordInputFinish() {
@Override
public void inputFinish() {
// popWindow.getStrPassword() 获取输入的支付密码
}
});
}
//空白View的资源
<View
android:id="@+id/auw_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blackLight40"
/>