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

原創 2513LQL 2020-02-20 16:45

實現效果



先來看佈局文件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;
		}
	}

}

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


完成


2513LQL
發佈了41 篇原創文章 · 獲贊 9 · 訪問量 5萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

maven配置阿里雲代理地址

buildscript { repositories { maven{ url 'http://maven.aliyun.com/nexus/content/groups/public'}

花燃柳卧 2020-07-07 03:29:56

架構之路——MVVM架構模式

1、架構圖 2、每層職責劃分 Model層 Model層就是職責數據的存儲、讀取網絡數據、操作數據庫數據以及I/O，一般會有一個ViewModel對象來調用獲取這一部分的數據。 View層 View層做的僅僅和UI相關的

花燃柳卧 2020-07-07 03:29:55

Android 筆記 SurfaceView實現塗鴉，軌跡重新繪製

實現塗鴉，點擊繪製，將塗鴉過程再繪製一次。 自定義SurfaceView package com.bencoo.kme.view; import java.util.ArrayList; import java.util.Li

ano场所 2020-07-07 01:57:53

記一個自己寫的湊合能用的上拉加載下拉刷新控件

學習了別人自定義的文章，然後整了這個滿滿都是bug的控件，自己湊合能用，姑且記錄一下 最開始悶着頭沒想明白就開始寫，結果各種不好使，於是畫了個流程圖梳理了一下思路，終於能用了 思路如上圖，具體在代碼的註釋中 package com.e

水波零 2020-07-06 05:52:02

利用canvas.clipPath創建不規則佈局

實現效果   繼承LinearLayout 爲了使控件畫出外邊緣，重寫onMeasure方法，使控件高度稍微高出一塊，此處取5，也可以通過自定義屬性來設置，在onMeasure方法中還有算出較矮子控件高度和較高子控件的高度，高度用於在o

水波零 2020-07-06 05:52:02

RecyclerView粘性頭部

法1: recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public v

水波零 2020-07-06 05:52:02

oracle數據庫的基本命令記錄

一、創建表空間 / 刪除表空間 create tablespace myspace datafile 'D:\app\test.dbf' size 100m autoextend on next 50m; drop tablespace

原創 2021-04-01 21:09:36

Airolib 密碼分析提速-學習筆記

echo TP_Link722 > essid.txt#將AP的廣播名生成TXT airolib-ng db --import essid essid.txt#根據essid生成數據庫 airolib-ng db --stats#查看數據

鱼与羽 2020-07-07 11:32:52

Linux系統下如何做到SSH免密碼登錄

A爲本地主機(即用於控制其他主機的機器) ; B爲遠程主機(即被控制的機器Server), 假如ip爲172.24.253.2 ; A和B的系統都是Linux   在A上的命令: # ssh-keygen -t rsa (連續

liu_yanna 2020-07-06 23:23:56

密碼學總結

根據網上資料總結而成！~ 密碼學總結 作業要求 根據本學期學習過的密碼學知識，利用openssl,自己設計一套加密通訊的方案，實現客戶端和服務端之間的安全的可靠的加密通訊，形式不限，提供實現代碼和實驗結果，最終形成實驗報告 設

Ni9htMar3 2020-07-06 09:09:52

支付寶飛行模式轉卡

千辛萬苦搞出來

小小鸟敲代码 2020-07-08 09:12:32

java開發微信公衆號支付

這篇文章主要給大家結合微信支付接口開發的實踐,從獲取用戶授權到各主要接口的使用方法等方面介紹微信支付的關鍵點技術，有需要的小夥伴可以參考下最近做了微信公衆號支付的開發，由於是第一次做也摸索了幾天的時間，也只是達到了實現功能的水平，並沒有太

yigehui12 2020-07-07 09:34:21

招商銀行 網上支付 交易失敗 超出交易金額限制 61(RVB1519) 解決方案

之前使用招商銀行的 網上銀行(大衆版) 網頁進行支付 都是可以成功的，但最近無論是 通過 網頁版 還是 發送到手機銀行 進行操作 都提示 “  交易失敗 超出交易金額限制 61(RVB1519) ”。 即使我把交易金額修改爲 500元，仍

dandaoyi 2020-07-06 22:11:27

微信公衆號開發使用測試號不能測試支付接口的解決方案

概述 大家很清楚，在測試環境中公衆號的app id是絕對不能和生產環境的app id相同！！！如果這個問題都不清楚的就應該面壁去。。。 通常在測試環境上使用的的app id有兩種，分別如下。 （1）公衆號內提供的測試號 （2

chyohn 2020-07-06 09:22:51

與國內外六位前端專家週末相約，共討前端技術難點與創新實踐

由CSDN全力打造的“前端開發創新實踐”線上峯會將於7月8日（週六）召開。峯會邀請到多位國內外知名企業前端技術專家，共話當前主流、熱門前端技術，分享企業優秀前端項目研發實踐。本峯會已邀請到來自Smashing Magazine、美

陈秋歌 2020-07-07 18:17:21