Android搜索关键字高亮显示

版权声明：有问题可联系博主QQ：15577969，大家一起相互交流和学习。 https://blog.csdn.net/qq15577969/article/details/82715858

需求分析：根据搜索的关键字，让关键字在查询到的内容里高亮显示出来。

先给大家看一下效果图：

这里也分享一下Demo源代码的下载地址：

https://download.csdn.net/download/qq15577969/10669001

一、首先从网上找了个文字变色的工具类 KeyWordUtil.java

package com.t20.searchdemo.util;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

import android.text.SpannableString;
import android.text.Spanned;
import android.text.TextUtils;
import android.text.style.ForegroundColorSpan;

/**
 * 文字变色工具类
 */
public class KeyWordUtil {

    /**
     * 关键字高亮变色
     * 
     * @param color 变化的色值
     * @param text 文字
     * @param keyword 文字中的关键字
     * @return 结果SpannableString
     */
    public static SpannableString matcherSearchTitle(int color, String text, String keyword) {
        SpannableString s = new SpannableString(text);
        keyword=escapeExprSpecialWord(keyword);
        text=escapeExprSpecialWord(text);
        if (text.contains(keyword)&&!TextUtils.isEmpty(keyword)){
            try {
                Pattern p = Pattern.compile(keyword);
                Matcher m = p.matcher(s);
                while (m.find()) {
                    int start = m.start();
                    int end = m.end();
                    s.setSpan(new ForegroundColorSpan(color), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                }
            }catch (Exception e){
            }
        }
        return s;
    }

    /**
     * 转义正则特殊字符 （$()*+.[]?\^{},|）
     *
     * @param keyword
     * @return keyword
     */
    public static String escapeExprSpecialWord(String keyword) {
        if (!TextUtils.isEmpty(keyword)) {
            String[] fbsArr = { "\\", "$", "(", ")", "*", "+", ".", "[", "]", "?", "^", "{", "}", "|" };
            for (String key : fbsArr) {
                if (keyword.contains(key)) {
                    keyword = keyword.replace(key, "\\" + key);
                }
            }
        }
        return keyword;
    }
}

二、另外重写了一个带有删除功能的EditText输入框 ClearEditText.java

package com.t20.searchdemo.view;

import com.t20.searchdemo.R;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.InputType;
import android.text.Selection;
import android.text.Spannable;
import android.text.TextWatcher;
import android.text.method.HideReturnsTransformationMethod;
import android.text.method.PasswordTransformationMethod;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnFocusChangeListener;
import android.view.animation.Animation;
import android.view.animation.CycleInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.EditText;
import android.widget.Toast;

public class ClearEditText extends EditText implements  OnFocusChangeListener, TextWatcher {
	 /**
     * 删除按钮的引用
     */
    private Drawable mClearDrawable; 
    /**
     * 控件是否有焦点
     */
    private boolean hasFoucs;
    
    private boolean isShow = false;
 
    public ClearEditText(Context context) { 
        this(context, null); 
    } 
 
    public ClearEditText(Context context, AttributeSet attrs) { 
        //这里构造方法也很重要，不加这个很多属性不能再XML里面定义
        this(context, attrs, android.R.attr.editTextStyle); 
    } 
    
    public ClearEditText(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }
    
    
    private void init() { 
        //获取EditText的DrawableRight,假如没有设置我们就使用默认的图片,getCompoundDrawables()获取Drawable的四个位置的数组
        mClearDrawable = getCompoundDrawables()[2]; 
        if (mClearDrawable == null) {
            mClearDrawable = getResources().getDrawable(R.drawable.icon_del);
//            throw new NullPointerException("You can add drawableRight attribute in XML");
        } 
        //设置图标的位置以及大小,getIntrinsicWidth()获取显示出来的大小而不是原图片的带小
        mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight()); 
        //默认设置隐藏图标
        setClearIconVisible(false); 
        //设置焦点改变的监听
        setOnFocusChangeListener(this); 
        //设置输入框里面内容发生改变的监听
        addTextChangedListener(this); 
    } 
 
 
    /**
     * 因为我们不能直接给EditText设置点击事件，所以我们用记住我们按下的位置来模拟点击事件
     * 当我们按下的位置 在  EditText的宽度 - 图标到控件右边的间距 - 图标的宽度  和
     * EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标，竖直方向就没有考虑
     */
    @Override 
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            if (getCompoundDrawables()[2] != null) {
                //getTotalPaddingRight()图标左边缘至控件右边缘的距离
                //getWidth() - getTotalPaddingRight()表示从最左边到图标左边缘的位置
                //getWidth() - getPaddingRight()表示最左边到图标右边缘的位置
                boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())
                        && (event.getX() < ((getWidth() - getPaddingRight())));
                
                if (touchable) {
                    this.setText("");
                }
            }
//            if(getCompoundDrawables()[0] != null){
//                boolean touchLeft = event.getX()>0 && event.getX()<getCompoundDrawables()[0].getIntrinsicWidth();
//                if(touchLeft){
//                    if(isShow==false){
//                        isShow = true;
//                        //设置为可见
//                        this.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
//                    }else{
//                        isShow = false;
//                        //设置为密码模式
//                        this.setTransformationMethod(PasswordTransformationMethod.getInstance());
//                    }
//                }
//            }
        }

        return super.onTouchEvent(event);
    }
    /**
     * 当ClearEditText焦点发生变化的时候，判断里面字符串长度设置清除图标的显示与隐藏
     */
    @Override 
    public void onFocusChange(View v, boolean hasFocus) { 
        this.hasFoucs = hasFocus;
        if (hasFocus) { 
            setClearIconVisible(getText().length() > 0); 
        } else { 
            setClearIconVisible(false); 
        } 
    } 
    /**
     * 设置清除图标的显示与隐藏，调用setCompoundDrawables为EditText绘制上去
     * @param visible
     */
    protected void setClearIconVisible(boolean visible) { 
        Drawable right = visible ? mClearDrawable : null; 
        setCompoundDrawables(getCompoundDrawables()[0], 
                getCompoundDrawables()[1], right, getCompoundDrawables()[3]); 
    }
    /**
     * 当输入框里面内容发生变化的时候回调的方法
     */
    @Override 
    public void onTextChanged(CharSequence s, int start, int count, 
            int after) { 
                if(hasFoucs){
                    setClearIconVisible(s.length() > 0);
                }
    } 
 
    @Override 
    public void beforeTextChanged(CharSequence s, int start, int count, 
            int after) { 
         
    } 
 
    @Override 
    public void afterTextChanged(Editable s) { 
         
    } 
    /**
     * 设置晃动动画
     */
    public void setShakeAnimation(){
        this.startAnimation(shakeAnimation(5));
    }
    
    
    /**
     * 晃动动画
     * @param counts 1秒钟晃动多少下
     * @return
     */
    public static Animation shakeAnimation(int counts){
        Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0);
        translateAnimation.setInterpolator(new CycleInterpolator(counts));
        translateAnimation.setDuration(1000);
        return translateAnimation;
    }
}

三、activity_main.xml 布局

<LinearLayout 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:background="#fff"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#F0F0F0"
        android:orientation="horizontal"
        android:padding="5dp" >

        <Button
            android:id="@+id/search_btn_2wm"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:alpha="0.7"
            android:background="@drawable/icon_qrcode" />

        <com.t20.searchdemo.view.ClearEditText
            android:id="@+id/search_editText_searchContent"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#fff"
            android:drawableLeft="@drawable/icon_search"
            android:drawablePadding="5dp"
            android:ems="10"
            android:hint="输入要搜索的ID或名称"
            android:maxLines="1"
            android:padding="5dp"
            android:textColor="#ff9314"
            android:textSize="13sp" >
        </com.t20.searchdemo.view.ClearEditText>

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp" >

            <Button
                android:id="@+id/search_btn_back"
                android:layout_width="30dp"
                android:layout_height="35dp"
                android:alpha="0.7"
                android:background="@drawable/icon_right_back" />

            <TextView
                android:id="@+id/search_tv_search"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="搜索"
                android:textColor="#FF9316"
                android:textSize="13sp"
                android:visibility="gone" />
        </FrameLayout>
    </LinearLayout>

    <ListView
        android:id="@+id/search_listView_search_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

search_listview_item.xml 布局，这个是ListView的子项布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/search_listView_item_iv_userHeadPic"
        android:layout_width="30dp"
        android:layout_height="30dp"       
        android:src="@drawable/head_default" />

    <TextView
        android:id="@+id/search_listView_item_tv_userNumber"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginLeft="20dp"
        android:textSize="16sp"
		android:gravity="center"
		android:textColor="#666"
        android:text="123456" />

    <TextView
        android:id="@+id/search_listView_item_tv_userNick"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginLeft="20dp"
        android:textSize="16sp"
        android:gravity="center"
        android:textColor="#666"
        android:text="匿名用户" />

</LinearLayout>

四、活动 MainActivity.ajva 的代码如下：

package com.t20.searchdemo;

import java.util.ArrayList;
import java.util.List;

import com.t20.searchdemo.adapter.SearchListViewAdapter;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.view.View.OnClickListener;
import android.view.inputmethod.EditorInfo;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.TextView.OnEditorActionListener;

public class MainActivity extends Activity implements OnClickListener {

	//返回按钮（关闭）
	private Button mButtonBack;
	//输入框
	private EditText mEditTextSearchContent;
	//搜索按钮
	private TextView mTextViewSearch;
	//用户输入的搜索内容
	private String searchContent;
	//显示搜索内容的ListView
	private ListView mListViewSearchResult;
	
	//用户集合
	private List<User> mUserList;
	//ListView的适配器
	private SearchListViewAdapter mSearchListViewAdapter;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// 1、隐藏标题栏，在加载布局之前设置(兼容Android2.3.3版本)
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		// 2、隐藏状态栏
		//getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);				
		setContentView(R.layout.activity_main);
		initView();
		initEvent();
	}

	private void initEvent() {
		// TODO Auto-generated method stub
		////点击输入法软键盘回车键时，也可以直接查询
		mEditTextSearchContent.setOnEditorActionListener(new OnEditorActionListener() {
			
			@Override
			public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
				if (!TextUtils.isEmpty(mEditTextSearchContent.getText())) {
					// 保持光标在输入框最后
					mEditTextSearchContent.setSelection(mEditTextSearchContent.getText().length());
				}
				//当actionId == XX_SEND 或者 XX_DONE时都触发
				//或者event.getKeyCode == ENTER 且 event.getAction == ACTION_DOWN时也触发
				//注意，这是一定要判断event != null。因为在某些输入法上会返回null。
				if (actionId == EditorInfo.IME_ACTION_SEND
						|| actionId == EditorInfo.IME_ACTION_DONE
						|| (event != null && KeyEvent.KEYCODE_ENTER == event.getKeyCode() && KeyEvent.ACTION_DOWN == event.getAction())) {
					//点击输入法软键盘回车键时，进行查询
					search();
				}
				return true;//为true表示自己消费该事件
			}
		});
	}

	private void initView() {
		// TODO Auto-generated method stub
		mButtonBack=(Button) findViewById(R.id.search_btn_back);
		mEditTextSearchContent=(EditText) findViewById(R.id.search_editText_searchContent);
		mTextViewSearch=(TextView) findViewById(R.id.search_tv_search);
		mListViewSearchResult=(ListView) findViewById(R.id.search_listView_search_result);
		//设置监听
		mButtonBack.setOnClickListener(this);
		mTextViewSearch.setOnClickListener(this);
		mEditTextSearchContent.setOnClickListener(this);
		mEditTextSearchContent.addTextChangedListener(textWatcher);
	}
	
	private TextWatcher textWatcher=new TextWatcher() {
		
		@Override
		public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
				int arg3) {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public void afterTextChanged(Editable editable) {
			// TODO Auto-generated method stub
			//获取输入框内容
			String content=mEditTextSearchContent.getText().toString();
			//输入框内容为空时，显示返回按钮，隐藏搜索按钮
			if(content.isEmpty()){
				mTextViewSearch.setVisibility(View.GONE);
				mButtonBack.setVisibility(View.VISIBLE);
				mListViewSearchResult.setVisibility(View.GONE);
			}else{
				mTextViewSearch.setVisibility(View.VISIBLE);
				mButtonBack.setVisibility(View.GONE);
				mListViewSearchResult.setVisibility(View.VISIBLE);
			}
		}
	};
	@Override
	public void onClick(View view) {
		// TODO Auto-generated method stub
		switch (view.getId()) {
		//点击搜索框
		case R.id.search_editText_searchContent:
			mEditTextSearchContent.setFocusable(true);
			mEditTextSearchContent.setFocusableInTouchMode(true);
			mEditTextSearchContent.requestFocus();		
			InputMethodManager imm=(InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
			imm.showSoftInput(mEditTextSearchContent, 0);
			break;
		//关闭按钮
		case R.id.search_btn_back:
			finish();
			break;
		//点击搜索	
		case R.id.search_tv_search:
			search();
			break;
		}
	}
	/**
	 * 搜索数据
	 */
	private void search() {
		// TODO Auto-generated method stub
		//获取用户搜索的内容
		searchContent=mEditTextSearchContent.getText().toString();
		//初始化一些数据（实际开发中，是去数据库中读取）
		mUserList=new ArrayList<MainActivity.User>();
		User u1=new User(1, "4346546", "张三");
		User u2=new User(1, "3346565", "李四");
		User u3=new User(1, "6865879", "王五");
		User u4=new User(1, "5745786", "赵六");
		mUserList.add(u1);
		mUserList.add(u2);
		mUserList.add(u3);
		mUserList.add(u4);
		//设置适配器
		mSearchListViewAdapter=new SearchListViewAdapter(MainActivity.this, mUserList, searchContent);
		mListViewSearchResult.setAdapter(mSearchListViewAdapter);
	}
	/**
	 * 自定义一个用户类
	 */
	public class User {
		Integer id;   //Id
		String number;//账号
		String nick;  //昵称
		public Integer getId() {
			return id;
		}
		public void setId(Integer id) {
			this.id = id;
		}
		public String getNumber() {
			return number;
		}
		public void setNumber(String number) {
			this.number = number;
		}
		public String getNick() {
			return nick;
		}
		public void setNick(String nick) {
			this.nick = nick;
		}
		
		public User() {
			super();
		}
		public User(Integer id, String number, String nick) {
			super();
			this.id = id;
			this.number = number;
			this.nick = nick;
		}
		
	}
}

五、自定义的 SearchListViewAdapter.java 适配器

扫描二维码关注公众号，回复： 3371835 查看本文章

package com.t20.searchdemo.adapter;

import java.util.List;

import com.t20.searchdemo.MainActivity.User;
import com.t20.searchdemo.R;
import com.t20.searchdemo.util.KeyWordUtil;

import android.content.Context;
import android.graphics.Color;
import android.text.SpannableString;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class SearchListViewAdapter extends BaseAdapter {

	private Context context;
	private List<User> mUserList;	
	private String searchContent;//用户搜索的内容

	public SearchListViewAdapter(Context context,
			List<User> mUserList, String searchContent) {
		super();
		this.context = context;
		this.mUserList = mUserList;
		this.searchContent = searchContent;
	}

	public void setSearchContent(String searchContent) {
		this.searchContent = searchContent;
	}


	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return mUserList.size();
	}

	@Override
	public Object getItem(int arg0) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public long getItemId(int arg0) {
		// TODO Auto-generated method stub
		return 0;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		//获得对象
		User user=mUserList.get(position);
		//加载布局
		View view;
		ViewHolder viewHolder;
		if(convertView==null){
			view=LayoutInflater.from(context).inflate(R.layout.search_listview_item,null);
			viewHolder=new ViewHolder();
			//获取控件
			viewHolder.textViewNumber=(TextView) view.findViewById(R.id.search_listView_item_tv_userNumber);
			viewHolder.textViewNick=(TextView) view.findViewById(R.id.search_listView_item_tv_userNick);
			//将ViewHolder存储在View中
			view.setTag(viewHolder);
		}else{
			view=convertView;
			//重新获取ViewHolder
			viewHolder=(ViewHolder) view.getTag();			
		}
		//设置控件的值
		//搜索高亮显示
		if(user.getNumber()!=null&&user.getNumber().length()>0){
			SpannableString number=KeyWordUtil.matcherSearchTitle(Color.parseColor("#ff9314"), user.getNumber()+"", searchContent);	
			viewHolder.textViewNumber.setText(number);
		}
		if(user.getNick()!=null&&user.getNick().length()>0){
			SpannableString nick=KeyWordUtil.matcherSearchTitle(Color.parseColor("#ff9314"), user.getNick(), searchContent);
			viewHolder.textViewNick.setText(nick);
		}		
		
		return view;
	}
	class  ViewHolder{
		TextView textViewNumber;
		TextView textViewNick;
	}

}