美文网首页Android Demo
仿简书登录框,可删除内容或显示密码框的内容

仿简书登录框,可删除内容或显示密码框的内容

作者: 末日之花 | 来源:发表于2016-12-08 10:07 被阅读34次

    简书App 是我很喜欢的一款软件。今天就模仿了一下他的登录框。先上图:


    好了下面上代码,自定义ImgEditText 继承与EditText。重写一些方法。

    // lyf on 2016/12/6.
    // 自定义的EditText右边带图片,可以设置点击事件
    public class ImgEditText extends EditText implements TextWatcher {
    //控件左边的图片
    private Drawable leftDrawable = null;
    //控件右边的图片
    private Drawable rightDrawable = null;
    // 控件是否有焦点
    private boolean hasFoucs;
    private IMyRightDrawableClick mightDrawableClick;
    
    public ImgEditText(Context context) {
        this(context, null);
    }
    
    public ImgEditText(Context context, AttributeSet attrs) {
        //这里构造方法也很重要,不加这个很多属性不能再XML里面定义
        this(context, attrs, android.R.attr.editTextStyle);
    }
    
    public ImgEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    
    
    //初始化基本图片
    private void init() {
        //获取RadioButton的图片集合
        Drawable[] drawables = getCompoundDrawables();
    
        leftDrawable = drawables[0];
        rightDrawable = drawables[2];
    
        setCompoundDrawablesWithIntrinsicBounds(leftDrawable, null, null, null);
    
        //设置输入框里面内容发生改变的监听
        addTextChangedListener(this);
    }
    
    //设置显示图片的大小
    public void setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom) {
        super.setCompoundDrawablesWithIntrinsicBounds(left, top, right, bottom);
    
        //这里只要改后面两个参数就好了,一个宽一个是高,如果想知道为什么可以查找源码
        if (left != null) {
            left.setBounds(0, 0, 50, 50);
        }
        if (right != null) {
            right.setBounds(0, 0, 50, 50);
        }
        if (top != null) {
            top.setBounds(0, 0, 100, 100);
        }
        if (bottom != null) {
            bottom.setBounds(0, 0, 100, 100);
        }
        setCompoundDrawables(left, top, right, bottom);
    }
    
    //光标选中时判断
    @Override
    protected void onFocusChanged(boolean focused, int direction, Rect previouslyFocusedRect) {
        super.onFocusChanged(focused, direction, previouslyFocusedRect);
        this.hasFoucs = focused;
        if (focused) {
            setImageVisible(getText().length() > 0);
        } else {
            setImageVisible(false);
        }
    }
    
    //设置清除图标的显示与隐藏,调用setCompoundDrawables为EditText绘制上去
    protected void setImageVisible(boolean flag) {
        //如果当前右侧有图片则覆盖右侧的图片,如果没有还是显示原来的图片
        if (getCompoundDrawables()[2] != null) {
            rightDrawable = getCompoundDrawables()[2];
        }
        if (flag) {
            setCompoundDrawables(getCompoundDrawables()[0], null, rightDrawable, null);
        } else {
            setCompoundDrawables(getCompoundDrawables()[0], null, null, null);
        }
    }
    
    //文本框监听事件
    @Override
    public void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        if (hasFoucs) {
            if (text.length() > 0) {
                setImageVisible(true);
            } else {
                setImageVisible(false);
            }
        }
    }
    
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    
    }
    
    public void afterTextChanged(Editable s) {
    
    }
    
    
    /**
     * 因为我们不能直接给EditText设置点击事件,所以我们用记住我们按下的位置来模拟点击事件
     * 当我们按下的位置 在  EditText的宽度 - 图标到控件右边的间距 - 图标的宽度  和
     * EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标,竖直方向就没有考虑
     * (参考 http://blog.csdn.net/xiaanming/article/details/11066685/)
     */
    @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) {
                    //调用点击事件(外部实现)
                    mightDrawableClick.rightDrawableClick();
                }
            }
        }
    
        return super.onTouchEvent(event);
    }
    
    //设置右侧按钮的点击事件,外部调用的时候实现该方法
    public void setDrawableClick( IMyRightDrawableClick myMightDrawableClick){
        this.mightDrawableClick = myMightDrawableClick;
    }
    
    //自定义接口(实现右边图片点击事件)
    public interface IMyRightDrawableClick {
        void rightDrawableClick();
    }
    
    //允许外部修改右侧显示的图片
    public void setRightDrawable(Drawable drawable){
        rightDrawable = drawable;
        setCompoundDrawablesWithIntrinsicBounds(leftDrawable, null,       rightDrawable, null);
    }
    }
    

    以上就是自定义类的主要代码了,注释比较清楚。
    布局布局文件里直接引用就好。

    <lyf.myimgedittextdemo.ImgEditText
    android:id="@+id/pwdIet"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@null"
    android:drawableLeft="@mipmap/mm_image"
    android:drawableRight="@mipmap/eye_normal"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:paddingTop="5dp"
    android:drawablePadding="15dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:hint="密码"
    android:inputType="numberPassword" />
    

    下面看代码中的设置

        pwdIet = (ImgEditText) this.findViewById(R.id.pwdIet);
    
        pwdIet.setDrawableClick(new ImgEditText.IMyRightDrawableClick() {
            @Override
            public void rightDrawableClick() {
                if (isHidden) {
                    //设置EditText文本为可见的
                    pwdIet.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                    pwdIet.setRightDrawable(getResources().getDrawable(R.mipmap.eye_selected));
                } else {
                    //设置EditText文本为隐藏的
                    pwdIet.setTransformationMethod(PasswordTransformationMethod.getInstance());
                    pwdIet.setRightDrawable(getResources().getDrawable(R.mipmap.eye_normal));
                }
                isHidden = !isHidden;
                pwdIet.postInvalidate();
                //切换后将EditText光标置于末尾
                CharSequence charSequence = pwdIet.getText();
                if (charSequence instanceof Spannable) {
                    Spannable spanText = (Spannable) charSequence;
                    Selection.setSelection(spanText, charSequence.length());
                }
    
            }
        });
    

    这样我们的例子就完成了。
    不懂的可以下载看源码,很简单。
    源码下载

    相关文章

      网友评论

        本文标题:仿简书登录框,可删除内容或显示密码框的内容

        本文链接:https://www.haomeiwen.com/subject/frojmttx.html