欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  技术分享

Android仿微信支付宝支付密码输入框

程序员文章站 2022-02-07 12:25:02
...

一、场景

现在很多应用都会集成支付功能、不管是直接调用支付SDK还是自己平台的虚拟货币、支付密码都是很重要的、一般的应用会直接使用Edittext作为密码输入框、这个看着就有点low了、高大上一点的就会自定义一个支付界面、然后输入效果也会有相应的设计、比如我们看到的支付宝和微信支付就是这样的、因为常用所以我也就简单的写了一个类似的支付密码输入控件、先来张效果图

Android仿微信支付宝支付密码输入框


二、实现思想如下

1、思路1

密码个数是多少个、就写多少个Edittext、然后监听每个的值、最后组合到一起就是输入的密码、这个方式可以简单的实现顺序输入效果、但是就没有那么灵活了、会考虑当前输入框前后输入框的值是否有、是否需要跳转指针等等麻烦的事、而且代码也比较多、所以这种方式就pass掉了


2、思路2

就是一个Edittext、然后在它上面覆盖密码个数的TextView、随时监听Edittext的内容变化实时反馈到TextView中、就可以达到这种效果了、而且只有一个Edittext、长按退格键可以删除完内容、还可以直接清空类容都很方便、这里有个技巧就是、输入框Edittext的大小应该和TextView组合起来的整体大小一致、点击效果才能更完美、然后Edittext的字体大小应该尽量小(0或者1)、才能保证每次获取焦点时都是在内容最末尾处、这样就可以实现这种支付密码效果了


三、封装代码

根据思路来如果每次用xml布局的话、那还是很麻烦的、要写那么多Textview和布局、这是我们不能忍受的、贴别是应用中多个地方都用到了支付功能、那就GG了、所以我把这些操作都封装到了一个控件里面、然后暴露出相应的方法来设置属性(这里不是很全、可根据自己的需求添加相应的属性方法来达到自己的效果)、使用时就当做一个简单的控件使用就行(本人不是很喜欢自定义属性、感觉有点拖泥带水的、所以都是用方法来实现的)


自定义RelativeLayout代码

/** 
 * Created by ywl on 2016/7/10. 
 */  
public class PayPwdEditText extends RelativeLayout{  
  
    private EditText editText; //文本编辑框  
    private Context context;  
  
    private LinearLayout linearLayout; //文本密码的文本  
    private TextView[] textViews; //文本数组  
  
    private int pwdlength = 6; //密码长度, 默认6  
  
    private OnTextFinishListener onTextFinishListener;  
  
  
    public PayPwdEditText(Context context) {  
        this(context, null);  
    }  
  
    public PayPwdEditText(Context context, AttributeSet attrs) {  
        this(context, attrs, 0);  
    }  
  
    public PayPwdEditText(Context context, AttributeSet attrs, int defStyleAttr) {  
        super(context, attrs, defStyleAttr);  
        this.context = context;  
    }  
}  


初始化Edittext代码

/** 
 * 初始化编辑框 
 * @param bgcolor 
 */  
private void initEdit(int bgcolor)  
{  
    editText = new EditText(context);  
    editText.setBackgroundResource(bgcolor);  
    editText.setCursorVisible(false);  
    editText.setTextSize(0);  
    editText.setInputType(InputType.TYPE_NUMBER_VARIATION_PASSWORD | InputType.TYPE_CLASS_NUMBER);  
    editText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(pwdlength)});  
    editText.addTextChangedListener(new TextWatcher() {  
        @Override  
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {  
            Editable etext = editText.getText();  
            Selection.setSelection(etext, etext.length());  
        }  

        @Override  
        public void onTextChanged(CharSequence s, int start, int before, int count) {  

        }  

        @Override  
        public void afterTextChanged(Editable s) {  
            initDatas(s);  
            if(s.length() == pwdlength)  
            {  
                if(onTextFinishListener != null)  
                {  
                    onTextFinishListener.onFinish(s.toString().trim());  
                }  
            }  
        }  
    });  
    LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);  
    lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);  
    addView(editText, lp);  

} 


根据Edittext的输入内容设置Textview的值

/** 
 * 根据输入字符,显示密码个数 
 * @param s 
 */  
public void initDatas(Editable s)  
{  
    if(s.length() > 0)  
    {  
        int length = s.length();  
        for(int i = 0; i < pwdlength; i  )  
        {  
            if(i < length)  
            {  
                for(int j = 0; j < length; j  )  
                {  
                    char ch = s.charAt(j);  
                    textViews[j].setText(String.valueOf(ch));  
                }  
            }  
            else  
            {  
                textViews[i].setText("");  
            }  
        }  
    }  
    else  
    {  
        for(int i = 0; i < pwdlength; i  )  
        {  
            textViews[i].setText("");  
        }  
    }  
}  


代码就贴到这里、最后给大家附上源代码、有需要的朋友可以直接下载、Demo是用Studio开发完成

android 支付密码框源代码下载链接: Android支付密码输入框 密码: baei