Android-custom EditText with password hidden display function

Article Directory

Custom EditText class

The idea is similar to Android-custom EditText with delete icon

package com.android02;


import android.annotation.SuppressLint;
import android.content.Context;

import android.graphics.drawable.Drawable;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.AppCompatEditText;
import android.text.Editable;
import android.text.TextWatcher;
import android.text.method.HideReturnsTransformationMethod;
import android.text.method.PasswordTransformationMethod;
import android.util.AttributeSet;

import android.view.MotionEvent;
import android.view.View;
import android.view.inputmethod.EditorInfo;
import android.widget.Toast;


/**
 * 密码显示隐藏功能
 */
public class VisiblePwd extends AppCompatEditText implements View.OnFocusChangeListener, TextWatcher {
    
    

    
    private Drawable clearDrawable;

    // 控件是否有焦点
    private boolean hasFocus;

    //明文还是密文的标志,默认密文
    public boolean hasHide=true;


    public VisiblePwd(Context context) {
    
    
        this(context, null);
    }

    public VisiblePwd(Context context, AttributeSet attrs) {
    
    
        // 这里构造方法也很重要,不加这个很多属性不能再XML里面定义
        this(context, attrs, android.R.attr.editTextStyle);
    }

    public VisiblePwd(Context context, AttributeSet attrs, int defStyle) {
    
    
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
    
    
        // 获取EditText的DrawableRight,假如没有设置我们就使用默认的图片
        clearDrawable = getCompoundDrawables()[2];
        if (clearDrawable == null) {
    
    
            // throw new
            // NullPointerException("You can add drawableRight attribute in XML");
            clearDrawable = ContextCompat.getDrawable(getContext(),R.drawable.hide);
        }

        // 设置图标的大小
        clearDrawable.setBounds(0, 0, 80, 80);

        // 默认设置隐藏图标
        setClearIconVisible(false);
        // 设置焦点改变的监听
        setOnFocusChangeListener(this);
        // 设置输入框里面内容发生改变的监听
        addTextChangedListener(this);
    }

    /**
     * 因为我们不能直接给EditText设置点击事件,
     * 因此我们用记住我们按下的位置来模拟点击事件
     * 当我们按下的位置
     * 在 EditText的宽度 -图标到控件右边的间距 - 图标的宽度 和 EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标,
     */

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN_MR1)
    @Override
    public boolean onTouchEvent(MotionEvent event) {
    
    
        if (event.getAction() == MotionEvent.ACTION_UP) {
    
    
            if (getCompoundDrawables()[2] != null) {
    
    

                boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight()) && (event.getX() < ((getWidth() - getPaddingRight())));

                if (touchable&&getText().length()>0) {
    
    
                    if(hasHide){
    
    
                        clearDrawable = ContextCompat.getDrawable(getContext(),R.drawable.eye);
                        //设置图标
                        setCompoundDrawablesWithIntrinsicBounds(null,null,clearDrawable,null);

                        //将input的类型修改成text,明文
                        setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);
                        setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                        hasHide = false;
                    }
                    else{
    
    

                       
                        clearDrawable = ContextCompat.getDrawable(getContext(),R.drawable.hide);
                        setCompoundDrawablesWithIntrinsicBounds(null,null,clearDrawable,null);
                        //将input的类型修改成password,密文
                        setTransformationMethod(PasswordTransformationMethod.getInstance());
                        setInputType(EditorInfo.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
                        hasHide = true;

                    }

                }
            }
        }
        return super.onTouchEvent(event);
    }



    /**
     * 当ClearEditText焦点发生变化的时候,判断里面字符串长度设置清除图标的显示与隐藏
     */
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
    
    
        this.hasFocus = hasFocus;
        if (hasFocus) {
    
    
            setClearIconVisible(getText().length() > 0);
        } else {
    
    
            setClearIconVisible(false);
        }
    }

    /**
     * 设置清除图标的显示与隐藏,调用setCompoundDrawables为EditText绘制上去
     */
    protected void setClearIconVisible(boolean visible) {
    
    

        Drawable right = visible ? clearDrawable : null;
        //设置图标大小
        clearDrawable.setBounds(0,0,80,80);
        setCompoundDrawables(getCompoundDrawables()[0], getCompoundDrawables()[1], right, getCompoundDrawables()[3]);



    }

    /**
     * 当输入框里面内容发生变化的时候回调的方法
     */
    @Override
    public void onTextChanged(CharSequence s, int start, int count, int after) {
    
    
        if (hasFocus) {
    
    
            setClearIconVisible(s.length() > 0);
        }
    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    
    

    }

    @Override
    public void afterTextChanged(Editable s) {
    
    

    }

}

layout

Just change EditText to our custom EditText (package name + class name)

effect

Insert picture description here
Insert picture description here

Insert picture description here

Guess you like

Origin blog.csdn.net/m0_46267375/article/details/109345893