如何在Android RecyclerView中实现WhatsApp式上下箭头滚动搜索结果

要实现类似WhatsApp的搜索结果上下跳转功能，核心思路是保存所有匹配项的位置索引，通过点击按钮切换当前选中的匹配项并滚动到对应位置，以下是完整实现步骤：

1. 自定义SearchView布局 #

默认SearchView没有上下箭头按钮，我们需要自定义布局添加这两个控件：

菜单文件（res/menu/main_menu.xml） #

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="搜索"
        app:actionLayout="@layout/custom_search_view"
        app:showAsAction="always|collapseActionView" />
</menu>

自定义SearchView布局（res/layout/custom_search_view.xml） #

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <androidx.appcompat.widget.SearchView
        android:id="@+id/search_view"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:iconifiedByDefault="false" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/btn_up"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_arrow_up" />

        <ImageButton
            android:id="@+id/btn_down"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_arrow_down" />
    </LinearLayout>
</LinearLayout>

2. 核心逻辑实现 #

在Activity/Fragment中初始化控件，处理搜索过滤和按钮点击事件：

声明变量 #

private List<Integer> matchPositions = new ArrayList<>(); // 保存所有匹配项的原始索引
private int currentMatchIndex = -1; // 当前选中的匹配项索引
private RecyclerView recyclerView;
private YourAdapter adapter;
private SearchView searchView;
private ImageButton btnUp, btnDown;

初始化菜单与监听 #

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main_menu, menu);
    MenuItem searchItem = menu.findItem(R.id.action_search);
    View customSearchView = searchItem.getActionView();
    
    // 绑定控件
    searchView = customSearchView.findViewById(R.id.search_view);
    btnUp = customSearchView.findViewById(R.id.btn_up);
    btnDown = customSearchView.findViewById(R.id.btn_down);

    // 搜索文本变化监听
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        @Override
        public boolean onQueryTextSubmit(String query) {
            return false;
        }

        @Override
        public boolean onQueryTextChange(String newText) {
            filterSearchResults(newText);
            return true;
        }
    });

    // 上下箭头点击事件
    btnUp.setOnClickListener(v -> goToPreviousMatch());
    btnDown.setOnClickListener(v -> goToNextMatch());

    return true;
}

过滤搜索结果并保存匹配位置 #

private void filterSearchResults(String query) {
    matchPositions.clear();
    currentMatchIndex = -1;

    // 遍历数据源，收集所有匹配项的索引
    for (int i = 0; i < yourOriginalDataList.size(); i++) {
        YourDataModel item = yourOriginalDataList.get(i);
        // 根据你的需求定义匹配规则，这里以标题包含搜索文本为例
        if (item.getTitle().toLowerCase().contains(query.toLowerCase())) {
            matchPositions.add(i);
        }
    }

    // 更新适配器的过滤结果
    adapter.updateFilteredList(query);
    // 根据匹配数量启用/禁用按钮
    btnUp.setEnabled(matchPositions.size() > 1);
    btnDown.setEnabled(!matchPositions.isEmpty());
}

实现上下导航逻辑 #

private void goToNextMatch() {
    if (matchPositions.isEmpty()) return;
    // 循环切换到下一个匹配项
    currentMatchIndex = (currentMatchIndex + 1) % matchPositions.size();
    scrollToTargetPosition(currentMatchIndex);
}

private void goToPreviousMatch() {
    if (matchPositions.isEmpty()) return;
    // 循环切换到上一个匹配项（避免负数索引）
    currentMatchIndex = (currentMatchIndex - 1 + matchPositions.size()) % matchPositions.size();
    scrollToTargetPosition(currentMatchIndex);
}

private void scrollToTargetPosition(int index) {
    int targetPosition = matchPositions.get(index);
    // 平滑滚动到目标位置，可设置居中显示
    recyclerView.smoothScrollToPosition(targetPosition);
    // 通知适配器高亮当前匹配项
    adapter.setHighlightPosition(targetPosition);
}

3. 适配器中添加高亮逻辑 #

在RecyclerView适配器中处理匹配项的高亮显示：

public class YourAdapter extends RecyclerView.Adapter<YourAdapter.ViewHolder> {
    private List<YourDataModel> originalData;
    private List<YourDataModel> filteredData;
    private int highlightPosition = -1;

    // 构造方法、ViewHolder等基础代码省略

    public void updateFilteredList(String query) {
        filteredData.clear();
        for (YourDataModel item : originalData) {
            if (item.getTitle().toLowerCase().contains(query.toLowerCase())) {
                filteredData.add(item);
            }
        }
        notifyDataSetChanged();
    }

    public void setHighlightPosition(int position) {
        int oldHighlight = highlightPosition;
        highlightPosition = position;
        // 更新旧高亮项和新高亮项的UI
        if (oldHighlight != -1) notifyItemChanged(oldHighlight);
        notifyItemChanged(highlightPosition);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        YourDataModel item = filteredData.get(position);
        holder.titleTv.setText(item.getTitle());

        // 设置高亮样式
        if (position == highlightPosition) {
            holder.itemView.setBackgroundColor(ContextCompat.getColor(holder.itemView.getContext(), R.color.search_highlight));
        } else {
            holder.itemView.setBackgroundColor(ContextCompat.getColor(holder.itemView.getContext(), android.R.color.transparent));
        }
    }
}

关键细节说明 #

• 按钮状态控制：当匹配项数量为0时，禁用两个按钮；只有1个匹配项时，禁用上箭头按钮，避免无效操作。
• 滚动优化：使用smoothScrollToPosition实现流畅滚动，若需要item居中显示，可改用LinearLayoutManager.scrollToPositionWithOffset自定义偏移量。
• 性能优化：如果数据源较大，建议将过滤逻辑放在子线程执行，避免阻塞UI线程。
• 循环导航：通过取模运算实现匹配项的循环切换，用户点击到最后一项时，下一次点击会回到第一个匹配项。

内容的提问来源于stack exchange，提问作者Ahsan Malik