自定义左边含有图片的EditText

原创 2016年08月15日 21:21:06

自定义EditText,当文字输入改变图片

package com.android.drawableedittext;

import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class DrawableEditText extends RelativeLayout {

    private Context mContext;
    private EditText mEditText;
    private ImageView mImage;

    // 文本框不为空 图片资源
    private int imgRes;

    // 文本框为空 图片资源
    private int nullImgRes;

    public DrawableEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        init();

        // 得到图片资源
        imgRes = attrs.getAttributeResourceValue(null, "imgRes", 0);
        nullImgRes = attrs.getAttributeResourceValue(null, "nullImgRes", 0);
        if (nullImgRes != 0) {
            setDrawable();
        }

        // 设置文字大小
        int textSize = attrs.getAttributeResourceValue(null, "textSize", 0);
        if (textSize != 0) {
            mEditText.setTextSize(textSize);
        }

        // 设置edittext的hint提示
        int hint = attrs.getAttributeResourceValue(null, "hint", 0);
        if (hint != 0) {
            mEditText.setHint(hint);
        }

        // 设置文本颜色
        int textColor = attrs.getAttributeResourceValue(null, "textColor", 0);
        if (textColor != 0) {
            mEditText.setTextColor(textColor);
        }
    }

    // 初始化布局和控件
    public void init() {
        LayoutInflater inflater = LayoutInflater.from(mContext);
        View view = inflater.inflate(R.layout.drawable_edittext, this);
        mEditText = (EditText) view.findViewById(R.id.edittext);
        mImage = (ImageView) view.findViewById(R.id.image);
    }

    // 根据文本框是否为空设置不同的图片
    private void setDrawable() {
        if (mEditText.getText().toString().equals("")) {
            mImage.setImageResource(nullImgRes);
        } else {
            mImage.setImageResource(imgRes);
        }
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        // 文本框的text改变监听
        mEditText.addTextChangedListener(new TextWatcher() {

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

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

            @Override
            public void afterTextChanged(Editable s) {
                setDrawable();
            }
        });
    }

    /**
     * @description 输入框是否有文字
     * @return
     */
    public boolean isEmpty() {
        return getText() == null || getText().length() == 0 ? true : false;
    }

    /**
     * @description 获取输入框内的文字
     * @return
     */
    public String getText() {
        return mEditText.getText().toString();
    }

    /**
     * @description 设置输入框内的文字
     * @return
     */
    public void setText(String s) {
        mEditText.setText(s);
    }
}

EditText布局文件

<?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="46dp"
    android:background="@android:color/white" >

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bg_edittext"
        android:paddingLeft="50dp" />

    <RelativeLayout
        android:layout_width="46dp"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/image"
            android:layout_width="22dp"
            android:layout_height="30dp"
            android:layout_centerInParent="true"
            android:scaleType="centerInside" />
    </RelativeLayout>

</RelativeLayout>

运用的布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp" >

    <com.example.drawableedittext.DrawableEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        imgRes="@drawable/phonenumber_click"
        nullImgRes="@drawable/phonenumber" />

</RelativeLayout>
版权声明:本文为博主原创文章,未经博主允许不得转载。

安卓开发——设置EditText的drawableLeft所导入的图片大小

在EditText的使用中,如登录页面的输入框,经常会给EditText设置drawableLeft,即添加左侧图片,但却没有属性对这个图片大小进行控制,只能靠图片自身的分辨率来控制大小。可这时就出现...
  • qq_28484355
  • qq_28484355
  • 2016年10月27日 20:38
  • 2767

如何在EditText中设置固定图片——Android移动开发

如下图,在EditText中显示图片 其原理就是在相对布局(RelativeLayout)的基础上用ImageView实现 代码如下: [java] view...
  • chengyingzhilian
  • chengyingzhilian
  • 2012年02月24日 17:26
  • 18586

自定义EditText :下划线,左侧有可变图标,右侧有可变删除标志

项目要求:
  • zwx622
  • zwx622
  • 2014年08月02日 15:35
  • 3026

EditText组件drawableLeft属性设置的图片和hint设置的文字之间的距离

有的时候,我们需要在文本框里放置icon图片,并且设置默认提示文字的时候,需要设置两者之间的间距,如下图:                    这里想设置的就是之前的手机icon和”请输入手机号“之...
  • achilles12345
  • achilles12345
  • 2015年09月16日 22:59
  • 25003

自定义EditText —— 一个可以图片居中的搜索栏

最近的项目大部分用到了搜索功能(妈的感觉产品脑子有屎,为什么要用那么多搜索),而且样式都是这样子的: 这就触及我只是盲区了,android:drawableLeft=""这个方法只能使图片在左面,无法...
  • qq_29951983
  • qq_29951983
  • 2017年10月16日 11:40
  • 363

Android左边有固定文字的EditText

这个很简单,但如果做项目时临时写出来,也得花几分钟去调试一下实际的效果。相信大家临时因这个小问题打断也不好。所以放出来,供大家即用。 文字输入从光标处开始: package com.idroid.w...
  • yide55
  • yide55
  • 2015年08月23日 20:10
  • 4188

Android EditText图文混排的总结

开始: 下面就具体说一下我遇到的问题,首先是EditText里面的图文混排问题,这个问题的难点就是三点: 1.怎么插图片  2.怎么保存插入的图片和文字  3.怎么解析回图片和...
  • cike110120
  • cike110120
  • 2013年06月16日 14:44
  • 19807

在输入框左边加一个小图标,css样式应该怎么写?

无标题文档 .text{border:solid 2px #ccc;width:400px;height:40px;background:url(http://d.lanrentuku.com/do...
  • u013499771
  • u013499771
  • 2014年09月23日 18:00
  • 5965

学习笔记——自定义EditText右侧带图片控件

前言  最近项目做用户登录模块需要一个右边带图片的EditText,图片可以设置点击效果,所以就查资料做了一个自定义EditText出来,方便以后复用。原理  下面是自定义EditText的代码,具体...
  • totond
  • totond
  • 2016年07月24日 17:20
  • 1440

EditText——右边图片drawableRight的点击事件

EditText右边图片的点击事件,如输入账号或密码之后可以直接清空,方便好用的控件!...
  • u014050188
  • u014050188
  • 2016年03月09日 15:44
  • 3380
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义左边含有图片的EditText
举报原因:
原因补充:

(最多只允许输入30个字)