Android仿支付宝淘宝

来源：互联网发布：linux vim 保存并退出编辑：程序博客网时间：2024/05/01 23:26

1.概述

　　点击打开链接

最近有人在问我要所有项目的代码，我在这里声明一下我不是这几个项目公司内部人员，之所以录视频和写博客也是喜欢与人分享和学习而已，最终所有的代码肯定会上传的，只不过会要等全部的效果以及设计模式搞完。在这里感谢内涵段子这个项目，感谢那些提供帮助的博客牛人，希望有一天也能和你们一样。
　　
　　部分人看了视频的反馈某些地方没讲的很细，首先这肯定是我的问题，但是有很多东西其实是基础，比如我们用到了属性动画很多地方用到了canvas画图如果没怎么接触过可能会有点难度，我到后期也会去录制一些基础的视频，不过要等博客的访问量到达一定的数量，自己也需要去沉淀。
　　
　　今天我们就来写一个相对简单的效果，就是仿淘宝确定收货和支付宝转账的自定义密码输入框和键盘。视频地址：http://pan.baidu.com/s/1mhOVT3a
　　
　　

这里写图片描述

2．效果实现　

　　
2.1 实现思路：

　　这个效果主要的实现就是Canvas画图，我们可以去搜搜看看别人怎么实现的，大部分都是自定义控件去绘制，还有一小部分是直接用LinearLayout写死了，直接就是用的代码去控制布局。我们这里使用自定义控件去实现
　　2.1.1 主要涉及到三个部分需要去绘制：背景、分割线、密码圆点
　　2.1.2 继承自谁都可以，最好还是不要继承自View，这样就需要多实现一个onMeasure()方法，这里考虑到可能有些地方不会使用自定义的键盘，所以决定继承EditText。　　

2.2 绘制：背景、分割线、密码圆点：
　　
　　这里需要使用自定义属性，这个相信大家都比较了解就不做过多的讲解，大概涉及的属性有：背景圆角、背景边框大小、背景边框颜色、分割线大小、分割线颜色、密码圆点的颜色、密码圆点的半径大小。具体的attrs.xml就是：　　

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="PasswordEditText">        <!-- 密码的个数 -->        <attr name="passwordNumber" format="integer"/>        <!-- 密码圆点的半径 -->        <attr name="passwordRadius" format="dimension" />        <!-- 密码圆点的颜色 -->        <attr name="passwordColor" format="color" />        <!-- 分割线的颜色 -->        <attr name="divisionLineColor" format="color" />        <!-- 分割线的大小 -->        <attr name="divisionLineSize" format="color" />        <!-- 背景边框的颜色 -->        <attr name="bgColor" format="color" />        <!-- 背景边框的大小 -->        <attr name="bgSize" format="dimension" />        <!-- 背景边框的圆角大小 -->        <attr name="bgCorner" format="dimension"/>    </declare-styleable></resources>

　　接下来我们就需要去绘制了，首先获取自定义属性，然后在onDraw()中去绘制

/** * Created by Darren on 2016/12/14. * Email: 240336124@qq.com * Description: 密码输入框 */public class PasswordEditText extends EditText {    // 画笔    private Paint mPaint;    // 一个密码所占的宽度    private int mPasswordItemWidth;    // 密码的个数默认为6位数    private int mPasswordNumber = 6;    // 背景边框颜色    private int mBgColor = Color.parseColor("#d1d2d6");    // 背景边框大小    private int mBgSize = 1;    // 背景边框圆角大小    private int mBgCorner = 0;    // 分割线的颜色    private int mDivisionLineColor = mBgColor;    // 分割线的大小    private int mDivisionLineSize = 1;    // 密码圆点的颜色    private int mPasswordColor = mDivisionLineColor;    // 密码圆点的半径大小    private int mPasswordRadius = 4;    public PasswordEditText(Context context) {        this(context, null);    }    public PasswordEditText(Context context, AttributeSet attrs) {        super(context, attrs);        initPaint();        initAttributeSet(context, attrs);        // 设置输入模式是密码        setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);        // 不显示光标        setCursorVisible(false);    }    /**     * 初始化属性     */    private void initAttributeSet(Context context, AttributeSet attrs) {        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PasswordEditText);        // 获取大小        mDivisionLineSize = (int) array.getDimension(R.styleable.PasswordEditText_divisionLineSize, dip2px(mDivisionLineSize));        mPasswordRadius = (int) array.getDimension(R.styleable.PasswordEditText_passwordRadius, dip2px(mPasswordRadius));        mBgSize = (int) array.getDimension(R.styleable.PasswordEditText_bgSize, dip2px(mBgSize));        mBgCorner = (int) array.getDimension(R.styleable.PasswordEditText_bgCorner, 0);        // 获取颜色        mBgColor = array.getColor(R.styleable.PasswordEditText_bgColor, mBgColor);        mDivisionLineColor = array.getColor(R.styleable.PasswordEditText_divisionLineColor, mDivisionLineColor);        mPasswordColor = array.getColor(R.styleable.PasswordEditText_passwordColor, mDivisionLineColor);        array.recycle();    }    /**     * 初始化画笔     */    private void initPaint() {        mPaint = new Paint();        mPaint.setAntiAlias(true);        mPaint.setDither(true);    }    /**     * dip 转 px     */    private int dip2px(int dip) {        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,                dip, getResources().getDisplayMetrics());    }    @Override    protected void onDraw(Canvas canvas) {        int passwordWidth = getWidth() - (mPasswordNumber - 1) * mDivisionLineSize;        mPasswordItemWidth = passwordWidth / mPasswordNumber;        // 绘制背景        drawBg(canvas);        // 绘制分割线        drawDivisionLine(canvas);        // 绘制密码        drawHidePassword(canvas);    }    /**     * 绘制背景     */    private void drawBg(Canvas canvas) {        mPaint.setColor(mBgColor);        // 设置画笔为空心        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setStrokeWidth(mBgSize);        RectF rectF = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize);        // 如果没有设置圆角，就画矩形        if (mBgCorner == 0) {            canvas.drawRect(rectF, mPaint);        } else {            // 如果有设置圆角就画圆矩形            canvas.drawRoundRect(rectF, mBgCorner, mBgCorner, mPaint);        }    }    /**     * 绘制隐藏的密码     */    private void drawHidePassword(Canvas canvas) {        int passwordLength = getText().length();        mPaint.setColor(mPasswordColor);        // 设置画笔为实心        mPaint.setStyle(Paint.Style.FILL);        for (int i = 0; i < passwordLength; i++) {            int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;            canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint);        }    }    /**     * 绘制分割线     */    private void drawDivisionLine(Canvas canvas) {        mPaint.setStrokeWidth(mDivisionLineSize);        mPaint.setColor(mDivisionLineColor);        for (int i = 0; i < mPasswordNumber - 1; i++) {            int startX = (i + 1) * mDivisionLineSize + (i + 1) * mPasswordItemWidth + mBgSize;            canvas.drawLine(startX, mBgSize, startX, getHeight() - mBgSize, mPaint);        }    }}

　
　目前的效果就是点击之后会弹出系统的键盘，实现了基本的效果，接下来我们再加入监听也就说当密码输入完成我们需要回调监听。
　
　

这里写图片描述

　2.2 自定义键盘：

　　接下来我们看看自定义键盘吧，自定义键盘我们可以使用GridView或是RecyclerView去显示，最好还是不要去画了,采用自定义View加载一个layout布局，给每个按钮一个点击事件然后回调出去即可。

 /** * Created by Darren on 2016/12/14. * Email: 240336124@qq.com * Description: 自定义键盘 */public class CustomerKeyboard extends LinearLayout implements View.OnClickListener {    private CustomerKeyboardClickListener mListener;    public CustomerKeyboard(Context context) {        this(context, null);    }    public CustomerKeyboard(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public CustomerKeyboard(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        inflate(context, R.layout.ui_customer_keyboard, this);        setChildViewOnclick(this);    }    /**     * 设置键盘子View的点击事件     */    private void setChildViewOnclick(ViewGroup parent) {        int childCount = parent.getChildCount();        for (int i = 0; i < childCount; i++) {            // 不断的递归设置点击事件            View view = parent.getChildAt(i);            if (view instanceof ViewGroup) {                setChildViewOnclick((ViewGroup) view);                continue;            }            view.setOnClickListener(this);        }    }    @Override    public void onClick(View v) {        View clickView = v;        if (clickView instanceof TextView) {            // 如果点击的是TextView            String number = ((TextView) clickView).getText().toString();            if (!TextUtils.isEmpty(number)) {                if (mListener != null) {                    // 回调                    mListener.click(number);                }            }        } else if (clickView instanceof ImageView) {            // 如果是图片那肯定点击的是删除            if (mListener != null) {                mListener.delete();            }        }    }    /**     * 设置键盘的点击回调监听     */    public void setOnCustomerKeyboardClickListener(CustomerKeyboardClickListener listener) {        this.mListener = listener;    }    /**     * 点击键盘的回调监听     */    public interface CustomerKeyboardClickListener {        public void click(String number);        public void delete();    }}

　
2.3. 自定义密码输入框配套自定义键盘
　　
　　自定义密码输入框写好了，自定义键盘也完成了，最后就是需要把他们两个套在一起。首先密码输入框点击再也不能弹系统键盘，点击键盘的时候需要往密码输入框里面塞密码，还需要删除，所以密码输入框还得提供两个方法

 /** * Created by Darren on 2016/12/14. * Email: 240336124@qq.com * Description: 密码输入框 */public class PasswordEditText extends EditText {    // 省略之前的代码...    /**     * 添加密码     */    public void addPassword(String number) {        number = getText().toString().trim() + number;        if (number.length() > mPasswordNumber) {            return;        }        setText(number);    }    /**     * 删除最后一位密码     */    public void deleteLastPassword() {        String currentText = getText().toString().trim();        if (TextUtils.isEmpty(currentText)) {            return;        }        currentText = currentText.substring(0, currentText.length() - 1);        setText(currentText);    }}

　2.4. 最后的测试　

/** * Created by Darren on 2016/12/14. * Email: 240336124@qq.com * Description: 自定义键盘和自定义密码输入框测试 */public class MainActivity extends Activity implements CustomerKeyboard.CustomerKeyboardClickListener,        PasswordEditText.PasswordFullListener{    private CustomerKeyboard mCustomerKeyboard;    private PasswordEditText mPasswordEditText;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mPasswordEditText = (PasswordEditText) findViewById(R.id.password_et);        mCustomerKeyboard = (CustomerKeyboard) findViewById(R.id.custom_key_board);        // 设置监听        mCustomerKeyboard.setOnCustomerKeyboardClickListener(this);        mPasswordEditText.setOnPasswordFullListener(this);    }    /**     * 键盘数字点击监听回调方法     */    @Override    public void click(String number) {        mPasswordEditText.addPassword(number);    }    /**     * 键盘删除点击监听回调方法     */    @Override    public void delete() {        mPasswordEditText.deleteLastPassword();    }    /**     * 密码输入完毕回调方法     */    @Override    public void passwordFull(String password) {        Toast.makeText(this, "密码填充完毕：" + password, Toast.LENGTH_SHORT).show();    }}

这里写图片描述

　　最后我们整合到Dialog中就好了，Dialog我们也需要利用Builder设计模式自己去封装通用的效果，因为系统的太过于麻烦，这里就不做介绍我们后面再说吧，具体请看视频讲解：http://pan.baidu.com/s/1mhOVT3a

　　附源码地址：
　　
　　https://github.com/Shenmowen/PasswordEditText

0 0