Android仿支付寶訂單確認和支付

原創 黑色的眼 2018-09-03 19:58

1.效果圖


2.實現方式

dialog_confirm_order.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <LinearLayout
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="40dp">
        <TextView
            android:textColor="#000000"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:text="在線支付"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/tv_close"
            android:textColor="#000000"
            android:text="X"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="30dp">
        <TextView
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:text="支付金額"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="￥50.00"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="30dp">
        <TextView
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:text="訂單信息"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="某某某購買了十桶泡麪"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="30dp">
        <TextView
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:text="付款方式"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="賬戶餘額"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <TextView
        android:layout_gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="40dp" />

    <Button
        android:id="@+id/btn_confirmorder"
        android:background="#9bbdf2"
        android:text="立即支付"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

3.dialog_input_password.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <LinearLayout
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="40dp">
        <TextView
            android:id="@+id/tv_close"
            android:text="X"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:text="請輸入支付密碼"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:paddingLeft="40dp"
        android:paddingRight="40dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.example.mama.paydemo.widget.PayPsdInputView
            android:inputType="number"
            android:id="@+id/et_password"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_gravity="right"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:paddingRight="40dp"
            android:gravity="right"
            android:text="忘記密碼?"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>


</LinearLayout>

4.自定義輸入框PayPsdInputView.java 

package com.example.mama.paydemo.widget;


import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.text.InputFilter;
import android.util.AttributeSet;
import android.widget.EditText;

import com.example.mama.paydemo.R;

import static android.graphics.Paint.ANTI_ALIAS_FLAG;

/**
 * Created by mama on 2017/12/5.
 */

public class PayPsdInputView extends EditText {
    private Context mContext;
    /**
     * 第一個圓開始繪製的圓心座標
     */
    private float startX;
    private float startY;


    private float cX;


    /**
     * 實心圓的半徑
     */
    private int radius = 10;
    /**
     * view的高度
     */
    private int height;
    private int width;

    /**
     * 當前輸入密碼位數
     */
    private int textLength = 0;
    private int bottomLineLength;
    /**
     * 最大輸入位數
     */
    private int maxCount = 6;
    /**
     * 圓的顏色   默認BLACK
     */
    private int circleColor = Color.BLACK;
    /**
     * 底部線的顏色   默認GRAY
     */
    private int bottomLineColor = Color.GRAY;

    /**
     * 分割線的顏色
     */
    private int borderColor = Color.GRAY;
    /**
     * 分割線的畫筆
     */
    private Paint borderPaint;
    /**
     * 分割線開始的座標x
     */
    private int divideLineWStartX;

    /**
     * 分割線的寬度  默認2
     */
    private int divideLineWidth = 2;
    /**
     * 豎直分割線的顏色
     */
    private int divideLineColor = Color.GRAY;
    private int focusedColor = Color.RED;
    private RectF rectF = new RectF();
    private RectF focusedRecF = new RectF();
    private int psdType = 0;
    private final static int psdType_weChat = 0;
    private final static int psdType_bottomLine = 1;

    /**
     * 矩形邊框的圓角
     */
    private int rectAngle = 0;
    /**
     * 豎直分割線的畫筆
     */
    private Paint divideLinePaint;
    /**
     * 圓的畫筆
     */
    private Paint circlePaint;
    /**
     * 底部線的畫筆
     */
    private Paint bottomLinePaint;

    /**
     * 當前輸入的位置索引
     */
    private int position = 0;

    private onPasswordListener mListener;

    public PayPsdInputView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;

        getAtt(attrs);
        initPaint();

        this.setBackgroundColor(Color.TRANSPARENT);
        this.setCursorVisible(false);
        this.setFilters(new InputFilter[]{new InputFilter.LengthFilter(maxCount)});

    }

    private void getAtt(AttributeSet attrs) {
        TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.PayPsdInputView);
        maxCount = typedArray.getInt(R.styleable.PayPsdInputView_maxCount, maxCount);
        circleColor = typedArray.getColor(R.styleable.PayPsdInputView_circleColor, circleColor);
        bottomLineColor = typedArray.getColor(R.styleable.PayPsdInputView_bottomLineColor, bottomLineColor);
        radius = typedArray.getDimensionPixelOffset(R.styleable.PayPsdInputView_radius, radius);

        divideLineWidth = typedArray.getDimensionPixelSize(R.styleable.PayPsdInputView_divideLineWidth, divideLineWidth);
        divideLineColor = typedArray.getColor(R.styleable.PayPsdInputView_divideLineColor, divideLineColor);
        psdType = typedArray.getInt(R.styleable.PayPsdInputView_psdType, psdType);
        rectAngle = typedArray.getDimensionPixelOffset(R.styleable.PayPsdInputView_rectAngle, rectAngle);
        focusedColor = typedArray.getColor(R.styleable.PayPsdInputView_focusedColor, focusedColor);

        typedArray.recycle();
    }

    /**
     * 初始化畫筆
     */
    private void initPaint() {

        circlePaint = getPaint(5, Paint.Style.FILL, circleColor);

        bottomLinePaint = getPaint(2, Paint.Style.FILL, bottomLineColor);

        borderPaint = getPaint(3, Paint.Style.STROKE, borderColor);

        divideLinePaint = getPaint(divideLineWidth, Paint.Style.FILL, borderColor);

    }

    /**
     * 設置畫筆
     *
     * @param strokeWidth 畫筆寬度
     * @param style       畫筆風格
     * @param color       畫筆顏色
     * @return
     */
    private Paint getPaint(int strokeWidth, Paint.Style style, int color) {
        Paint paint = new Paint(ANTI_ALIAS_FLAG);
        paint.setStrokeWidth(strokeWidth);
        paint.setStyle(style);
        paint.setColor(color);
        paint.setAntiAlias(true);

        return paint;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        height = h;
        width = w;

        divideLineWStartX = w / maxCount;

        startX = w / maxCount / 2;
        startY = h / 2;

        bottomLineLength = w / (maxCount + 2);

        rectF.set(0, 0, width, height);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        //不刪除的畫會默認繪製輸入的文字
//       super.onDraw(canvas);

        switch (psdType) {
            case psdType_weChat:
                drawWeChatBorder(canvas);
                drawItemFocused(canvas, position);
                break;
            case psdType_bottomLine:
                drawBottomBorder(canvas);
                break;
        }

        drawPsdCircle(canvas);
    }

    /**
     * 畫微信支付密碼的樣式
     *
     * @param canvas
     */
    private void drawWeChatBorder(Canvas canvas) {

        canvas.drawRoundRect(rectF, rectAngle, rectAngle, borderPaint);

        for (int i = 0; i < maxCount - 1; i++) {
            canvas.drawLine((i + 1) * divideLineWStartX,
                    0,
                    (i + 1) * divideLineWStartX,
                    height,
                    divideLinePaint);
        }

    }

    private void drawItemFocused(Canvas canvas, int position) {
        if (position > maxCount - 1) {
            return;
        }
        focusedRecF.set(position * divideLineWStartX, 0, (position + 1) * divideLineWStartX,
                height);
        canvas.drawRoundRect(focusedRecF, rectAngle, rectAngle, getPaint(3, Paint.Style.STROKE, focusedColor));
    }

    /**
     * 畫底部顯示的分割線
     *
     * @param canvas
     */
    private void drawBottomBorder(Canvas canvas) {

        for (int i = 0; i < maxCount; i++) {
            cX = startX + i * 2 * startX;
            canvas.drawLine(cX - bottomLineLength / 2,
                    height,
                    cX + bottomLineLength / 2,
                    height, bottomLinePaint);
        }
    }

    /**
     * 畫密碼實心圓
     *
     * @param canvas
     */
    private void drawPsdCircle(Canvas canvas) {
        for (int i = 0; i < textLength; i++) {
            canvas.drawCircle(startX + i * 2 * startX,
                    startY,
                    radius,
                    circlePaint);
        }
    }

    @Override
    protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        super.onTextChanged(text, start, lengthBefore, lengthAfter);
        this.position = start + lengthAfter;
        textLength = text.toString().length();

        if (textLength>0&&textLength == maxCount) {
            mListener.getInput(getPasswordString());
        }
        invalidate();
    }

    @Override
    protected void onSelectionChanged(int selStart, int selEnd) {
        super.onSelectionChanged(selStart, selEnd);

        //保證光標始終在最後
        if (selStart == selEnd) {
            setSelection(getText().length());
        }
    }



    /**
     * 獲取輸入的密碼
     *
     * @return
     */
    public String getPasswordString() {
        return getText().toString().trim();
    }

    public void getComparePassword(onPasswordListener listener) {
        mListener = listener;
    }
    /**
     * 密碼監聽
     */
    public interface onPasswordListener {
        void getInput(String data);
    }
}

5.調用 MainActivity 

package com.example.mama.paydemo;

import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Display;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

import com.example.mama.paydemo.widget.PayPsdInputView;

/**
 * Created by dingkangkang on 2017/12/5.
 */
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void zhifu(View view){
        final AlertDialog dialog = new AlertDialog.Builder(this).create();
        Window w = dialog.getWindow();
        w.setGravity(Gravity.BOTTOM);
        //給彈窗加滑出動畫
        w.setWindowAnimations(R.style.DialogAnimation);
        //設置外圍點擊消失
        dialog.setCanceledOnTouchOutside(true);
        //加上會去掉邊界
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable());
        dialog.show();
        //以下必須寫在show之後，不然會失效
        WindowManager wm = w.getWindowManager();
        Display d = wm.getDefaultDisplay();//屏幕
        WindowManager.LayoutParams p = w.getAttributes();
        p.width = (int)(d.getWidth()*1);//設置彈窗寬度爲屏幕的寬度
        w.setAttributes(p);
        View v = LayoutInflater.from(this).inflate(R.layout.dialog_confirm_order,null);
        dialog.setContentView(v);//給彈窗加載佈局

        TextView tv_close = (TextView)v.findViewById(R.id.tv_close);
        Button btn_confirmorder = (Button)v.findViewById(R.id.btn_confirmorder);
        btn_confirmorder.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
                showPayDialog();
            }
        });
        tv_close.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });

    }
    //輸入密碼彈窗
    public void showPayDialog(){
        final AlertDialog dialog = new AlertDialog.Builder(this).create();
        Window w = dialog.getWindow();
        w.setGravity(Gravity.BOTTOM);
        //給彈窗加滑出動畫
        w.setWindowAnimations(R.style.DialogAnimation);
        //設置外圍點擊消失
        dialog.setCanceledOnTouchOutside(true);
        //加上會去掉邊界
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable());
        dialog.show();
        //以下必須寫在show之後，不然會失效
        WindowManager wm = w.getWindowManager();
        Display d = wm.getDefaultDisplay();//屏幕
        WindowManager.LayoutParams p = w.getAttributes();
        p.width = (int)(d.getWidth()*1);//設置彈窗寬度爲屏幕的寬度
        w.setAttributes(p);
        View v = LayoutInflater.from(this).inflate(R.layout.dialog_input_password,null);
        dialog.setContentView(v);//給彈窗加載佈局

        TextView tv_close = (TextView)v.findViewById(R.id.tv_close);
        PayPsdInputView payPsdInputView = (PayPsdInputView)v.findViewById(R.id.et_password);
        //彈出軟鍵盤， AlertDialog中一般的顯示方法不起作用
        dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM);
        final InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
        imm.toggleSoftInput(InputMethodManager.SHOW_FORCED,0);

        payPsdInputView.getComparePassword(new PayPsdInputView.onPasswordListener() {
            @Override
            public void getInput(String data) {
                //此步驟要在 dialog.dismiss(); 之前執行，不然會失效
                if (imm.isActive()){
                    hideSoft();
                }
                dialog.dismiss();
                Toast.makeText(getApplication(),"密碼:::::"+data, Toast.LENGTH_SHORT).show();
            }
        });

        tv_close.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //此步驟要在 dialog.dismiss(); 之前執行，不然會失效
                if (imm.isActive()){
                    hideSoft();
                }
                dialog.dismiss();

            }
        });


    }

    //隱藏軟鍵盤
    private void hideSoft() {
        //隱藏鍵盤，AlertDialog中一般的隱藏方法不起作用
        InputMethodManager imm2 = (InputMethodManager) getSystemService(MainActivity.INPUT_METHOD_SERVICE);
        imm2.toggleSoftInput(InputMethodManager.HIDE_NOT_ALWAYS, 0);
    }
}

6.彈窗動畫 請看

7.自定義動畫屬性    在values下新建  attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 支付屬性 -->
    <declare-styleable name="PayPsdInputView">

        <attr name="maxCount" format="integer" />
        <attr name="circleColor" format="color" />
        <attr name="bottomLineColor" format="color" />
        <attr name="radius" format="reference" />
        <attr name="divideLineWidth" format="dimension" />
        <attr name="divideLineColor" format="color" />
        <attr name="rectAngle" format="dimension" />
        <attr name="focusedColor" format="color"/>
        <attr name="psdType" format="enum">
            <enum name="weChat" value="0" />
            <enum name="bottomLine" value="1" />
        </attr>
    </declare-styleable>

    <declare-styleable name="CircleProgressBarView">

        <attr name="circleBgStrokeWidth" format="dimension" />
        <attr name="progressStrokeWidth" format="dimension" />

        <attr name="circleBgColor" format="color" />
        <attr name="progressColor" format="color" />

        <attr name="circleAnimationDuration" format="integer" />

        <attr name="isDrawCenterProgressText" format="boolean" />

        <attr name="centerProgressTextColor" format="color"/>
        <attr name="centerProgressTextSize" format="dimension"/>

    </declare-styleable>

    <declare-styleable name="RadarWaveView">

        <attr name="waveColor" format="color" />

        <attr name="waveAmplitude" format="dimension" />

        <attr name="waveSpeed" format="float" />

        <attr name="waveStartPeriod" format="float" />
        <attr name="waveStart" format="boolean" />

        <attr name="waveFillTop" format="boolean" />
        <attr name="waveFillBottom" format="boolean" />

        <attr name="waveFillType" format="enum">
            <enum name="top" value="0" />
            <enum name="bottom" value="1" />
        </attr>

        <attr name="waveType" format="enum">
            <enum name="sin" value="0" />
            <enum name="cos" value="1" />
        </attr>

    </declare-styleable>
</resources>


8.源碼


9.特別感謝




發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

改變ActionBar右側三個小點的顏色

先介紹一下背景，使用的是Support v7 21+的兼容庫來實現 material style Theme <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActio

进击的小羊 2020-06-28 20:58:49

基於樸素貝葉斯分類器的文本分類算法(C語言)

#include <stdio.h> #include <string.h> #include <direct.h> //_getcwd(), _chdir() #include <stdlib.h> //_MAX_PATH, syste

只要你能好 2020-06-28 05:33:33

Android佈局(3)--幀佈局(FrameLayout)

  在幀佈局中，每添加一個組件都將創建一個空白區域，通稱之爲一幀。這些幀都要被對齊到屏幕左上角，不能單獨爲子組件指定位置。第一個添加到幀佈局中的子組

ToringZZZ 2020-06-27 21:25:07

關於View的一些問題

1、View的回調方法的順序是怎樣的 View從加載開始一些列的回調方法的流程如下：   onFinishInflate（）→onMeasure（）→onSizeChanged（）→onLayout（）→onDraw（）→onWindow

泼墨成空 2020-06-23 13:12:44

GridView動態顯示或隱藏滾動條

使用gridView時，遇到這樣的一個要求，顯示2行記錄，每行顯示3列 若顯示數據小於2行時， 不用顯示滾動條 若顯示數據大於2行時，自動顯示出滾動條。   此時，需要使用的是fadeScrollbars屬性 fadeScrollbar

blog_jenny 2020-06-22 19:51:51

ConstraintLayout 水平方向權重問題

實現效果如下：  如上圖顯示，想讓 中間控件全部填充，設置權重佔比問題                     tv1應設置的屬性：app:layout_constraintTop_toTopOf="parent"          

blog_jenny 2020-06-22 19:51:51

Android：Layout_weight理解

首先看一下Layout_weight屬性的作用：它是用來分配屬於空間的一個屬性，你可以設置他的權重。很多人不知道剩餘空間是個什麼概念，下面我先來說說剩餘空間。 看下面代碼： <?xml version="1.0" encoding="

fso918 2020-06-21 16:30:19

SlidingMenu測拉布局使用詳解

將SlidingMenu整合到自己的項目之中     我們在使用開源的項目之前，都需要先將項目作爲資源引入到我們當前的項目之中。在整合之前，先將github上項目的示例代碼下載下來，導入到eclipse當中。關於將外部項目導入當前項目，

大盗懒羊羊 2020-06-21 01:51:04

Android 不規則圖形佈局的一種實現方法

1. 自定義佈局： public class ImageClip extends FrameLayout { private int width = -1; private int height = -1; pr

jcl1979 2020-06-20 19:39:45

Android studio--退出當前項目，進入項目列表選擇頁面

1 本機環境 window10 ，Android Studio 3.6.2   2 步驟 A File-> Close Project B  展示出項目展示的頁面   如果遇到項目的R文件找不到資源等問題，可以嘗試從項目裏列表中刪除，

haonpu 2020-06-16 04:04:04

Android流式佈局的使用

1 基本功能 當控件在同一行的控件不夠時，自動換行顯示 2 使用場景 標籤的展示，比如熱搜標籤，如下圖 支付寶搜索框的搜索歷史界面   3 實現方式 A 自定義ViewGroup實現流式佈局 https://blog.csdn.net/

haonpu 2020-06-16 04:04:04

RecyclerView使用--分割線設置

1 RecyclerView分割線設置最後一個條目不展示分割線 MyDividerItemDecoration itemDecoration = new MyDividerItemDecoration(this, layoutManag

haonpu 2020-06-16 04:04:04

Android佈局- CoordinateLayout吸頂效果

01 相關概念 CoordinateLayout AppbarLayout 屬性 layout_scrollFlags behavior     02 相關代碼  佈局文件activity_coordinate_layout_demo.x

haonpu 2020-06-16 04:04:04

Android閃屏頁狀態欄的出現將閃屏畫面向下擠壓

1 Splash頁面常用於啓動的頁面改善用戶體驗防止白屏頁面影響體驗 2 常見做法 創建splash頁面   SplashActivity 設置theme 在styles.xml文件中設置頁面的主題 代碼如下： <style nam

haonpu 2020-06-16 04:04:04

Android佈局優化（一）佈局檢查器layout Inspector

01 適用的Android studio的版本     適用Android studio版本3.1以上，  3.1以下的工具是Hierarchy Viewer Hierarchy Viewer 已被棄用。 如果您使用的是 Android

haonpu 2020-06-16 04:04:04