Android类似支付宝支付框UI组件

来源：互联网发布：淘宝详情页图片分辨率编辑：程序博客网时间：2024/05/20 05:24

效果

哒哒哒，把去年公司接入的支付密码的一个组件放出来，效果还可以看下图

效果怎么说呢还可以

布局分析

头部，请输入密码和关闭按钮线性布局

接着的密码框，一组ImageView

接着的键盘是GridView，分割线是用horizontalSpacing和verticalSpacing做

布局实现

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#fdfdfe"    android:orientation="vertical">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#f2f2f2">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:text="请输入支付密码"            android:textColor="#000"            android:textSize="16sp" />        <ImageView            android:id="@+id/iv_pay_password_exit"            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_alignParentRight="true"            android:background="@drawable/selector_bg_nothing_press_grey"            android:padding="10dp"            android:src="@drawable/icon_pay_exit" />    </RelativeLayout>    <LinearLayout        android:id="@+id/ll_pay_password"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:layout_marginBottom="10dp"        android:layout_marginTop="20dp">        <ImageView            android:id="@+id/iv_pay_password_1"            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_marginRight="10dp"            android:background="@drawable/shape_bg_gray_white_with_round"            android:padding="15dp" />        <ImageView            android:id="@+id/iv_pay_password_2"            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_marginRight="10dp"            android:background="@drawable/shape_bg_gray_white_with_round"            android:padding="15dp" />        <ImageView            android:id="@+id/iv_pay_password_3"            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_marginRight="10dp"            android:background="@drawable/shape_bg_gray_white_with_round"            android:padding="15dp" />        <ImageView            android:id="@+id/iv_pay_password_4"            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_marginRight="10dp"            android:background="@drawable/shape_bg_gray_white_with_round"            android:padding="15dp" />        <ImageView            android:id="@+id/iv_pay_password_5"            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_marginRight="10dp"            android:background="@drawable/shape_bg_gray_white_with_round"            android:padding="15dp" />        <ImageView            android:id="@+id/iv_pay_password_6"            android:layout_width="40dp"            android:layout_height="40dp"            android:background="@drawable/shape_bg_gray_white_with_round"            android:padding="15dp" />    </LinearLayout>    <LinearLayout        android:id="@+id/ll_pay_password_modify_password"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:orientation="horizontal"        android:paddingBottom="10dp"        android:paddingTop="15dp">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="原密码不是6位或不是纯数字请前往"            android:textColor="#666"            android:textSize="13sp" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="8dp"            android:text="@string/modify_password"            android:textColor="#71c8f0"            android:textSize="13sp" />    </LinearLayout>    <View        android:layout_width="match_parent"        android:layout_height="2px"        android:layout_marginTop="15dp"        android:background="#d7d6d6" />    <GridView        android:id="@+id/gv_pay_password"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#d7d6d6"        android:horizontalSpacing="2px"        android:numColumns="3"        android:verticalSpacing="2px"></GridView></LinearLayout>

逻辑部分

主要部分就是渲染密码键盘，以及对键盘点击后联动密码输入框，注释也都加了，直接上代码

import android.animation.Animator;import android.animation.ObjectAnimator;import android.app.Activity;import android.app.Dialog;import android.content.Context;import android.content.Intent;import android.plus.BestAdapter;import android.plus.SM;import android.plus.ViewHolder;import android.view.Gravity;import android.view.View;import android.view.Window;import android.view.WindowManager;import android.widget.GridView;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.RelativeLayout;import android.widget.TextView;import java.util.ArrayList;import java.util.Collections;import java.util.List;import static com.weechan.shidexianapp.R.style.dialog;/** * Created by yufeng on 2016/10/21. */public class PayPasswordDialog extends Dialog implements View.OnClickListener {    //密码    private StringBuffer password = new StringBuffer();    //密码框    private ImageView iv1, iv2, iv3, iv4, iv5, iv6;    private ImageView[] imageViews = new ImageView[6];    private LinearLayout llPassword;    //密码输入完成后锁定标识    private boolean lock = false;    public PayPasswordDialog(Context context) {        super(context, dialog);    }    private void addListener() {        findViewById(R.id.iv_pay_password_exit).setOnClickListener(this);        findViewById(R.id.ll_pay_password_modify_password).setOnClickListener(this);    }    public void initView(Context context) {        setContentView(R.layout.dialog_pay_password);        setCanceledOnTouchOutside(true);        //设置dialog宽度为屏幕宽度  并且在下面显示  而且带上动画        WindowManager.LayoutParams params = getWindow().getAttributes();        params.width = SM.getScreenWidth((Activity) context);        Window window = getWindow();        window.setAttributes(params);        getWindow().setGravity(Gravity.BOTTOM);        getWindow().setWindowAnimations(R.style.dialogWindowAnim);        iv1 = (ImageView) findViewById(R.id.iv_pay_password_1);        iv2 = (ImageView) findViewById(R.id.iv_pay_password_2);        iv3 = (ImageView) findViewById(R.id.iv_pay_password_3);        iv4 = (ImageView) findViewById(R.id.iv_pay_password_4);        iv5 = (ImageView) findViewById(R.id.iv_pay_password_5);        iv6 = (ImageView) findViewById(R.id.iv_pay_password_6);        imageViews[0] = iv1;        imageViews[1] = iv2;        imageViews[2] = iv3;        imageViews[3] = iv4;        imageViews[4] = iv5;        imageViews[5] = iv6;        //密码框父组件        llPassword = (LinearLayout) findViewById(R.id.ll_pay_password);        GridView gridView = (GridView) findViewById(R.id.gv_pay_password);        String[] numbers = {"1", "2", "3", "4", "5", "6", "7", "8", "9", " ", "0", "x"};        List<String> numberList = new ArrayList<>();        Collections.addAll(numberList, numbers);        gridView.setAdapter(new BestAdapter<String>(context, R.layout.item_pay_password_number, numberList) {            @Override            protected void getExView(ViewHolder holder, final String s) {                TextView textView = (TextView) holder.getView(R.id.tv_pay_password_number);                ImageView imageView = (ImageView) holder.getView(R.id.iv_pay_password_number);                RelativeLayout relativeLayout = (RelativeLayout) holder.getView(R.id.ll_pay_password_number);                if (!s.equals("x")) {  //无操作和显示的格子                    textView.setVisibility(View.VISIBLE);                    imageView.setVisibility(View.GONE);                }                try {                    //数字                    Integer.parseInt(s);                    textView.setText(s);                    relativeLayout.setBackgroundResource(R.drawable.selector_bg_fdfdfe_press_grey);                } catch (Exception e) {                    //删除和空格                    if (s.equals("x")) {                        //显示删除的图片  隐藏数字的text                        imageView.setVisibility(View.VISIBLE);                        textView.setVisibility(View.GONE);                    } else {                        //无操作和显示的格子                        textView.setText(s);                    }                    relativeLayout.setBackgroundResource(R.drawable.selector_bg_d3d6da_press_grey);                }                relativeLayout.setOnClickListener(new View.OnClickListener() {                    @Override                    public void onClick(View v) {                        //是否锁定                        if (lock) return;                        if (s.equals("x") || s.equals(" ")) {                            if (s.equals("x") && password.length() > 0) {//限制删除                                delete();                            }                        } else if (password.length() < 6) {//显示输入                            append(s);                        }                        if (password.length() == 6) {                            //输入密码完成                            if (onPasswordInput != null)                                onPasswordInput.onInputComplete(password.toString());                            lock = true;//锁定                        }                    }                });            }        });        addListener();    }    private void delete() {        //删除        ImageView imageView = imageViews[password.length() - 1];        imageView.setImageBitmap(null);        password.delete(password.length() - 1, password.length());    }    private void append(String key) {        //添加        password.append(key);        ImageView imageView = imageViews[password.length() - 1];        imageView.setImageResource(R.drawable.shape_bg_black_with_circle);    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.iv_pay_password_exit:                dismiss();                break;        }    }    private onPasswordInput onPasswordInput;    public PayPasswordDialog.onPasswordInput getOnPasswordInput() {        return onPasswordInput;    }    public void setOnPasswordInput(PayPasswordDialog.onPasswordInput onPasswordInput) {        this.onPasswordInput = onPasswordInput;    }    public interface onPasswordInput {        void onInputComplete(String password);    }    /**     * 这是一个密码错误的抖动动画     * 外部自己逻辑密码错误的时候调用     */    public void showPasswordError() {        ObjectAnimator animator = ObjectAnimator.ofFloat(llPassword, "translationX", 0f, 35f, -35f, 0f);        animator.setDuration(100);        animator.setRepeatCount(3);//        animator.setInterpolator(new AccelerateDecelerateInterpolator());        animator.start();        animator.addListener(new Animator.AnimatorListener() {            @Override            public void onAnimationStart(Animator animation) {            }            @Override            public void onAnimationEnd(Animator animation) {                //删除密码和密码框状态                password=new StringBuffer();                for (ImageView imageView : imageViews) {                    imageView.setImageBitmap(null);                }                //解锁                lock = false;            }            @Override            public void onAnimationCancel(Animator animation) {            }            @Override            public void onAnimationRepeat(Animator animation) {            }        });    }}

外部调用也比较简单，如下

        dialog = new PayPasswordDialog(context);        dialog.initView(context);        dialog.show();        dialog.setOnPasswordInput(new PayPasswordDialog.onPasswordInput() {            @Override            public void onInputComplete(String password) {                //你的支付请求            }        });

需要注意的是在密码错误的时候要调用

dialog.showPasswordError();

组件会有个抖动的动画，交互比较好

===============================源码呢哈哈哈，等等会传个完成的Demo项目========================

0 0