Android 仿IOS搜索框

客官°小女子只卖身不卖艺 2022-05-23 03:54 388阅读 0赞

搜索框样式如图

![70][]

实现步骤：

1、素材

ico\_delete.png   
![这里写图片描述][Center]   
ico\_delete\_p.png   
![这里写图片描述][Center 1]   
ico\_search.png

![这里写图片描述][Center 2]

selector\_search\_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
         <item android:state_pressed="true">
              <shape>
                   <corners android:radius="5dp"/>
                   <solid android:color="@color/theme_front_light"/>
                   <stroke android:width="0dp" android:color="@color/theme_front_light"/>
              </shape>
         </item>
         <item android:state_focused="true">
              <shape>
                   <corners android:radius="5dp"/>
                   <solid android:color="@color/theme_front_light"/>
                   <stroke android:width="0dp" android:color="@color/theme_front_light"/>
              </shape>
         </item>
         <item>
              <shape>
                   <corners android:radius="5dp"/>
                   <solid android:color="@color/theme_front_dark"/>
                   <stroke android:width="0dp" android:color="@color/theme_front_dark"/>
              </shape>
         </item>
    </selector>

style.xml

<style name="editTextStyle">
            <item name="android:layout_width">match_parent</item>
            <item name="android:layout_height">35dp</item>
            <item name="android:background">@drawable/selector_search_bg</item>
            <item name="android:drawablePadding">5dp</item>
            <item name="android:drawableStart">@drawable/ico_search</item>
            <item name="android:gravity">center_vertical</item>
            <item name="android:imeOptions">actionSearch</item>
            <item name="android:padding">5dp</item>
            <item name="android:singleLine">true</item>
            <item name="android:textSize">15sp</item>
            <item name="android:textColor">@color/white</item>
            <item name="android:textColorHint">@color/light_white</item>
            <item name="android:hint">@string/t_search</item>
        </style>
    
        
        <style name="textViewStyle">
            <item name="android:layout_width">match_parent</item>
            <item name="android:layout_height">40dp</item>
            <item name="android:gravity">center</item>
            <item name="android:textSize">20sp</item>
        </style>

2、控件SearchEditText.java

/**
     * Created by xl on 2018/1/29.
     * 自定义搜索框
     * 使用方法：
     * 需要设置SearchEditText不自动获取焦点
     * 设置方法：在父控件中加入以下两个属性
     * android:focusable="true"
     * android:focusableInTouchMode="true"
     */
    public class SearchEditText extends EditText implements View.OnFocusChangeListener, View.OnKeyListener, TextWatcher {
    
        private static final String TAG = SearchEditText.class.getSimpleName();
        private Context mContext;
        //图标是否默认在左边
        private boolean isIconLeft = false;
        //是否点击软键盘搜索
        private boolean pressSearch = false;
        //软键盘搜索键监听
        private OnSearchClickListener listener;
        // 控件的图片资源
        private Drawable[] drawables;
        // 搜索图标和删除按钮图标
        private Drawable drawableLeft, drawableDel;
        // 记录点击坐标
        private int eventX, eventY;
        // 控件区域
        private Rect rect;
    
        /**
         * 构造器
         *
         * @param context
         */
        public SearchEditText(Context context) {
            this(context, null);
            this.mContext = context;
            init();
        }
    
        /**
         * 构造器
         *
         * @param context
         */
        public SearchEditText(Context context, AttributeSet attrs) {
            this(context, attrs, android.R.attr.editTextStyle);
            this.mContext = context;
            init();
        }
    
        /**
         * 构造器
         *
         * @param context
         */
        public SearchEditText(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            this.mContext = context;
            init();
        }
    
        /**
         * 初始化函数
         */
        private void init() {
            setOnFocusChangeListener(this);
            setOnKeyListener(this);
            addTextChangedListener(this);
        }
    
        /**
         * 绘制
         *
         * @param canvas
         */
        @Override
        protected void onDraw(Canvas canvas) {
            if (isIconLeft) { // 如果是默认样式，直接绘制
                if (length() < 1) {
                    drawableDel = null;
                }
                //drawable的宽高是按drawable固定的宽高,即通过getIntrinsicWidth()与getIntrinsicHeight()获得
                //this.setCompoundDrawablesWithIntrinsicBounds(drawableLeft, null, drawableDel, null);
                //drawable的宽高是按drawable.setBound()设置的宽高
                this.setCompoundDrawables(drawableLeft, null, drawableDel, null);
                super.onDraw(canvas);
            } else { // 如果不是默认样式，需要将图标绘制在中间
                if (drawables == null) drawables = getCompoundDrawables();
                if (drawableLeft == null) drawableLeft = drawables[0];
                float textWidth = getPaint().measureText(getHint().toString());
                int drawablePadding = getCompoundDrawablePadding();
                //int drawableWidth = drawableLeft.getBounds().width();
                int drawableWidth = drawableLeft.getIntrinsicWidth();
                float bodyWidth = textWidth + drawableWidth + drawablePadding;
                canvas.translate((getWidth() - bodyWidth - getPaddingLeft() - getPaddingRight()) / 2, 0);
                super.onDraw(canvas);
            }
        }
    
        /**
         * 焦点监听
         *
         * @param v
         * @param hasFocus
         */
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            // 被点击时，恢复默认样式
            if (!pressSearch && TextUtils.isEmpty(getText().toString())) {
                isIconLeft = hasFocus;
            }
        }
    
        /**
         * 按键监听
         *
         * @param v
         * @param keyCode
         * @param event
         * @return
         */
        @Override
        public boolean onKey(View v, int keyCode, KeyEvent event) {
            pressSearch = (keyCode == KeyEvent.KEYCODE_ENTER);
            if (pressSearch && listener != null) {
                /*隐藏软键盘*/
                InputMethodManager imm = (InputMethodManager) v.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
                if (imm.isActive()) {
                    imm.hideSoftInputFromWindow(v.getApplicationWindowToken(), 0);
                }
                listener.onSearchClick(v);
            }
            return false;
        }
    
        /**
         * 触摸监听
         *
         * @param event
         * @return
         */
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            // 清空edit内容
            if (drawableDel != null && event.getAction() == MotionEvent.ACTION_UP) {
                eventX = (int) event.getRawX();
                eventY = (int) event.getRawY();
                MyLogger.i(TAG, "eventX = " + eventX + "; eventY = " + eventY);
                if (rect == null) rect = new Rect();
                getGlobalVisibleRect(rect);
                rect.left = rect.right - drawableDel.getIntrinsicWidth();
                if (rect.contains(eventX, eventY)) {
                    setText("");
                }
            }
            // 删除按钮被按下时改变图标样式
            if (drawableDel != null && event.getAction() == MotionEvent.ACTION_DOWN) {
                eventX = (int) event.getRawX();
                eventY = (int) event.getRawY();
                MyLogger.i(TAG, "eventX = " + eventX + "; eventY = " + eventY);
                if (rect == null) rect = new Rect();
                getGlobalVisibleRect(rect);
                rect.left = rect.right - drawableDel.getIntrinsicWidth();
                if (rect.contains(eventX, eventY))
                    drawableDel = this.getResources().getDrawable(R.drawable.ico_delete_p);
            } else {
                drawableDel = this.getResources().getDrawable(R.drawable.ico_delete);
            }
            return super.onTouchEvent(event);
        }
    
        /**
         * 输入变化监听
         *
         * @param arg0
         */
        @Override
        public void afterTextChanged(Editable arg0) {
            if (this.length() < 1) {
                drawableDel = null;
            } else {
                drawableDel = this.getResources().getDrawable(R.drawable.ico_delete);
            }
        }
    
        @Override
        public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
        }
    
        @Override
        public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
        }
    
        /**
         * 测量
         *
         * @param widthMeasureSpec
         * @param heightMeasureSpec
         */
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            if (drawables == null) {
                drawables = getCompoundDrawables();
            }
            if (drawableLeft == null) {
                drawableLeft = drawables[0];
                //drawableLeft.setBounds(0, 0, DensityUtil.dip2px(mContext, 16), DensityUtil.dip2px(mContext, 16));
            }
            if (drawableDel != null) {
                drawableDel.setBounds(0, 0, DensityUtil.dip2px(mContext, 18), DensityUtil.dip2px(mContext, 18));
            }
        }
    
        /**
         * 设置接口
         *
         * @param listener
         */
        public void setOnSearchClickListener(OnSearchClickListener listener) {
            this.listener = listener;
        }
    
        /**
         * 定义接口
         */
        public interface OnSearchClickListener {
            void onSearchClick(View view);
        }
    
    }

3、工具类DensityUtil.java

**
     * dip与px之间的转换，工具类
     * Created by xl on 2018/2/5.
     */
    
    public class DensityUtil {
    
        /**
         * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
         */
        public static int dip2px(Context context, float dpValue) {
            final float scale = context.getResources().getDisplayMetrics().density;
            return (int) (dpValue * scale + 0.5f);
        }
    
        /**
         * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
         */
        public static int px2dip(Context context, float pxValue) {
            final float scale = context.getResources().getDisplayMetrics().density;
            return (int) (pxValue / scale + 0.5f);
        }
    
    }

4、使用

a、布局文件

b、activity

/**
     * Created by xl on 2018/5/30.
     */
    public class DevListActivity extends Activity {
    
    private SearchEditText mSearch;

mSearch = (SearchEditText) findViewById(R.id.search);

mSearch.setOnSearchClickListener(new SearchEditText.OnSearchClickListener() {
                @Override
                public void onSearchClick(View view) {
                    // 搜索
                    if (mstrKeyWord.equals("")) {
                        return;
                    }
                    mListView.setMode(PullToRefreshBase.Mode.PULL_FROM_END);
                    mbSearchFlag = true;
                    miPagerNo = 1;
                    mbNoMoreData = false;
                    mListAdapter.clear();
                    selectDev();
                }
            });
            mSearch.addTextChangedListener(new TextWatcher() {
                @Override
                public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
                }
    
                @Override
                public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
                }
    
                @Override
                public void afterTextChanged(Editable arg0) {
                    mHandler.post(new Runnable() {
                        @Override
                        public void run() {
                            mstrKeyWord = mSearch.getText().toString();
                            if (mstrKeyWord.equals("")) {
                                mListAdapter.updateList(mList);
                                mbEditEmpty = true;
                                if (mbSearchFlag) {
                                    miPagerNo = miTempPagerNo;
                                    mbNoMoreData = mbTempNoMoreData;
                                    mbSearchFlag = false;
                                }
                                if (mbNoMoreData) {
                                    mListView.setMode(PullToRefreshBase.Mode.PULL_FROM_START);
                                } else {
                                    mListView.setMode(PullToRefreshBase.Mode.BOTH);
                                }
                            } else {
                                mListSearch.clear();
                                if (mbEditEmpty) {
                                    mbEditEmpty = false;
                                    mList.clear();
                                    mList.addAll(mListAdapter.getList());
                                    mListView.setMode(PullToRefreshBase.Mode.DISABLED);
                                    miTempPagerNo = miPagerNo;
                                    mbTempNoMoreData = mbNoMoreData;
                                }
                                for (int i = 0; i < mList.size(); i++) {
                                    if (mList.get(i).getCode().contains(mstrKeyWord)) {
                                        mListSearch.add(mList.get(i));
                                    }
                                }
                                mListAdapter.updateList(mListSearch);
                            }
                        }
                    });
                }
            });

完！！！

[70]: /images/20220523/a2a1f6e50e194f49ae845a3eb41bd286.png
[Center]: /images/20220523/ee7db7d010624eb58e31fdeee1cc2cb9.png
[Center 1]: /images/20220523/df8aab944c2842bcb7ac209e52c9cc68.png
[Center 2]: /images/20220523/7e27e0cfd511472dbfb5cc0a95238398.png