Android 自定义密码输入框

一、前言：

我们在软件开发过程中，经常会遇到密码输入框，这就要我们自定控件来实现，下面的自定义密码框，是参考我的同事写出来的，今天分享一下。

1. gitHub 地址：

2. 效果图如下：

图 1.png
图 2.png
图 3.png
图 4.png

二、使用 ：

我只介绍第二种，第一种是弹窗，回调有点多，大家可以下载源码看一下啊。

强大工具类依赖：（自定义布局用不到，用到了弹窗和键盘的显示隐藏）

implementation 'com.blankj:utilcode:1.25.2'

1.TwoActivity调用：

public class TwoActivity extends Activity {

    @BindView(R.id.activationCode)
    ActivationCodeBox activationCode;
    @BindView(R.id.btn_cancel)
    Button btnCancel;
    @BindView(R.id.container)
    LinearLayout container;


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_two);
        ButterKnife.bind(this);
        initData();
    }

    private void initData() {

        //激活码输入完成
        activationCode.setInputCompleteListener(new ActivationCodeBox.InputCompleteListener() {
            @Override
            public void inputComplete(String code) {
                KeyboardUtils.hideSoftInput(TwoActivity.this);

                //回调进入 Activity
                if (code.equals("1234")) {
                    //激活成功
                    ToastUtils.showShort("激活成功");
                    activationCode.showTip(false, "");
                } else {
                    //激活失败
                    ToastUtils.showShort("激活失败");
                    activationCode.showTip(true, "激活失败");
                }

            }
        });

        //返回上一页
        btnCancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TwoActivity.this.finish();
            }
        });


    }


    /**
     * 页面跳转
     *
     * @param mContext
     */
    public static void launch(Context mContext) {

        Intent intent = new Intent(mContext, TwoActivity.class);
        mContext.startActivity(intent);
    }

2.自定义ActivationCodeBox布局：

public class ActivationCodeBox extends RelativeLayout {
    private Context context;
    private TextView[] textViews;
    private static int MAXlength = 4;
    private TextView tvTip;
    private String inputContent;

    private EditText etCode;
    private List<String> codes = new ArrayList<>();
    private InputMethodManager imm;
    private   Animation shake;
    public ActivationCodeBox(Context context) {
        super(context);
        this.context = context;
        loadView();
    }

    public ActivationCodeBox(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        loadView();
    }

    public ActivationCodeBox(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        loadView();
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public ActivationCodeBox(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        this.context = context;
        loadView();
    }
    private void loadView(){
        //抖动效果
        shake = AnimationUtils.loadAnimation(context, R.anim.shake);
        imm = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);
        View view = LayoutInflater.from(context).inflate(R.layout.activation_code_box, this);
        initView(view);
        initEvent();
    }
    private void initView(View view){
        textViews = new TextView[MAXlength];
        textViews[0] = (TextView) view.findViewById(R.id.tv_code1);
        textViews[1] = (TextView) view.findViewById(R.id.tv_code2);
        textViews[2] = (TextView) view.findViewById(R.id.tv_code3);
        textViews[3] = (TextView) view.findViewById(R.id.tv_code4);
        etCode = (EditText) view.findViewById(R.id.et_code);
        tvTip = (TextView) view.findViewById(R.id.tv_tip);

    }
    private void initEvent(){
        //验证码输入
        etCode.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
            }
            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
            }
            @Override
            public void afterTextChanged(Editable editable) {

                inputContent = etCode.getText().toString();
                if (inputCompleteListener != null) {
                    if (inputContent.length() >= MAXlength) {
                        inputCompleteListener.inputComplete(inputContent);
                    }
                }
                for (int i = 0; i < MAXlength; i++) {
                    if (i < inputContent.length()) {
                        textViews[i].setText(String.valueOf(inputContent.charAt(i)));
                    } else {
                        textViews[i].setText("");
                    }
                }


            }
        });

    }

    /**
     * 设置高亮颜色
     */
    private void setColor(boolean isShow, int color){

        for (int i = 0; i <MAXlength ; i++) {
            textViews[i].setTextColor(color);
            if(isShow){
                textViews[i].setBackground(context.getResources().getDrawable(R.drawable.box_red));
                //抖动
                textViews[i].startAnimation(shake);
            }else {
                textViews[i].setBackground(context.getResources().getDrawable(R.drawable.box_blue));

            }
        }

    }
    /**
     * 获得手机号验证码
     * @return 验证码
     */
    public String getPhoneCode(){
        StringBuilder sb = new StringBuilder();
        for (String code : codes) {
            sb.append(code);
        }
        return sb.toString();
    }

    /**
     * 显示提示语
     * @param isShow 是否显示提示语 true 代码验证码错误；false 验证码失败
     * @param content 提示语内容
     */
    public void showTip(boolean isShow,String content){
        tvTip.setVisibility(isShow?VISIBLE:INVISIBLE);
        tvTip.setText(content);
        if(isShow){
            setColor(isShow,context.getColor(R.color.color_ffe93a3a));

        }else{
            setColor(isShow,context.getColor(R.color.btn_press_bg_color));
            etCode.setText("");
            codes.clear();

        }
    }

    private InputCompleteListener inputCompleteListener;
    public void setInputCompleteListener(InputCompleteListener inputCompleteListener) {
        this.inputCompleteListener = inputCompleteListener;
    }
    public interface InputCompleteListener {
        void inputComplete(String code);
    }
}

3.activation_code_box布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
        android:id="@+id/ll_code"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp_10"
        android:layout_marginRight="@dimen/dp_10"
        android:orientation="horizontal"
        android:gravity="center"
        >

            <TextView
                android:layout_marginRight="@dimen/dp_8"
                android:id="@+id/tv_code1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:textColor="@color/color_ff333333"
                android:textSize="@dimen/sp_15"
                android:inputType="text"
                android:background="@drawable/box_blue"
                android:gravity="center"/>



            <TextView
                android:layout_marginRight="@dimen/dp_8"
                android:layout_marginLeft="@dimen/dp_8"
                android:id="@+id/tv_code2"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:textColor="@color/color_ff333333"
                android:textSize="@dimen/sp_15"
                android:inputType="text"
                android:background="@drawable/box_blue"
                android:gravity="center"/>



            <TextView
                android:layout_marginRight="@dimen/dp_8"
                android:layout_marginLeft="@dimen/dp_8"
                android:id="@+id/tv_code3"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:textColor="@color/color_ff333333"
                android:textSize="@dimen/sp_15"
                android:inputType="text"
                android:background="@drawable/box_blue"
                android:gravity="center"/>


            <TextView
                android:layout_marginLeft="@dimen/dp_8"
                android:id="@+id/tv_code4"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:textColor="@color/color_ff333333"
                android:background="@drawable/box_blue"
                android:inputType="text"
                android:textSize="@dimen/sp_15"
                android:gravity="center"/>

    </LinearLayout>

    <EditText
        android:id="@+id/et_code"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/ll_code"
        android:layout_alignBottom="@+id/ll_code"
        android:background="@android:color/transparent"
        android:textColor="@android:color/transparent"
        android:cursorVisible="false"
        android:inputType="textPassword"
        />
    <TextView
        android:id="@+id/tv_tip"
        android:layout_below="@+id/ll_code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp_8"
        android:textSize="@dimen/sp_15"
        android:textColor="@color/color_ffe93a3a"
        android:maxLines="1"
        android:ellipsize="end"
        android:layout_margin="6dp"
        android:visibility="invisible"
        />
</RelativeLayout>

3.activity_two布局：

<?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:orientation="vertical"
    android:background="@drawable/button_white_fillet_rectangle"
    android:id="@+id/container"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="请输入激活码"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="20dp"
        android:layout_marginBottom="25dp"
        android:textColor="#ff333333"
        android:textSize="18sp"
        android:drawableLeft="@drawable/icon_activation_code"
        android:drawablePadding="5dp"
        />
    <com.function.luo.ui.ActivationCodeBox
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/activationCode"
        android:layout_below="@+id/fpc_1"
        android:layout_marginLeft="@dimen/dp_20"
        android:layout_marginRight="@dimen/dp_20"/>
    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="150dp"
        android:layout_height="35dp"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="20dp"
        android:background="@drawable/button_selector"
        android:minHeight="0dp"
        android:text="返回上一页"
        android:textColor="@drawable/text_color_selector"
        android:textSize="18sp" />
</LinearLayout>

三、总结 ：

布局方式：密码输入框采用的的相对布局，让 LinearLayout 中的四个TextView和EditText的布局重复。监听EditText输入数据，添加到TextView上。

1. 思路：

  • 自定义ActivationCodeBox实现 RelativeLayout；
  • 重写多个构造方法，构造方法调用loadView();
  • loadView() 加载布局，获取各个控件；
  • 通过initEvent()方法监听数据的输入；
  • 在showCode()中，把 EditText 输入的值，放到对应的 TextVIew 上。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义密码输入框
    效果 自定义密码输入框，项目的一个界面需求，我把这个自定义的输入框提取出来作为这次内容的题目。输入前: 输入后： ...
    cgrass阅读 9,008评论 3赞 31
  • Android自定义密码输入框
    1.概述 前一段时间一直在封闭开发，其实技术难度不大，开发也就10天左右，由于产品是新来的，中间需求一变再变...
    点石成金XIAS阅读 10,622评论 0赞 3
  • Android自定义密码输入框
    先看最终效果图可在布局文件中配置各种属性，如密码框个数，密码框圆角半径，颜色，中间圆半径和大小，padding值也...
    shada阅读 5,639评论 7赞 3
  • 源码众享最新教程 - 草稿
    ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程，因...
    小菜c阅读 11,893评论 0赞 17
  • Android：自定义带有删除按钮的输入框
    1 主要知识点介绍 乍一看标题，你觉得很简单，你可能心里再想 ——“呵，这么简单的东西有什么看头，谁还不会写个输入...
    CnPeng阅读 8,845评论 0赞 7

友情链接更多精彩内容