Android 密码输入框

好久没写blog了，今天抽空写一个Android里面都能用到的自定义控件，密码输入框。简单介绍一下这个密码输入框的样子吧，当软键盘弹出在输入适合，会有删除的图标显示，点击删除会清空Edittext，后面也会有个眼睛的图标，点击切换是否加密显示和明文显示，当软键盘消失适合，后面那个删除的图标是消失的，其它的功能是和Edittext一样的，毕竟也是对于一个Edittext的自定义控件吧。下面就来看看我截的几个图。

下面就来介绍一下基本实现，完整代码在最后也会给出。

    // 按钮宽度dp
    private int           mWidth;
    // 按钮的bitmap
    private Bitmap mBitmapInvisible;
    private Bitmap mBitmapVisible;
    // 按钮是否可见
    private boolean       isVisible;
    // 清除按钮出现动画
    private ValueAnimator mAnimatorVisible;
    // 消失动画
    private ValueAnimator mAnimatorGone;
    // 间隔
    private int           Interval;
    // 内容是否是明文
    private boolean isPlaintext = false;
    // 是否只在获得焦点后显示
    private boolean focusedShow = false;

先了解这些变量含义。

/**
     * 绘制内容是否是明文的ICON
     */
    private void drawVisible(float scale, Canvas canvas) {
        int right  = (int) (getWidth() + getScrollX() - getmPaddingRight() - Interval - mWidth * (1f - scale) / 2f);
        int left   = (int) (getWidth() + getScrollX() - getmPaddingRight() - Interval - mWidth * (scale + (1f - scale) / 2f));
        int top    = (int) ((getHeight() - mWidth * scale) / 2);
        int bottom = (int) (top + mWidth * scale);

        rect.set(left, top, right, bottom);
        if (isPlaintext) {
            canvas.drawBitmap(mBitmapVisible, null, rect, null);
        } else {
            canvas.drawBitmap(mBitmapInvisible, null, rect, null);
        }
    }

 /**
     * 只在获得焦点后显示
     */
    private void focusedShow() {
        focusedShow(isFocusable());
    }

    /**
     * 只在获得焦点后显示
     */
    private void focusedShow(boolean focused) {
        if (!TextUtil.isEmpty(getText()) && isEditThis() && focused) {
            if (!isVisible) {
                isVisible = true;
                mAnimatorGone.end();
                mAnimatorVisible.end();
                mAnimatorVisible.start();
                invalidate();
            }
        } else {
            if (isVisible) {
                isVisible = false;
                mAnimatorGone.end();
                mAnimatorVisible.end();
                mAnimatorGone.start();
                invalidate();
            }
        }
    }

// 按钮资源
    private final int CLEAR = R.mipmap.icon_clear;
    // 动画时长
    protected final int ANIMATOR_TIME = 200;
    // 按钮左右间隔,单位PX
    private int Interval;
    // 清除按钮宽度,单位PX
    private int mWidthClear;
    // 左内边距
    private int mPaddingLeft;
    // 右内边距
    private int mPaddingRight;
    // 右侧多出的空间(间隔 + 按钮宽度)
    private int mExtraWidth;
    // 清除按钮的bitmap
    private Bitmap mBitmapClear;
    // 清除按钮出现动画
    private ValueAnimator mAnimatorVisible;
    // 消失动画
    private ValueAnimator mAnimatorGone;
    // 是否显示的记录
    private boolean isVisible = false;
    // 右边添加其他按钮时使用
    private int mRight = 0;

    /**
     * EditText内容变化的监听
     */
    @Override
    protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        if (getInputType() == (InputType.TYPE_NUMBER_FLAG_DECIMAL | InputType.TYPE_CLASS_NUMBER) && !TextUtils.isEmpty(text) && text.charAt(0) == '.') {
            if (text.length() == 1) {
                setText("0.");
            } else {
                setText(getText().replace(0, 0, "0."));
            }
            setSelection(getText().length());
        }
        super.onTextChanged(text, start, lengthBefore, lengthAfter);
        if (text.length() > 0 && isFocused() && isEditThis()) {
            if (!isVisible) {
                isVisible = true;
                startVisibleAnimator();
            }
        } else {
            if (isVisible) {
                isVisible = false;
                startGoneAnimator();
            }
        }
    }

   @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int additional = 0;
        if (getGravity() == Gravity.CENTER || getGravity() == Gravity.CENTER_HORIZONTAL) {
            additional = mExtraWidth + mRight + mPaddingRight;
        }
        // 设置内边距
        setPadding(mPaddingLeft + additional, getPaddingTop(), mExtraWidth + mRight + mPaddingRight, getPaddingBottom());

        if (!TextUtil.isEmpty(getText()) && isEditThis()) {
            if (!isVisible) {
                isVisible = true;
                startVisibleAnimator();
            }
        } else {
            if (isVisible) {
                isVisible = false;
                startGoneAnimator();
            }
        }
    }

  /**
     * 晃动动画
     *
     * @param counts 0.5秒钟晃动多少下
     */
    private Animation shakeAnimation(int counts) {
        Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0);
        translateAnimation.setInterpolator(new CycleInterpolator(counts));
        translateAnimation.setDuration(500);
        return translateAnimation;
    }

    /**
     * 给图标染上当前提示文本的颜色并且转出Bitmap
     */
    public Bitmap createBitmap(int resources, Context context) {
        final Drawable drawable = ContextCompat.getDrawable(context, resources);
        final Drawable wrappedDrawable = DrawableCompat.wrap(drawable);
        DrawableCompat.setTint(wrappedDrawable, getCurrentHintTextColor());
        return drawableToBitmap(wrappedDrawable);
    }

   /**
     * 触控执行的监听
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            boolean touchable = (getWidth() - mPaddingRight - Interval - mRight - mWidthClear < event.getX())
                    && (event.getX() < getWidth() - mPaddingRight - Interval - mRight);
            if (touchable && isVisible) {
                setError(null);
                this.setText("");
            }
        }
        return super.onTouchEvent(event);
    }

其实主要的就是一些绘制和一些动画的显示，基本原理还是遵从Edittext的属性来的。

完整代码下载地址：

http://download.csdn.net/download/greatdaocaoren/10106019

Android 密码输入框

猜你喜欢