Android自定义数字密码键盘

妙语皆随晨曦出 2016-11-06 00:03

1.创建密码键盘布局layout/password_keyboard_view.xml

EditText的属性：

android:inputType="numberSigned" 可输入"+" "-"符号 表示正负

android:inputType="number" 只能输入0-9

<?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="60dp">

<EditText

android:id="@+id/inputEdit"

android:layout_width="match_parent"

android:singleLine="true"

android:background="@null"

android:inputType="numberSigned"

android:maxLength="6"

android:layout_height="match_parent" />

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/password_layout_bg"

android:orientation="horizontal">

<RelativeLayout

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

<ImageView

android:id="@+id/pwdBg1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="15dp"

android:layout_centerInParent="true"

android:src="@drawable/visible_bg"/>

</RelativeLayout>

<RelativeLayout

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

<ImageView

android:id="@+id/pwdBg2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="15dp"

android:layout_centerInParent="true"

android:src="@drawable/visible_bg"/>

</RelativeLayout>

<RelativeLayout

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

<ImageView

android:id="@+id/pwdBg3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="15dp"

android:layout_centerInParent="true"

android:src="@drawable/visible_bg"/>

</RelativeLayout>

<RelativeLayout

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

<ImageView

android:id="@+id/pwdBg4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="15dp"

android:layout_centerInParent="true"

android:src="@drawable/visible_bg"/>

</RelativeLayout>

<RelativeLayout

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

<ImageView

android:id="@+id/pwdBg5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="15dp"

android:layout_centerInParent="true"

android:src="@drawable/visible_bg"/>

</RelativeLayout>

<RelativeLayout

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

<ImageView

android:id="@+id/pwdBg6"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="15dp"

android:layout_centerInParent="true"

android:src="@drawable/visible_bg"/>

</RelativeLayout>

</LinearLayout>

</RelativeLayout>

2.自定义PasswordKeyboardView.java加载密码键盘布局layout/password_keyboard_view.xml

public class PasswordKeyboardView extends LinearLayout {

private static String TAG=PasswordKeyboardView.class.getSimpleName();

private EditText inputEdit;//输入框

private ImageView pwdBg1;//Visible和Invisible控制显示和隐藏

private ImageView pwdBg2;

private ImageView pwdBg3;

private ImageView pwdBg4;

private ImageView pwdBg5;

private ImageView pwdBg6;

private List<ImageView> container;

public PasswordKeyboardView(Context context) {

super(context);

initView();

setListener();

}

public PasswordKeyboardView(Context context, AttributeSet attrs) {

super(context, attrs);

initView();

setListener();

}

private void initView(){

//加载布局

View view= LayoutInflater.from(getContext()).inflate(R.layout.password_keyboard_view,null);

inputEdit=(EditText)view.findViewById(R.id.inputEdit);

pwdBg1=(ImageView)view.findViewById(R.id.pwdBg1);

pwdBg2=(ImageView)view.findViewById(R.id.pwdBg2);

pwdBg3=(ImageView)view.findViewById(R.id.pwdBg3);

pwdBg4=(ImageView)view.findViewById(R.id.pwdBg4);

pwdBg5=(ImageView)view.findViewById(R.id.pwdBg5);

pwdBg6=(ImageView)view.findViewById(R.id.pwdBg6);

container=new ArrayList<ImageView>();

container.add(pwdBg1);

container.add(pwdBg2);

container.add(pwdBg3);

container.add(pwdBg4);

container.add(pwdBg5);

container.add(pwdBg6);

//默认隐藏

pwdBg1.setVisibility(View.INVISIBLE);

pwdBg2.setVisibility(View.INVISIBLE);

pwdBg3.setVisibility(View.INVISIBLE);

pwdBg4.setVisibility(View.INVISIBLE);

pwdBg5.setVisibility(View.INVISIBLE);

pwdBg6.setVisibility(View.INVISIBLE);

//添加键盘布局

addView(view);

}

private void setListener(){

//监听EditText的输入内容

inputEdit.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) {}

public void afterTextChanged(Editable s) {

//inputResult输入内容

String inputResult=s.toString();

//控制密码符号的显示和隐藏

setPwdBgVisibile(inputResult,inputResult.length());

CCLog.d(TAG,inputResult);

}

});

}

private void setPwdBgVisibile(String inputResult,int passwordLength){

//先全部隐藏

for(int i=0;i<6;i++){

container.get(i).setVisibility(View.INVISIBLE);

}

//在根据密码长度从左只有显示密码符号

for(int i=0;i<passwordLength;i++){

container.get(i).setVisibility(View.VISIBLE);

}

if (passwordKeyboardListener!=null) {

//将真是密码和长度回传

passwordKeyboardListener.onPasswordChange(inputResult,passwordLength);

}

}

private PasswordKeyboardListener passwordKeyboardListener;

public void setPasswordKeyboardListener(PasswordKeyboardListener passwordKeyboardListener) {

this.passwordKeyboardListener = passwordKeyboardListener;

}

public interface PasswordKeyboardListener{

void onPasswordChange(String realPassword,int passwordLength);

}

}

3.创建Activity布局layout/password_view_activity.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:id="@+id/password"

android:layout_width="match_parent"

android:layout_height="60dp"

android:layout_above="@+id/password_keyboard_view"

android:gravity="center"

android:textSize="16sp"

android:textColor="#484848"/>

<com.ifrh.app.view.PasswordKeyboardView

android:layout_width="match_parent"

android:layout_height="60dp"

android:layout_centerInParent="true"

android:id="@+id/password_keyboard_view" />

</RelativeLayout>

4.在Activity中使用PasswordKeyboardView

public class PasswordViewActivity extends Activity {

private PasswordKeyboardView passwordKeyboardView;

private TextView password;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.password_view_activity);

passwordKeyboardView=(PasswordKeyboardView)findViewById(R.id.password_keyboard_view);

password=(TextView)findViewById(R.id.password);

//设置监听

passwordKeyboardView.setPasswordKeyboardListener(new PasswordKeyboardView.PasswordKeyboardListener() {

@Override

public void onPasswordChange(String realPassword, int passwordLength) {

password.setText("密码是："+realPassword+" 密码长度是："+passwordLength);

}

});

}

}

5.演示效果