Android仿微信搜索，Recyclerview+关键字动态匹配筛选变色效果（Edittext+Recyclerview）

最新推荐文章于 2021-06-19 23:15:28 发布

tangxuesong6

最新推荐文章于 2021-06-19 23:15:28 发布

阅读量5.3k

点赞数 9

分类专栏： android开发文章标签： Android Recyclerview 微信搜索关键字变色

本文链接：https://blog.csdn.net/songtangxue/article/details/79080773

版权

android开发专栏收录该内容

13 篇文章 2 订阅

订阅专栏

一、概述

我们要实现的是模仿微信的搜索效果，通过监听Edittext中文字的变化动态匹配Recyclerview列表中文字，刷新列表，并将关键字变色显示。
首先上图，展示我们将要实现的效果(关键字是有颜色变化的，列表也有刷新。我们的gif图表现的不是很明显)。
1. 关键字全部变色效果
然后是部分匹配——>即例如我们数据“第一天第一天”，只有第一个“一”变色。我本意是要写上边那个全部变色的效果的，偶然发现了只能匹配部分的问题，所以拿出来问题与解决方法与大家分享下。
2. 部分匹配效果

二、实现

所有代码已上传，并且有详细的注释，链接地址在文末。大家稍后可以下载。
1. 首先上item布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:id="@+id/ll_item"
    android:layout_marginTop="3dp"
    android:background="@drawable/shape_search"
    android:layout_marginRight="8dp"
    android:layout_marginLeft="8dp"
    android:layout_height="60dp">
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/imgv_simple"
        android:layout_marginRight="5dp"
        android:layout_marginLeft="10dp"
        android:layout_gravity="center"
        fresco:backgroundImage="@mipmap/imgv_girl"
        fresco:placeholderImage="@mipmap/imgv_girl"
        fresco:roundBottomLeft="false"
        fresco:roundBottomRight="true"
        fresco:roundTopLeft="true"
        fresco:roundTopRight="false"
        fresco:roundedCornerRadius="50dp"
        android:layout_width="45dp"
        android:layout_height="45dp" />
    <TextView
        android:textColor="#7f44ff"
        android:gravity="center"
        android:text="123"
        android:id="@+id/tv_text"
        android:marqueeRepeatLimit="marquee_forever"
        android:ellipsize="marquee"
        android:focusable="true"
        android:singleLine="true"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="45dp" />
</LinearLayout>

利用Fresco的圆角效果实现我们item中图片的叶子形(姑且叫它叶子形吧)样式，并且给整个LinearLayout布局加一个5dp圆角并且带黑色边框的background，如此便形成了我们效果图中每个item的效果。
2. 列表页布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#f5f2f2"
    tools:context="com.example.txs.myapplication.MainActivityWhole">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#6CC4B8"
        android:gravity="center"
        android:text="搜索匹配关键字(全部变色)"
        android:textColor="#fff" />
        <LinearLayout
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@drawable/shape_search"
            android:orientation="horizontal">
            <ImageView
                android:layout_marginLeft="3dp"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_gravity="center"
                android:scaleType="centerInside"
                android:src="@mipmap/imgv_search" />
            <EditText
                android:id="@+id/edt_search"
                android:layout_width="0dp"
                android:layout_height="28dp"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="@null"
                android:imeOptions="actionSearch"
                android:lines="1"
                android:singleLine="true" />
            <ImageView
                android:layout_marginRight="3dp"
                android:id="@+id/imgv_delete"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_gravity="center"
                android:scaleType="centerInside"
                android:src="@mipmap/imgv_delete"
                android:visibility="gone" />
        </LinearLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rc_search"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

整个页面很简单，由上到下是title,搜索框，Recyclerview。我们的重点不在这里，所以界面搭建的不是很复杂，能看就好～接下来才是我们的重点。
3. 适配器①—>部分匹配的适配器：

/**
 * @author txs
 * @date 2018/01/16
 */

public class RcAdapterPartChange extends RecyclerView.Adapter<RcAdapterPartChange.MyViewHolder> {
    private Context context;
    /**
     * adapter传递过来的数据集合
     */
    private List<String> list = new ArrayList<>();
    /**
     * 变色数据的其实位置 position
     */
    private int beginChangePos;
    /**
     * 需要改变颜色的text
     */
    private String text;
    /**
     * text改变的颜色
     */
    private ForegroundColorSpan span;

    /**
     * 在MainActivity中设置text和span
     */
    public void setText(String text, ForegroundColorSpan span) {
        this.text = text;
        this.span = span;
    }

    public RcAdapterPartChange(Context context, List<String> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        MyViewHolder holder = new MyViewHolder(LayoutInflater.from(context).inflate(R.layout.item_search, parent, false));
        return holder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, final int position) {
        /**如果没有进行搜索操作或者搜索之后点击了删除按钮 我们会在MainActivity中把text置空并传递过来*/
        if (text != null) {
            //获取匹配文字的 position
            beginChangePos = list.get(position).indexOf(text);
            // 文字的builder 用来做变色操作
            SpannableStringBuilder builder = new SpannableStringBuilder(list.get(position));
            //如果没有匹配到关键字的话 list.get(position).indexOf(text)会返回-1
            if (beginChangePos != -1) {
                //设置呈现的文字
                builder.setSpan(span, beginChangePos, beginChangePos + text.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                holder.mTvText.setText(builder);
            }
        } else {
            holder.mTvText.setText(list.get(position));
        }
        //点击监听
        holder.mLlItem.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                onItemClickListener.onClick(view, position);
            }
        });
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    public interface onItemClickListener {
        void onClick(View view, int pos);
    }

    /**
     * Recyclerview的点击监听接口
     */
    private onItemClickListener onItemClickListener;

    public void setOnItemClickListener(RcAdapterPartChange.onItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    class MyViewHolder extends RecyclerView.ViewHolder {
        private LinearLayout mLlItem;
        private SimpleDraweeView mImgvSimple;
        private TextView mTvText;

        public MyViewHolder(View itemView) {
            super(itemView);
            mLlItem = (LinearLayout) itemView.findViewById(R.id.ll_item);
            mImgvSimple = (SimpleDraweeView) itemView.findViewById(R.id.imgv_simple);
            mTvText = (TextView) itemView.findViewById(R.id.tv_text);
        }
    }
}

先说说这个适配器的瑕疵，由于.indexOf()的坑，使用这个适配器产生的最终效果如我们的第二张图，只能匹配每个item中第一条关键字，即比如我们的数据“第一天一天”,它只能使第一个”一”字变色（当然整个列表的刷新和匹配效果是没问题的，它只影响了关键字的变色效果。仅此而已！！）。而且不论我们后续还有多少个“一”，它依旧只能变色第一个“一”字。有的人可能碰巧会需要这个效果，所以我放上来代码和解决思路供大家参考。
首先我们适配器在创建时传过来一个list集合，集合里面可以包含你从网络或者数据库或者其他方式获取到的数据（已经经过筛选，比如我们搜索“一”字，传过来的集合是那些包含“一”字的数据）。然后提供一个set方法void setText(String text, ForegroundColorSpan span)，在刷新适配器之前用setText()将我们的关键字以及关键字要变成的颜色传过来，像这样：

           //设置要变色的关键字
            adapter.setText(text, redSpan);
           //刷新适配器
            refreshUI();

然后适配器就会重新执行到onBindViewHolder方法，刷新界面，就可以看到我们的筛选和变色效果了。下面我们来分析这段代码：

 /**如果没有进行搜索操作或者搜索之后点击了删除按钮 我们会在MainActivity中把text置空并传递过来*/
        if (text != null) {
            //获取匹配文字的 position
            beginChangePos = list.get(position).indexOf(text);
            // 文字的builder 用来做变色操作
            SpannableStringBuilder builder = new SpannableStringBuilder(list.get(position));
            //如果没有匹配到关键字的话 list.get(position).indexOf(text)会返回-1
            if (beginChangePos != -1) {
                //设置呈现的文字
                builder.setSpan(span, beginChangePos, beginChangePos + text.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                holder.mTvText.setText(builder);
            }
        } else {
            holder.mTvText.setText(list.get(position));
        }

开始我们有一个对text判空的操作，在后面的Activity代码中你可以看到，我在刷新适配器之前，先判断edittext中是否输入了关键字，如果有关键字则会通过setText（text，span）把关键字传递过来，如果没有关键字则会置空setText(null,null)。如果有关键字的话，我们用indexOf()找到它的起始位置（position），当然如果没有匹配到关键字的话list.get(position).indexOf(text)会返回-1，然后我们会通过SpannableStringBuilder对关键字进行变色操作。下面我们再来验证一些indexOf()的问题，上代码：

 public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Button mBtnIndexof;
    private Button mBtnMatcher;
    private String mString;
    private String mKeyword;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mBtnIndexof = (Button) findViewById(R.id.btn_indexof);
        mBtnMatcher = (Button) findViewById(R.id.btn_matcher);
        mString = "第一天第一夜第一个时辰";
        mKeyword = "一";
        setListener();
    }
    private void setListener() {
        mBtnIndexof.setOnClickListener(this);
        mBtnMatcher.setOnClickListener(this);
    }
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_indexof:
               int pos = mString.indexOf(mKeyword);
                Log.e("test", "indexof== "+pos);
                break;
            case R.id.btn_matcher:
                //条件 keyword
                Pattern pattern = Pattern.compile(mKeyword);
                //匹配
                Matcher matcher = pattern.matcher(mString);
                while (matcher.find()) {
                    int start = matcher.start();
                    Log.e("test", "macher== "+start);
                    int end = matcher.end();
                }
                break;
            default:
                break;
        }
    }
}

结果：

01-16 22:23:06.831 1581-1581/com.example.testinndexof E/test: indexof== 1
01-16 22:23:10.139 1581-1581/com.example.testinndexof E/test: macher== 1
01-16 22:23:10.139 1581-1581/com.example.testinndexof E/test: macher== 4
01-16 22:23:10.139 1581-1581/com.example.testinndexof E/test: macher== 7

通过控制台输出的结果我们可以看到，indexOf()只匹配到了第一个“一”的位置，之后没有继续匹配。这也是indexOf()的原理所致。所以用此方法只能匹配到首个对应字符的问题已经找到了，接下来应该怎么做让它完全匹配呢？上述代码已经给出了解决方法，用Matcher，matcher.find()。
4. 适配器②—>全部匹配的适配器：

/**
 * @author txs
 * @date 2018/01/16
 */

public class RcAdapterWholeChange extends RecyclerView.Adapter<RcAdapterWholeChange.MyViewHolder> {
    private Context context;
    /**
     * adapter传递过来的数据集合
     */
    private List<String> list = new ArrayList<>();
    /**
     * 需要改变颜色的text
     */
    private String text;

    /**
     * 在MainActivity中设置text
     */
    public void setText(String text) {
        this.text = text;
    }

    public RcAdapterWholeChange(Context context, List<String> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        MyViewHolder holder = new MyViewHolder(LayoutInflater.from(context).inflate(R.layout.item_search, parent, false));
        return holder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, final int position) {
        /**如果没有进行搜索操作或者搜索之后点击了删除按钮 我们会在MainActivity中把text置空并传递过来*/
        if (text != null) {
            //设置span
            SpannableString string = matcherSearchText(Color.rgb(255, 0, 0), list.get(position), text);
            holder.mTvText.setText(string);
        } else {
            holder.mTvText.setText(list.get(position));
        }
        //点击监听
        holder.mLlItem.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                onItemClickListener.onClick(view, position);
            }
        });
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    /**
     * Recyclerview的点击监听接口
     */
    public interface onItemClickListener {
        void onClick(View view, int pos);
    }

    private onItemClickListener onItemClickListener;

    public void setOnItemClickListener(RcAdapterWholeChange.onItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    class MyViewHolder extends RecyclerView.ViewHolder {
        private LinearLayout mLlItem;
        private SimpleDraweeView mImgvSimple;
        private TextView mTvText;

        public MyViewHolder(View itemView) {
            super(itemView);
            mLlItem = (LinearLayout) itemView.findViewById(R.id.ll_item);
            mImgvSimple = (SimpleDraweeView) itemView.findViewById(R.id.imgv_simple);
            mTvText = (TextView) itemView.findViewById(R.id.tv_text);
        }
    }

    /**
     * 正则匹配 返回值是一个SpannableString 即经过变色处理的数据
     */
    private SpannableString matcherSearchText(int color, String text, String keyword) {
        SpannableString spannableString = new SpannableString(text);
        //条件 keyword
        Pattern pattern = Pattern.compile(keyword);
        //匹配
        Matcher matcher = pattern.matcher(spannableString);
        while (matcher.find()) {
            int start = matcher.start();
            int end = matcher.end();
            //ForegroundColorSpan 需要new 不然也只能是部分变色
            spannableString.setSpan(new ForegroundColorSpan(color), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
        //返回变色处理的结果
        return spannableString;
    }

}

改动不大，重点是一个matcherSearchText方法，返回值是SpannableString，也就是经过我们经过变色处理的文字。主要使用matcher.find()方法找到所以有匹配的关键字，它的效果已经在上边的代码中展示过了(请看上边的控制台输出结果)。
5. Activity中的代码：

public class MainActivityWhole extends AppCompatActivity {
    /**
     * 搜索框
     */
    private EditText mEdtSearch;
    /**
     * 删除按钮
     */
    private ImageView mImgvDelete;
    /**
     * recyclerview
     */
    private RecyclerView mRcSearch;
    /**
     * 全部匹配的适配器
     */
    private RcAdapterWholeChange adapter;
    /**
     * 所有数据 可以是联网获取 如果有需要可以将其储存在数据库中 我们用简单的String做演示
     */
    private List<String> wholeList;
    /**
     * 此list用来保存符合我们规则的数据
     */
    private List<String> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_whole);
        initView();
        initData();
        refreshUI();
        setListener();
    }

    /**
     * 设置监听
     */
    private void setListener() {
        //edittext的监听
        mEdtSearch.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            //每次edittext内容改变时执行 控制删除按钮的显示隐藏
            @Override
            public void afterTextChanged(Editable editable) {
                if (editable.length() == 0) {
                    mImgvDelete.setVisibility(View.GONE);
                } else {
                    mImgvDelete.setVisibility(View.VISIBLE);
                }
                //匹配文字 变色
                doChangeColor(editable.toString().trim());
            }
        });
        //recyclerview的点击监听
        adapter.setOnItemClickListener(new RcAdapterWholeChange.onItemClickListener() {
            @Override
            public void onClick(View view, int pos) {
                Toast.makeText(MainActivityWhole.this, "妹子 pos== " + pos, Toast.LENGTH_SHORT).show();
            }
        });
        //删除按钮的监听
        mImgvDelete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mEdtSearch.setText("");
            }
        });
    }

    /**
     * 字体匹配方法
     */
    private void doChangeColor(String text) {
        //clear是必须的 不然只要改变edittext数据，list会一直add数据进来
        list.clear();
        //不需要匹配 把所有数据都传进来 不需要变色
        if (text.equals("")) {
            list.addAll(wholeList);
            //防止匹配过文字之后点击删除按钮 字体仍然变色的问题
            adapter.setText(null);
            refreshUI();
        } else {
            //如果edittext里面有数据 则根据edittext里面的数据进行匹配 用contains判断是否包含该条数据 包含的话则加入到list中
            for (String i : wholeList) {
                if (i.contains(text)) {
                    list.add(i);
                }
            }
            //设置要变色的关键字
            adapter.setText(text);
            refreshUI();
        }
    }

    private void initData() {
        //假数据  实际开发中请从网络或者数据库获取
        wholeList = new ArrayList<>();
        list = new ArrayList<>();
        wholeList.add("第一天一天");
        wholeList.add("第二天一天");
        wholeList.add("第三天一天");
        wholeList.add("第四天一天");
        wholeList.add("第五天五天");
        wholeList.add("第六天一天");
        wholeList.add("第七天七天");
        wholeList.add("第一天八天");
        wholeList.add("第一天九天");
        wholeList.add("第一天十天");
        wholeList.add("第一天十一天");
        //初次进入程序时 展示全部数据
        list.addAll(wholeList);
    }

    /**
     * 刷新UI
     */
    private void refreshUI() {
        if (adapter == null) {
            adapter = new RcAdapterWholeChange(this, list);
            mRcSearch.setAdapter(adapter);
        } else {
            adapter.notifyDataSetChanged();
        }
    }

    private void initView() {
        mEdtSearch = (EditText) findViewById(R.id.edt_search);
        mImgvDelete = (ImageView) findViewById(R.id.imgv_delete);
        mRcSearch = (RecyclerView) findViewById(R.id.rc_search);
        //Recyclerview的配置
        mRcSearch.setLayoutManager(new LinearLayoutManager(this));
    }
}

这里我们的思路是首先定义两个集合(wholeList和list)，wholeList用来保存我们获取的全部数据，list用来保存我们经过筛选后的数据。在为进行搜索操作是默认展示所有数据，所以会有list.addAll(wholeList)。之后通过对Edittext的变化监听afterTextChanged，在里面执行删除按钮的显示隐藏以及匹配文字并变色的doChangeColor()方法。

 //每次edittext内容改变时执行 控制删除按钮的显示隐藏
            @Override
            public void afterTextChanged(Editable editable) {
                if (editable.length() == 0) {
                    mImgvDelete.setVisibility(View.GONE);
                } else {
                    mImgvDelete.setVisibility(View.VISIBLE);
                }
                //匹配文字 变色
                doChangeColor(editable.toString().trim());
            }

接下来我们要讲的是doChangeColor()这个方法，首先看代码：

/**
     * 字体匹配方法
     */
    private void doChangeColor(String text) {
        //clear是必须的 不然只要改变edittext数据，list会一直add数据进来
        list.clear();
        //不需要匹配 把所有数据都传进来 不需要变色
        if (text.equals("")) {
            list.addAll(wholeList);
            //防止匹配过文字之后点击删除按钮 字体仍然变色的问题
            adapter.setText(null);
            refreshUI();
        } else {
            //如果edittext里面有数据 则根据edittext里面的数据进行匹配 用contains判断是否包含该条数据 包含的话则加入到list中
            for (String i : wholeList) {
                if (i.contains(text)) {
                    list.add(i);
                }
            }
            //设置要变色的关键字
            adapter.setText(text);
            refreshUI();
        }
    }

在执行doChangeColor()之初，我们要清空一下list，不然如果你第一次搜索了“一”，第二次搜索了“二”，那么最终的展示效果会是包含了“一”和“二”数据的并集～，接下来我们会判断Edittext里面是否有关键字（搜索条件），如果没有关键字，即进行展示全部数据并且不变色的操作

            list.addAll(wholeList);
            //防止匹配过文字之后点击删除按钮 字体仍然变色的问题
            adapter.setText(null);

如果有关键字，则对wholeList进行遍历，匹配。把符合条件(i.contains(text))的数据加入到list集合中并进行展示。

三、后记

整个项目并不难，而且代码中都有详细的注释。但是例如SpannableString的玩法以及Pattern、Matcher的使用没有展开来讲。最近我在考虑写一些合集来把一些基础知识总结一下放上来，这样以后在写文章的时候可以这样写：

重点是一个matcherSearchText方法，返回值是SpannableString，SpannableString怎么用？请见我的文章《Android 之SpannableString用法详解》。

有写的不好的地方，欢迎大家指教。
github项目地址：https://github.com/tangxuesong6/editchange

tangxuesong6

关注

9
点赞
踩
26

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录