android 仿美團支付的密碼輸入頁

實作效果

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;
		}
	}

}

最後還有一個代表輸入密碼的黑點圖檔

android 仿美團支付的密碼輸入頁

完成

android 仿美團支付的密碼輸入頁

繼續閱讀

android中使用SAX解析xml檔案

《自己動手寫一個作業系統》個人實踐1

支付行業專有名詞解釋

Android第三方支付——Bmob支付總結

個人免簽支付能監聽回調，開發者福音

Java微信網站支付寶支付接口快速接入

真機和模拟器的IP

如何将Eclipse中的項目遷移到Android Studio中

Android筆記(十四)：分析SingleTask和SingleInstance啟動模式

iOS開發的幾種加密方式

第三方支付通道

第三方支付系統--支付流程

Android app 第三方支付寶支付接入

foxmail安裝賬号密碼錯誤

Android學習筆記之----Activity（三）總結整理

申請開通支付寶當面付、電腦網站、手機網站、APP、刷臉支付