Android自定义带搜索图标及删除按钮的搜索框SearchEditText

最近项目需求要用到带删除按钮的搜索框，开始设计时搜索图标及提示文字是在左侧的，但是经讨论要求与IOS的UISearchBar风格一致即默认情况下，搜索图标和文字是居中的，在获取焦点时，图标及提示文字左移，输入搜索文字时，删除按钮右端显示，如下图所示：

默认情况：

获取焦点时：

输入文字后：

首先直接自定义SearchEditText：

@SuppressLint("AppCompatCustomView")
public class SearchEditText extends EditText implements View.OnFocusChangeListener, TextWatcher {private static final String TAG = "SearchEditText";/*** 删除按钮与右边编辑框之间的paddingRight距离*/private int paddingRightValueBetweenRightBorderAndDel = 0;/*** 图标是否默认在左边*/private boolean isIconLeft = false;/*** 控件的图片资源*/private Drawable[] mDrawables;/*** drawableLeft:搜索图标; drawableDel:删除按钮图标*/private Drawable drawableLeft, drawableDel;/*** 记录点击坐标*/private int eventX, eventY;/*** 控件区域*/private Rect mRect;public SearchEditText(Context context) {super(context);init();}public SearchEditText(Context context, AttributeSet attrs) {super(context, attrs);init();}public SearchEditText(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}public SearchEditText(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {super(context, attrs, defStyleAttr, defStyleRes);init();}private void init(){setOnFocusChangeListener(this);addTextChangedListener(this);}@Overrideprotected void onDraw(Canvas canvas){if(isIconLeft){if(length() < 1){drawableDel = null;}this.setCompoundDrawablesWithIntrinsicBounds(drawableLeft, null, drawableDel, null);  //在edittext的左上右下设置Drawablesuper.onDraw(canvas);}else {if(mDrawables == null){mDrawables = getCompoundDrawables(); //返回包含左上右下四个位置的Drawable数组}if(drawableLeft == null){drawableLeft = mDrawables[0];}float textWidth = getPaint().measureText(getHint().toString());int drawablePadding = getCompoundDrawablePadding();  //返回Drawable和text之间的padding值int drawableWidth = drawableLeft.getIntrinsicWidth();   //获得Drawable的固有宽度float bodyWidth = textWidth + drawablePadding + drawableWidth;canvas.translate((getWidth() - bodyWidth - getPaddingLeft() - getPaddingRight()) / 2, 0);super.onDraw(canvas);}}@Overridepublic boolean onTouchEvent(MotionEvent event) {if(drawableDel != null && event.getAction() == MotionEvent.ACTION_UP){eventX = (int)event.getRawX();eventY = (int)event.getRawY();if(mRect == null){mRect = new Rect();}getGlobalVisibleRect(mRect);  // edittext在屏幕中的坐标mRect.left = mRect.right - drawableDel.getIntrinsicWidth() - getPaddingRightValueBetweenRightBorderAndDel();if(mRect.contains(eventX, eventY)){setText("");}}
//        if(drawableDel != null && event.getAction() == MotionEvent.ACTION_DOWN){
//            eventX = (int)event.getRawX();
//            eventY = (int)event.getRawY();
//            if(mRect == null){
//                mRect = new Rect();
//            }
//            getGlobalVisibleRect(mRect);
//            mRect.left = mRect.right - drawableDel.getIntrinsicWidth();
//            if(mRect.contains(eventX, eventY)){
//                drawableDel = this.getResources().getDrawable(R.mipmap.clear_edit);
//            }else {
//                drawableDel = this.getResources().getDrawable(R.mipmap.clear_edit);
//            }
//        }return super.onTouchEvent(event);}@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {if(this.length() < 1){drawableDel = null;}else {drawableDel = this.getResources().getDrawable(R.mipmap.clear_edit);}}@Overridepublic void afterTextChanged(Editable s) {}@Overridepublic void onFocusChange(View v, boolean hasFocus) {if(TextUtils.isEmpty(getText().toString())){isIconLeft = hasFocus;}}public void setPaddingRightValueBetweenRightBorderAndDel(int dimenID){this.paddingRightValueBetweenRightBorderAndDel = dimenID;}private int getPaddingRightValueBetweenRightBorderAndDel(){return this.getResources().getDimensionPixelOffset(paddingRightValueBetweenRightBorderAndDel);}
}

搜索框样式：

<!--搜索框样式--><style name="editTextStyle"><item name="android:layout_width">match_parent</item><item name="android:layout_height">match_parent</item><item name="android:background">@drawable/search_edit_text_bg</item><item name="android:drawablePadding">@dimen/dp_2</item><item name="android:drawableStart">@mipmap/search_icon</item><item name="android:gravity">center_vertical</item><!--<item name="android:imeOptions">actionSearch</item>--><item name="android:paddingLeft">@dimen/dp_15</item><item name="android:paddingRight">@dimen/dp_15</item><item name="android:singleLine">true</item><item name="android:textSize">@dimen/sp_11</item><item name="android:hint">@string/please_input_search_name</item><item name="android:textColorHint">#B3B3B3</item></style>

搜索框背景：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item><shape android:shape="rectangle"><solid android:color="#FFFFFF"/><corners android:radius="@dimen/dp_15"/><stroke android:color="#D9D9D9" android:width="@dimen/dp_1"/></shape></item></layer-list>

布局代码：

<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:padding="5dp"android:focusable="true" android:focusableInTouchMode="true"tools:context=".MainActivity" ><SearchEditTextandroid:id="@+id/activity_main_input_edittext"style="@style/editTextStyle"android:layout_marginTop="20dp" />
</RelativeLayout>

备注：

1.每次进入界面后，EditText自动获取焦点导致输入法自动弹出来，所以为了解决这个问题，在EditText的父布局中加两个属性：

android:focusable="true"
android:focusableInTouchMode="true"

2.在清单配置文件的对应Activity加上

android:windowSoftInputMode="adjustPan"防止布局被输入法顶上去。

Android自定义带搜索图标及删除按钮的搜索框SearchEditText相关推荐

android 带箭头的按钮,android自定义带箭头对话框
本文实例为大家分享了android自定义带箭头对话框的具体代码,供大家参考,具体内容如下 import android.content.context; import android.content. ...
android的动态tab,Android自定义view仿QQ的Tab按钮动画效果(示例代码)
话不多说先上效果图实现其实很简单,先用两张图一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的 ...
Android自带的图标集合
使用Android自带的图标有两种方法: 1.在代码中使用: setIcon(android.R.drawable.alert_light_frame); 2.在布局文件中使用: android:ic ...
android 自定义进度条水量,Android自定义带水滴的进度条样式（带渐变色效果）...
一.直接看效果二.直接上代码 1.自定义控件部分 package com.susan.project.myapplication; import android.app.Activity; impo ...
android音频声调,Android自定义带拼音音调Textview
本文实例为大家分享了Android自定义带拼音音调Textview的具体代码,供大家参考,具体内容如下 1.拼音textview,简单的为把拼音数组和汉字数组结合在一起多行显示 import andr ...
android自定义带进度条的圆形图片
前言:在项目听新闻的改版中需要实现环绕圆形新闻图片的进度条功能,作为技术预备工作我就去看了一些网上的相关的原理,做了一个自定义带进度条的圆形图片的demo,并将这个实现写成文章发布出来,谁需要了可以进 ...
Android 自定义带图标Toast，工具方法，Toast自定义显示时间
带图标Toast工具方法1 样式 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:an ...
Android 自定义带Logo的二维码图标
在做app 开发中,生成二维码也是常有的功能所以今天来做个笔记实现下生成二维码的方法生成二维码工具类首选需要使用zxing.jar 可以去官网下载 package com.pne.funcat ...
Android——自定义带刻度的SeekBar单向拖动条
时间过得真快,才发现好久没来逛逛了.没写博客的这段时间一直在做项目,连续完成了两个大型app,这个过程很享受,这是独立开发的,所以中途有很多很多的问题需要自己一个一个的去解决,现在接近尾声了,发现自己 ...
android 自定义带输入框的dialog,Android 基本Dialog和自定义Dialog
Android 基本Dialog和自定义Dialog Dialog类是对话框的基类,但你应该避免直接实例化Dialog ,可以使用子类 1.AlertDialog 此对话框可以显示标题,最多三个按钮, ...

Android自定义带搜索图标及删除按钮的搜索框SearchEditText

Android自定义带搜索图标及删除按钮的搜索框SearchEditText相关推荐

最新文章

热门文章