仿支付宝密码输入界面+随机键盘

仿支付宝密码输入界面+随机键盘

**

仿支付宝密码输入界面+随机键盘

**
最近搞了dome，随机数字键盘+仿支付宝交易密码支付UI编写，很好的封装，随处调用
先上图，看看dome效果，觉得可以，可以继续往下走，ok…

随机键盘的实现，主要输对KeyboardView的绘制，以及Keyboard的应用，实例化Keyboard keyDig = new Keyboard(mContext, R.xml.symbols);
其中symbols是存放数字的xml文件。随机参数数字键盘关键代码如下：

private void randomdigkey(){List<Key> keyList = Keys();// 查找出0-9的数字键List<Key> newkeyList = new ArrayList<Key>();for (int i = 0; i < keyList.size(); i++) {if ((i).label != null&& (i).String())) {newkeyList.(i));}}// 数组长度int count = newkeyList.size();// 结果集List<KeyModel> resultList = new ArrayList<KeyModel>();// 用一个LinkedList作为中介LinkedList<KeyModel> temp = new LinkedList<KeyModel>();// 初始化tempfor (int i = 0; i < count; i++) {temp.add(new KeyModel(48 + i, i + ""));}// 取数Random rand = new Random();for (int i = 0; i < count; i++) {int num = Int(count - i);resultList.add(new (num).getCode(),(num).getLable()));ve(num);}for (int i = 0; i < newkeyList.size(); i++) {(i).label = (i).getLable();(i).codes[0] = (i).getCode();}keyboardView.setKeyboard(keyDig);}

交易密码框的实现的实现，构建一个虚拟的EditText，通过对ImageView的可见性控制来虚拟的模拟交易密码的输入（回显效果），在把真正的输入内容存放在stringbuffer中，当输入长度到达6时，回调onNumCompleted，自定义一个交易密码框代码如下：

public class SecurityPasswordEditText extends LinearLayout {  private  EditText mEditText;  private ImageView oneTextView;  private ImageView twoTextView;  private ImageView threeTextView;  private ImageView fourTextView;  private ImageView fiveTextView;  private ImageView sixTextView;  LayoutInflater inflater;  private ImageView[] imageViews;  private View contentView;  StringBuilder builder;  public SecurityPasswordEditText(Context context, AttributeSet attrs) {  super(context, attrs);  inflater = LayoutInflater.from(context);  builder = new StringBuilder();  initWidget();  }  private void initWidget() {  contentView = inflater.inflate(R.layout.sdk2_simple_pwd_widget, null);  mEditText = (EditText) contentView  .findViewById(R.id.sdk2_pwd_edit_simple);  oneTextView = (ImageView) contentView  .findViewById(R.id.sdk2_pwd_one_img);  twoTextView = (ImageView) contentView  .findViewById(R.id.sdk2_pwd_two_img);  fourTextView = (ImageView) contentView  .findViewById(R.id.sdk2_pwd_four_img);  fiveTextView = (ImageView) contentView  .findViewById(R.id.sdk2_pwd_five_img);  sixTextView = (ImageView) contentView  .findViewById(R.id.sdk2_pwd_six_img);  threeTextView = (ImageView) contentView  .findViewById(R.id.sdk2_pwd_three_img);  LinearLayout.LayoutParams lParams = new LayoutParams(  LinearLayout.LayoutParams.MATCH_PARENT,  LinearLayout.LayoutParams.WRAP_CONTENT);  mEditText.addTextChangedListener(mTextWatcher);  imageViews = new ImageView[] { oneTextView, twoTextView, threeTextView,  fourTextView, fiveTextView, sixTextView };  this.addView(contentView, lParams);  }  TextWatcher mTextWatcher = new TextWatcher() {  @Override  public void onTextChanged(CharSequence s, int start, int before,  int count) {  }  @Override  public void beforeTextChanged(CharSequence s, int start, int count,  int after) {  }  @Override  public void afterTextChanged(Editable s) {  if (s.toString().length() == 0) {  return;  }  if (builder.length() < 6) {  builder.String());  setTextValue();  }s.delete(0, s.length());}  };  private void setTextValue() {  String str = String();  int len = str.length();  if (len <= 6) {  imageViews[len - 1].setVisibility(View.VISIBLE);  }  if (len >= 6) {  Log.i("简密框","回调");  Log.i("简密框","支付密码" + str);  if (mListener != null) {  NumCompleted(str);  }  
//            LogUtils.i("jone", String());  
//            FunctionUtils.hideSoftInputByView(getContext(), mEditText);  }  }  public void delTextValue() {  String str = String();  int len = str.length();  if (len == 0) {  return;  }  if (len > 0 && len <= 6) {  builder.delete(len - 1, len); 
//            Log.e("===", String()+"len = "+len);}  imageViews[len - 1].setVisibility(View.INVISIBLE);
//        Log.e("===", String()+"len = "+imageViews[len-1].getVisibility());}public interface SecurityEditCompleListener {  public void onNumCompleted(String num);  }  public SecurityEditCompleListener mListener;  public void setSecurityEditCompleListener(  SecurityEditCompleListener mListener) {  this.mListener = mListener;  }  public void clearSecurityEdit() {  if (builder != null) {  if (builder.length() == 6) {  builder.delete(0, 6);  }  }  for (ImageView tv : imageViews) {  tv.setVisibility(View.INVISIBLE);  }  }  public EditText getSecurityEdit() {  return this.mEditText;  }  
}  

交易密码POP的封装及调用，清楚以上一种关键实现之后，下面我们将他封装起来，代码如下：

/*** 封装pop类，创建回调* @author AHF**/
public class TradePwdPopUtils {private  PopupWindow popWindow = null;private  CallBackTradePwd callBackTradePwd;public TradePwdPopUtils() {super();}public CallBackTradePwd getCallBackTradePwd() {return callBackTradePwd;}public void setCallBackTradePwd(CallBackTradePwd callBackTradePwd) {this.callBackTradePwd = callBackTradePwd;}public interface CallBackTradePwd{public void callBaceTradePwd(String pwd);}protected void showPopWindow(Context context,Activity ac,LinearLayout lin) {popWindow = null;if (popWindow == null) {LayoutInflater inflater = (LayoutInflater) SystemService(Context.LAYOUT_INFLATER_SERVICE);View view = inflater.inflate(ade_key_layout, null);SecurityPasswordEditText myEdit = (SecurityPasswordEditText) view.findViewById(_edit);TextView tvClose = (TextView) view.findViewById(R.id.tv_close);myEdit.setSecurityEditCompleListener(new SecurityEditCompleListener() {@Overridepublic void onNumCompleted(String num) {popWindow.dismiss();if(callBackTradePwd!=null){callBackTradePwd.callBaceTradePwd(num);}}});tvClose.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {popWindow.dismiss();}});ac.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);Method setShowSoftInputOnFocus = null;try {setShowSoftInputOnFocus = Class().getMethod("setShowSoftInputOnFocus", boolean.class);setShowSoftInputOnFocus.setAccessible(true);setShowSoftInputOnFocus.invoke(myEdit, false);} catch (SecurityException e) {e.printStackTrace();} catch (NoSuchMethodException e) {e.printStackTrace();}catch(Exception e){e.printStackTrace();}new KeyboardUtil(view, context, myEdit).showKeyboard();popWindow = new PopupWindow(view, LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);popWindow.setFocusable(true);popWindow.setOutsideTouchable(true);popWindow.setBackgroundDrawable(new BitmapDrawable());popWindow.showAtLocation(lin, Gravity.BOTTOM, 0, 0);}}
}

ok，在这已经完成了一大半了，最后一步，只需会调用封装好的方法即可显示密码输入效果了。

/*** 主活动* @author AHF**/
public class MainActivity extends Activity implements CallBackTradePwd{Button btn;LinearLayout lin;private TradePwdPopUtils pop;@Overrideprotected void onCreate(Bundle savedInstanceState) {Create(savedInstanceState);setContentView(R.layout.activity_main_layout);btn = (Button) findViewById(R.id.btn);pop = new TradePwdPopUtils();lin = (LinearLayout) findViewById(R.id.lin);pop.setCallBackTradePwd(this);btn.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {pop.showPopWindow(MainActivity.this, MainActivity.this, lin);}});}@Overridepublic void callBaceTradePwd(String pwd) {Toast.makeText(this, "回调密码"+pwd, Toast.LENGTH_LONG).show(); }
}

ok，初略的分析了下，希望对你有所帮助！！！
最后贴上源码下载地址：仿支付宝密码输入框+随机键盘源码下载