Android实现支付宝6位密码输入界面

 我们先来照图分析一下：
（1）限制输入6位，每一位都有自己的框格，每个格显示一位；
（2）有回退/取消支付按钮；
（3）有忘记密码链接；
（4）自定义的只能输入数字的键盘输入区；
（5）在6位输完后自动进行密码校验和支付交易。如上图左边是iOS支付宝支付密码输入控件，右边是我模仿实现的效果。

首先，我们需要一个页面来完成以上的静态布局，.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:id="@+id/linear_pass" 
  android:layout_width="match_parent" 
  android:layout_height="wrap_content" 
  android:orientation="vertical"> 
  <RelativeLayout 
   android:layout_width="match_parent" 
   android:layout_height="wrap_content" 
   android:layout_margin="5dp"> 
   <!-- 取消按钮 --> 
   <ImageView 
    android:id="@+id/img_cancel" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/icon_clean" /> 
   <TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerInParent="true" 
    android:text="输入密码" 
    android:textColor="#898181" 
    android:textSize="20sp" /> 
  </RelativeLayout> 
  <View 
   android:layout_width="match_parent" 
   android:layout_height="0.5dp" 
   android:background="#555555" /> 
  <!-- 6位密码框布局，需要一个圆角边框的shape作为layout的背景 --> 
  <LinearLayout 
   android:layout_width="match_parent" 
   android:layout_height="wrap_content" 
   android:layout_marginLeft="40dp" 
   android:layout_marginRight="40dp" 
   android:layout_marginTop="20dp" 
   android:background="@drawable/shape_input_area" 
   android:orientation="horizontal"> 
   <!-- inputType设置隐藏密码明文 
     textSize设置大一点，否则“点”太小了，不美观 --> 
   <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="32sp" /> 
   <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="32sp" /> 
   <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="32sp" /> 
   <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="32sp" /> 
   <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="32sp" /> 
   <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="32sp" /> 
  </LinearLayout> 
  <!-- 忘记密码链接 --> 
  <TextView 
   android:id="@+id/tv_forgetPwd" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:layout_gravity="right" 
   android:layout_margin="15dp" 
   android:text="忘记密码？" 
   android:textColor="#354EEF" /> 
 </LinearLayout> 
 <!-- 输入键盘 --> 
 <GridView 
  android:id="@+id/gv_keybord" 
  android:layout_width="match_parent" 
  android:layout_height="wrap_content" 
  android:layout_below="@id/linear_pass" 
  android:layout_marginTop="40dp" 
  android:background="@android:color/black" 
  android:horizontalSpacing="0.5dp" 
  android:numColumns="3" 
  android:verticalSpacing="0.5dp" /> 
</RelativeLayout> 

其中需要圆角背景shape_input_area.xml：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
 <corners android:radius="5dp"/> 
 <stroke android:color="@android:color/darker_gray" 
  android:width="1dp"/> 
 <solid android:color="@android:color/white"/> 
</shape> 

需要数字按钮的背景selector_gride.xml：

<?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> 

需要回退键背景selector_key_del.xml：

<?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="#C0C4C7" /> 
  </shape> 
 </item> 
 <item android:state_enabled="true" android:state_pressed="true"> 
  <shape> 
   <solid android:color="@android:color/white" /> 
  </shape> 
 </item> 
</selector> 

下面来完成我们的自定义控件PasswordView.Java：

public class PasswordView extends RelativeLayout implements View.OnClickListener { 
 Context context; 
 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; //用于记录当前输入密码格位置 
 public PasswordView(Context context) { 
  this(context, null); 
 } 
 public PasswordView(Context context, AttributeSet attrs) { 
  super(context, attrs); 
  this.context = context; 
  View view = View.inflate(context, R.layout.layout_popup_bottom, null); 
  valueList = new ArrayList<Map<String, String>>(); 
  tvList = new TextView[6]; 
  imgCancel = (ImageView) view.findViewById(R.id.img_cancel); 
  imgCancel.setOnClickListener(this); 
  tvForget = (TextView) findViewById(R.id.tv_forgetPwd); 
  tvForget.setOnClickListener(this); 
  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); 
  setView(); 
  addView(view);  //必须要，不然不显示控件 
 } 
 @Override 
 public void onClick(View v) { 
  switch (v.getId()) { 
   case R.id.img_cancel: 
    Toast.makeText(context, "Cancel", Toast.LENGTH_SHORT).show(); 
    break; 
   case R.id.tv_forgetPwd: 
    Toast.makeText(context, "Forget", Toast.LENGTH_SHORT).show(); 
    break; 
  } 
 } 
 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 == 12) { 
    map.put("name", "<<-"); 
   } else if (i == 11) { 
    map.put("name", String.valueOf(0)); 
   } 
   valueList.add(map); 
  } 
  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(""); 
      } 
     } 
    } 
   } 
  }); 
 } 
 //设置监听方法，在第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; 
 } 
  
 public ImageView getCancelImageView() { 
  return imgCancel; 
 } 
  
 public TextView getForgetTextView() { 
  return tvForget; 
 } 
 //GrideView的适配器 
 BaseAdapter adapter = new BaseAdapter() { 
  @Override 
  public int getCount() { 
   return valueList.size(); 
  } 
  @Override 
  public Object getItem(int position) { 
   return valueList.get(position); 
  } 
  @Override 
  public long getItemId(int position) { 
   return position; 
  } 
  @Override 
  public View getView(int position, View convertView, ViewGroup parent) { 
   ViewHolder viewHolder; 
   if (convertView == null) { 
    convertView = View.inflate(context, R.layout.item_gride, null); 
    viewHolder = new ViewHolder(); 
    viewHolder.btnKey = (TextView) convertView.findViewById(R.id.btn_keys); 
    convertView.setTag(viewHolder); 
   } else { 
    viewHolder = (ViewHolder) convertView.getTag(); 
   } 
   viewHolder.btnKey.setText(valueList.get(position).get("name")); 
   if(position == 9){ 
    viewHolder.btnKey.setBackgroundResource(R.drawable.selector_key_del); 
    viewHolder.btnKey.setEnabled(false); 
   } 
   if(position == 11){ 
    viewHolder.btnKey.setBackgroundResource(R.drawable.selector_key_del); 
   } 
   return convertView; 
  } 
 }; 
  
 public final class ViewHolder { 
  public TextView btnKey; 
 } 
} 

自认为代码注释还是可以的。就是在实现过程中要注意数组的越界问题，在输入逻辑响应中要注意逻辑处理，也就是grideView的OnItemClickListener事件处理。其中用到自定义的接口OnPasswordInputFinish来实现输入完成的事件回掉：

 
public interface OnPasswordInputFinish { 
 void inputFinish(); 
} 

还有就是Adapter中用到的每个按钮Item的布局item_gride.xml：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent"> 
 <!-- 模拟键盘按钮，当然你可以用Button，但要注意Button和GrideView的点击响应问题 --> 
 <TextView 
  android:id="@+id/btn_keys" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:padding="10dp" 
  android:gravity="center" 
  android:textSize="25sp" 
  android:background="@drawable/selector_gride"/> 
</LinearLayout> 

好了，到此我们的自定义控件——模仿支付宝6位支付密码输入控件就完成了，下边我们在Activity中用一下，检验一下效果：
我们在MianActivity中用用一下我们定义好的控件：

public class MainActivity extends Activity { 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
   
  setContentView(R.layout.activity_main); 
  final PasswordView pwdView = (PasswordView) findViewById(R.id.pwd_view); 
  //添加密码输入完成的响应 
  pwdView.setOnFinishInput(new OnPasswordInputFinish() { 
   @Override 
   public void inputFinish() { 
    //输入完成后我们简单显示一下输入的密码 
    //也就是说——>实现你的交易逻辑什么的在这里写 
    Toast.makeText(MainActivity.this, pwdView.getStrPassword(), Toast.LENGTH_SHORT).show(); 
   } 
  }); 
   
  pwdView.getCancelImageView().setOnClickListener(new View.OnClickListener() { 
   @Override 
   public void onClick(View v) { 
    Toast.makeText(MainActivity.this, "Biu Biu Biu", Toast.LENGTH_SHORT).show(); 
   } 
  }); 
   
   
//  final PasswordView pwdView = new PasswordView(this); 
//  setContentView(pwdView); 
//  pwdView.setOnFinishInput(new OnPasswordInputFinish() { 
//   @Override 
//   public void inputFinish() { 
//    Toast.makeText(MainActivity.this, pwdView.getStrPassword(), Toast.LENGTH_SHORT).show(); 
//   } 
//  }); 
   
 } 
} 

在第一种方法中我们用到的布局文件：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
 android:id="@+id/xxx" 
 xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:background="#624762"> 
 <com.wangj.mypayview.PasswordView 
  android:id="@+id/pwd_view" 
  android:layout_width="match_parent" 
  android:layout_height="wrap_content" 
  android:layout_alignParentBottom="true"/> 
</RelativeLayout> 

更多内容请参考专题：Android密码使用教程

您可能感兴趣的文章:Android实现动态显示或隐藏密码输入框的内容Android 仿支付宝密码输入框效果android仿微信支付宝的支付密码输入框示例Android仿支付宝支付密码输入框Android高仿微信支付密码输入控件Android仿微信/支付宝密码输入框Android自定义密码输入框和数字键盘Android程序开发之防止密码输入错误 密码明文显示功能Android自定义密码输入EditTextLayoutAndroid自定义PasswordInputView密码输入