android 仿美团支付的密码输入页

实现效果



先来看布局文件activity_main.xml

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

<LinearLayout
android:id="@+id/password"
android:orientation="horizontal"
android:layout_width="300dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:background="@drawable/password_frame_shape"
android:layout_centerVertical="true"
>

<LinearLayout android:id="@+id/first"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
>
<ImageView android:id="@+id/first_img"
android:layout_width="20dp"
android:layout_height="20dp"
android:scaleType="fitXY"
android:src="@drawable/ic_pwd"
android:visibility="invisible"
/>
</LinearLayout>
<View android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#bdbdbd"/>
<LinearLayout android:id="@+id/second"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<ImageView android:id="@+id/second_img"
android:layout_width="20dp"
android:layout_height="20dp"
android:scaleType="fitXY"
android:src="@drawable/ic_pwd"
android:visibility="invisible"/>
</LinearLayout>
<View android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#bdbdbd"/>
<LinearLayout android:id="@+id/third"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<ImageView android:id="@+id/third_img"
android:layout_width="20dp"
android:layout_height="20dp"
android:scaleType="fitXY"
android:src="@drawable/ic_pwd"
android:visibility="invisible"/>
</LinearLayout>
<View android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#bdbdbd"/>
<LinearLayout android:id="@+id/fourth"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<ImageView android:id="@+id/fourth_img"
android:layout_width="20dp"
android:layout_height="20dp"
android:scaleType="fitXY"
android:src="@drawable/ic_pwd"
android:visibility="invisible"/>
</LinearLayout>
<View android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#bdbdbd"/>
<LinearLayout android:id="@+id/five"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<ImageView android:id="@+id/five_img"
android:layout_width="20dp"
android:layout_height="20dp"
android:scaleType="fitXY"
android:src="@drawable/ic_pwd"
android:visibility="invisible"/>
</LinearLayout>
<View android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#bdbdbd"/>
<LinearLayout android:id="@+id/six"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<ImageView android:id="@+id/six_img"
android:layout_width="20dp"
android:layout_height="20dp"
android:scaleType="fitXY"
android:src="@drawable/ic_pwd"
android:visibility="invisible"/>
</LinearLayout>
</LinearLayout>

<!-- 密码数键盘 -->
<LinearLayout android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#e0e0e0"
android:orientation="vertical"
android:layout_alignParentBottom="true">
<View android:layout_height="1dp"
android:layout_width="match_parent"
android:background="#bdbdbd"/>

<!-- 第一行  数字 1 2 3 -->
<LinearLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">

<LinearLayout
android:id="@+id/num_1_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/key_board_bg">
<TextView android:id="@+id/num_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="25sp"
/>
</LinearLayout>
<View android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#bdbdbd"/>
<LinearLayout
android:id="@+id/num_2_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/key_board_bg">
<TextView android:id="@+id/num_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:textSize="25sp"
/>
</LinearLayout>
<View android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#bdbdbd"/>
<LinearLayout
android:id="@+id/num_3_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/key_board_bg">
<TextView android:id="@+id/num_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:textSize="25sp"
/>
</LinearLayout>
</LinearLayout>

<!-- 第二行  数字 4 5 6 -->
<View android:layout_height="1dp"
android:layout_width="match_parent"
android:background="#bdbdbd"/>
<LinearLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">

<LinearLayout
android:id="@+id/num_4_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/key_board_bg">
<TextView android:id="@+id/num_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
android:textSize="25sp"
/>
</LinearLayout>
<View android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#bdbdbd"/>
<LinearLayout
android:id="@+id/num_5_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/key_board_bg">
<TextView android:id="@+id/num_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:textSize="25sp"
/>
</LinearLayout>
<View android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#bdbdbd"/>
<LinearLayout
android:id="@+id/num_6_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/key_board_bg">
<TextView android:id="@+id/num_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
android:textSize="25sp"
/>
</LinearLayout>

</LinearLayout>

<View android:layout_height="1dp"
android:layout_width="match_parent"
android:background="#bdbdbd"/>

<!-- 第三行  数字 7 8 9 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">

<LinearLayout
android:id="@+id/num_7_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/key_board_bg">
<TextView android:id="@+id/num_7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:textSize="25sp"
/>
</LinearLayout>
<View android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#bdbdbd"/>
<LinearLayout
android:id="@+id/num_8_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/key_board_bg">
<TextView android:id="@+id/num_8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:textSize="25sp"
/>
</LinearLayout>
<View android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#bdbdbd"/>
<LinearLayout
android:id="@+id/num_9_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/key_board_bg">
<TextView android:id="@+id/num_9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:textSize="25sp"
/>
</LinearLayout>

</LinearLayout>
<View android:layout_height="1dp"
android:layout_width="match_parent"
android:background="#bdbdbd"/>

<!--最后一行 0 和 回删按钮 -->
<LinearLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">

</LinearLayout>
<View android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#bdbdbd"/>
<LinearLayout
android:id="@+id/num_0_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/key_board_bg">
<TextView android:id="@+id/num_0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="25sp"
/>
</LinearLayout>
<View android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#bdbdbd"/>
<LinearLayout
android:id="@+id/delete_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@drawable/key_board_bg">
<ImageView android:id="@+id/delete_img"
android:layout_width="25dp"
android:layout_height="25dp"
android:scaleType="fitXY"
android:src="@drawable/delete"
/>
</LinearLayout>

</LinearLayout>
</LinearLayout>

</RelativeLayout>

二、然后是drawable文件夹下的连个简单的xml文件

password_frame_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 密码输入框的样式 -->
<corners android:radius="10dp"/>

<solid android:color="#eceff1"/>

<stroke android:width="2dp" android:color="#bdbdbd"/>

</shape>

key_board_bg.xml（模拟数字键盘 按钮按下时的样式）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 被按下时的背景色 -->
<item android:state_pressed="true" android:drawable="@color/keyboard_btn_pressed"/>
<!-- 正常情况下的背景色 -->
<item android:drawable="@color/keyboard_btn_normal"/>
</selector>

还有就是color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="keyboard_btn_normal">#e0e0e0</color>
<color name="keyboard_btn_pressed">#bdbdbd</color>
</resources>

三、MainActivity.java

package com.example.passworddemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {

/**
* 用户输入密码
*/
private StringBuffer passwordTextBuf = new StringBuffer("");

/**
* 各个密码字的隐藏字符代替图片
*/
private ImageView first_pwd_img, second_pwd_img, third_pwd_img,
four_pwd_img, five_pwd_img, six_pwd_img;

/**
* 密码数字键盘上各个按钮
*/
private LinearLayout num_0_btn, num_1_btn, num_2_btn, num_3_btn, num_4_btn,
num_5_btn, num_6_btn, num_7_btn, num_8_btn, num_9_btn, delete_btn;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

initView();
}

private void initView() {
// TODO Auto-generated method stub
first_pwd_img = (ImageView) findViewById(R.id.first_img);
second_pwd_img = (ImageView) findViewById(R.id.second_img);
third_pwd_img = (ImageView) findViewById(R.id.third_img);
four_pwd_img = (ImageView) findViewById(R.id.fourth_img);
five_pwd_img = (ImageView) findViewById(R.id.five_img);
six_pwd_img = (ImageView) findViewById(R.id.six_img);

num_0_btn = (LinearLayout) findViewById(R.id.num_0_btn);
num_1_btn = (LinearLayout) findViewById(R.id.num_1_btn);
num_2_btn = (LinearLayout) findViewById(R.id.num_2_btn);
num_3_btn = (LinearLayout) findViewById(R.id.num_3_btn);
num_4_btn = (LinearLayout) findViewById(R.id.num_4_btn);
num_5_btn = (LinearLayout) findViewById(R.id.num_5_btn);
num_6_btn = (LinearLayout) findViewById(R.id.num_6_btn);
num_7_btn = (LinearLayout) findViewById(R.id.num_7_btn);
num_8_btn = (LinearLayout) findViewById(R.id.num_8_btn);
num_9_btn = (LinearLayout) findViewById(R.id.num_9_btn);
delete_btn = (LinearLayout) findViewById(R.id.delete_btn);

num_0_btn.setOnClickListener(this);
num_1_btn.setOnClickListener(this);
num_2_btn.setOnClickListener(this);
num_3_btn.setOnClickListener(this);
num_4_btn.setOnClickListener(this);
num_5_btn.setOnClickListener(this);
num_6_btn.setOnClickListener(this);
num_7_btn.setOnClickListener(this);
num_8_btn.setOnClickListener(this);
num_9_btn.setOnClickListener(this);
delete_btn.setOnClickListener(this);
}

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.password:
break;
case R.id.num_0_btn:
inputPasswordNum(0);
break;
case R.id.num_1_btn:
inputPasswordNum(1);
break;
case R.id.num_2_btn:
inputPasswordNum(2);
break;
case R.id.num_3_btn:
inputPasswordNum(3);
break;
case R.id.num_4_btn:
inputPasswordNum(4);
break;
case R.id.num_5_btn:
inputPasswordNum(5);
break;
case R.id.num_6_btn:
inputPasswordNum(6);
break;
case R.id.num_7_btn:
inputPasswordNum(7);
break;
case R.id.num_8_btn:
inputPasswordNum(8);
break;
case R.id.num_9_btn:
inputPasswordNum(9);
break;
case R.id.delete_btn:
deletePasswordNum();
break;
default:
break;
}
}

/**
* 点击删除时，回删密码字
*/
private void deletePasswordNum() {
// TODO Auto-generated method stub
if (passwordTextBuf.length() > 0) {
hidePwdImg(passwordTextBuf.length());
passwordTextBuf.deleteCharAt(passwordTextBuf.length() - 1);
}
}

/**
* 回删时，隐藏相应的图片密码字
*
* @param index
*/
private void hidePwdImg(int index) {
// TODO Auto-generated method stub
switch (index) {
case 0:
break;
case 1:
first_pwd_img.setVisibility(View.INVISIBLE);
break;
case 2:
second_pwd_img.setVisibility(View.INVISIBLE);
break;
case 3:
third_pwd_img.setVisibility(View.INVISIBLE);
break;
case 4:
four_pwd_img.setVisibility(View.INVISIBLE);
break;
case 5:
five_pwd_img.setVisibility(View.INVISIBLE);
break;
case 6:
six_pwd_img.setVisibility(View.INVISIBLE);
break;
default:
break;
}
}

/**
* 点击数字时，将点击的数字加入密码字符串中
*
* @param i
*/
private void inputPasswordNum(int i) {
// TODO Auto-generated method stub
if (passwordTextBuf.length() < 6) {
passwordTextBuf.append(String.valueOf(i));
showPwdImg(passwordTextBuf.length());
}
}

/**
* 根据当前密码输入长度判断显示第几个密码隐藏字图片
*
* @param length
*/
private void showPwdImg(int index) {
// TODO Auto-generated method stub
switch (index) {
case 1:
first_pwd_img.setVisibility(View.VISIBLE);
break;
case 2:
second_pwd_img.setVisibility(View.VISIBLE);
break;
case 3:
third_pwd_img.setVisibility(View.VISIBLE);
break;
case 4:
four_pwd_img.setVisibility(View.VISIBLE);
break;
case 5:
five_pwd_img.setVisibility(View.VISIBLE);
break;
case 6:
six_pwd_img.setVisibility(View.VISIBLE);
Toast.makeText(MainActivity.this,
"您输入完成，验证正确就可支付了:" + passwordTextBuf, Toast.LENGTH_SHORT)
.show();
break;
default:
break;
}
}

}

最后还有一个代表输入密码的黑点图片



完成