概述
最近收到一个需求就是,搜索的关键词,在搜索结果页的搜索条目上高亮显示。类似于支付宝搜索结果页的效果。经过一番思虑之后,感觉还是比较简单的,直接上代码。
效果
image
代码
/**
* 字符串高亮显示部分文字
* @param textView 控件
* @param str1 要高亮显示的文字(输入的关键词)
* @param str2 包含高亮文字的字符串
*/
private void setTextHighLight(TextView textView, String str1, String str2) {
SpannableString sp = new SpannableString(str2);
// 遍历要显示的文字
for (int i = 0 ; i < str1.length() ; i ++){
// 得到单个文字
String s1 = str1.charAt(i) + "";
// 判断字符串是否包含高亮显示的文字
if (str2.contains(s1)){
// 查找文字在字符串的下标
int index = str2.indexOf(s1);
// 循环查找字符串中所有该文字并高亮显示
while (index != -1) {
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#db384c"));
sp.setSpan(colorSpan, index, index + 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// s1从这个索引往后开始第一个出现的位置
index = str2.indexOf(s1, index + 1);
}
}
}
// 设置控件
textView.setText(sp);
}
注意
为了能很好的理解代码,代码的关键位置的注释还是比较多的,就不多用文字解释了。
代码并不是很完善,根据不同的需求,可能还需要考虑中文、英文、中文字符、以及英文字符的过滤,如果有这方面的需求可以在网络上搜索一下相关的功能实现,相关介绍还是比较多的。
补充一
TextView设置高亮,有多种实现方式,通过HTML,SpannableString都可以实现。还有待总结,先把遇到的情况就下来
通过正则来过滤关键字,设置高亮。主要通过两个类Pattern和Matcher具体代码如下
/**
* TextView 显示高亮
* @param view
* @param str1 要高亮显示的文字(输入的关键词)
* @param str2 包含高亮文字的字符串
*/
private void initHighLight(TextView view, String str1, String str2) {
textView = (TextView) findViewById(R.id.textView);
SpannableString sp = new SpannableString(str2);
for (int i = 0 ; i < str1.length() ; i++){
String s = String.valueOf(str1.charAt(i));
// 正则匹配
Pattern p = Pattern.compile(s);
Matcher m = p.matcher(sp);
// 查找下一个
while (m.find()) {
// 字符开始下标
int start = m.start();
// 字符结束下标
int end = m.end();
// 设置高亮
sp.setSpan(new ForegroundColorSpan(Color.RED), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}
}
view.setText(sp);
}