当前位置： 移动技术网 > 移动技术>移动开发>Android > Android仿支付宝、京东的密码键盘和输入框

Android仿支付宝、京东的密码键盘和输入框

2019年07月24日  | 移动技术网移动技术  | 我要评论

首先看下效果图

一：布局代码

键盘由0~9的数字，删除键和完成键组成，也可以根据需求通过gridview适配器的getitemviewtype方法来定义。点击键的时候背景有变色的效果。

密码输入框由六个edittext组成，每个输入框最对能输入一个数字，监听最后一个输入框来完成密码输入结束的监听。

二：键盘

键盘中的主要逻辑处理，键盘样式，item的点击事件

@override
public int getviewtypecount() {
  return 2;
}

@override
public int getitemviewtype(int position) {
  return (getitemid(position) == key_nine) ? 2 : 1;
}

@override
public view getview(int position, view convertview, viewgroup parent) {
  viewholder viewholder = null;
  if (convertview == null) {
    if (getitemviewtype(position) == 1) {
      //数字键
      convertview = layoutinflater.from(context).inflate(r.layout.item_grid_keyboard, parent, false);
      viewholder = new viewholder(convertview);
    } else {
      //删除键
      convertview = layoutinflater.from(context).inflate(r.layout.item_grid_keyboard_delete, parent, false);
    }
  }

  if (getitemviewtype(position) == 1) {
    viewholder = (viewholder) convertview.gettag();
    viewholder.tvkey.settext(key[position]);
  }

  return convertview;
}

三：密码输入框

密码输入框要处理的逻辑有删除、输入、输入完成回调等

/**
 * 输入密码，根据stringbuilder中数据的多少进行逻辑判断
 * @param value
 */
public void add(string value) {
  if (mpassword != null && mpassword.length() < 6) {
    mpassword.append(value);//此处先添加到stringbuilder中，再在输入框中显示
    if (mpassword.length() == 1) {
      tvfirst.settext(value);
    } else if (mpassword.length() == 2) {
      tvsecond.settext(value);
    }else if (mpassword.length() == 3) {
      tvthird.settext(value);
    }else if (mpassword.length() == 4) {
      tvforth.settext(value);
    }else if (mpassword.length() == 5) {
      tvfifth.settext(value);
    }else if (mpassword.length() == 6) {
      tvsixth.settext(value);
    }
  }
}

/**
 * 删除密码，根据stringbuilder中数据的多少进行逻辑判断
 */
public void remove() {
  if (mpassword != null && mpassword.length() > 0) {
    if (mpassword.length() == 1) {
      tvfirst.settext("");
    } else if (mpassword.length() == 2) {
      tvsecond.settext("");
    }else if (mpassword.length() == 3) {
      tvthird.settext("");
    }else if (mpassword.length() == 4) {
      tvforth.settext("");
    }else if (mpassword.length() == 5) {
      tvfifth.settext("");
    }else if (mpassword.length() == 6) {
      tvsixth.settext("");
    }
    mpassword.deletecharat(mpassword.length() - 1);
  }
}

获取完整密码

/**
 * 返回完整密码
 * @return 
 */
public string gettext() {
  return (mpassword == null) ? null : mpassword.tostring();
}

四：实际应用

布局，也可以把键盘拆分开来，当输入的时候从窗口下方滑入

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

  <com.github.phoenix.widget.payedittext
    android:id="@+id/payedittext_pay"
    android:layout_width="match_parent"
    android:layout_margintop="20dp"
    android:paddingleft="12dp"
    android:layout_alignparenttop="true"
    android:paddingright="12dp"
    android:layout_height="48dp"/>

  <com.github.phoenix.widget.keyboard
    android:id="@+id/keyboardview_pay"
    android:layout_alignparentbottom="true"
    android:layout_width="match_parent"
    android:layout_height="300dp"/>

</relativelayout>

代码中

//键
private static final string[] key = new string[] {
      "1", "2", "3",
      "4", "5", "6",
      "7", "8", "9",
      "<<", "0", "完成"
  };
//设置键盘
keyboard.setkeyboardkeys(key);
//键盘键的点击事件
keyboard.setonclickkeyboardlistener(new keyboard.onclickkeyboardlistener() {
  @override
  public void onkeyclick(int position, string value) {
    if (position < 11 && position != 9) {
      payedittext.add(value);
    } else if (position == 9) {
      payedittext.remove();
    }else if (position == 11) {
      //当点击键盘上的完成按钮时，也可以通过payedittext.gettext()获取密码，此时不应该注册oninputfinishedlistener接口
      toast.maketext(getapplication(), "您的密码是：" + payedittext.gettext(), toast.length_short).show();
      finish();
    }
  }
});

//当密码输入完成时的回调
payedittext.setoninputfinishedlistener(new payedittext.oninputfinishedlistener() {
  @override
  public void oninputfinished(string password) {
    toast.maketext(getapplication(), "您的密码是：" + password, toast.length_short).show();
 }
});

总结

好了，以上就是这篇文章的全部内容了，希望本文的内容对各位android开发者们能有所帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网