Android仿微信好友列表检索功能

在实际的开发中，经常会遇到一些列表数据，有的时候数据比较少我们可能会单开一个页面进行列表展示，有的时候可能会选择OptionsPickerView进行滑动显示选择，但是在数据量比较大的时候，OptionsPickerView和聊表显示就显得没有那么的人性化了，所以这时候我们最好是选择列表显示，然后配备上根据首字母去筛选和能够通过自己的输入的键值进行匹配筛选

在使用之前，我们需要集成我们所需要的三方jar，这里的版本号可根据官网信息进行最新的版本号匹配

implementation 'me.yokeyword:indexablerecyclerview:1.3.0'

首先先上分类的布局文件，布局很简单，主要是为了用来区分首字母和首字母下的内容列表

item_index_contact

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="@color/colorBackground"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_index"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingStart="24dp"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        android:text="A"
        android:textColor="@color/color_333333"
        android:textSize="14sp"
        android:textStyle="bold" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0.8dp"
        android:background="#f0f0f0" />
</FrameLayout>

item_contact

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:background="@color/colorWhite"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textColor="@color/color_333333"
        android:textSize="13sp"
        tools:text="名称" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@color/colorMain" />
</LinearLayout>

在布局实现之后，我们需要的就是封装一个我们所需要去使用的adapter

public class ContactAdapter extends IndexableAdapter<WanAndroidListBean> {

    private LayoutInflater mInflater;

    public ContactAdapter(Context context) {
        mInflater = LayoutInflater.from(context);
    }

    @Override
    public RecyclerView.ViewHolder onCreateTitleViewHolder(ViewGroup parent) {
        View view = mInflater.inflate(R.layout.item_index_contact, parent, false);
        return new IndexVH(view);
    }

    @Override
    public RecyclerView.ViewHolder onCreateContentViewHolder(ViewGroup parent) {
        View view = mInflater.inflate(R.layout.item_contact, parent, false);
        return new ContentVH(view);
    }

    @Override
    public void onBindTitleViewHolder(RecyclerView.ViewHolder holder, String indexTitle) {
        IndexVH vh = (IndexVH) holder;
        vh.tv.setText(indexTitle);
    }

    @Override
    public void onBindContentViewHolder(RecyclerView.ViewHolder holder, WanAndroidListBean entity) {
        ContentVH vh = (ContentVH) holder;
        vh.tvName.setText(entity.getName());
    }

    private class IndexVH extends RecyclerView.ViewHolder {
        TextView tv;

        public IndexVH(View itemView) {
            super(itemView);
            tv = itemView.findViewById(R.id.tv_index);
        }
    }

    private class ContentVH extends RecyclerView.ViewHolder {
        TextView tvName;

        public ContentVH(View itemView) {
            super(itemView);
            tvName = itemView.findViewById(R.id.tv_name);
        }
    }
}

这里我们封装的bean类千万不要忘记了去添加使用jar中的方法，使用这个主要是为了我们在搜索筛选能够快速的定位到我们所输入的模糊搜索的关键字，这里我们使用的是调用wanAndroid中的列表数据，我们直接加上我们所implements的方法就可以了

需要implements的地方

接下来就是我们需要使用的时候了，首先还是一样，先定义布局文件

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBackground"
    android:orientation="vertical">

    <include layout="@layout/app_title_bar" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="12dp"
        android:background="@drawable/bg_white_10dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingStart="12dp"
        android:paddingEnd="12dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_search" />

        <com.model.common.utils.view.ClearEditText
            android:id="@+id/edit_search"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:background="@null"
            android:gravity="center_vertical"
            android:hint="请输入搜索内容"
            android:padding="10dp"
            android:singleLine="true"
            android:textColor="@color/color_333333"
            android:textColorHint="@color/colorHint"
            android:textSize="13sp" />
    </LinearLayout>

    <me.yokeyword.indexablerv.IndexableLayout
        android:id="@+id/index_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:indexBar_layout_width="40dp"
        app:indexBar_selectedTextColor="@color/colorMain"
        app:indexBar_textColor="@color/color_333333"
        app:indexBar_textSize="14sp"
        app:indexBar_textSpace="5dp" />
</LinearLayout>

获取数据后效果图 字母筛选效果

最后就是我们在activity中去使用了，首先还是同样的操作，定义我们的adapter文件

binding.indexLayout.setLayoutManager(LinearLayoutManager(mContext))
mAdapter = ContactAdapter(this)
binding.indexLayout.setAdapter(mAdapter)
binding.indexLayout.setOverlayStyle_Center()
mAdapter.setDatas(infoList)
//全字母排序。  排序规则设置为：每个字母都会进行比较排序；速度较慢
binding.indexLayout.setCompareMode(IndexableLayout.MODE_FAST)
mAdapter.setOnItemContentClickListener { _, originalPosition, currentPosition, entity ->
    val intent = Intent()
    if (originalPosition > 0) {
        intent.putExtra("name", entity.name)
        setResult(RESULT_OK, intent)
        finish()
    } else {
        ToastUtils.showMessage(
            mContext,
            "选中Header/Footer:${entity.name} 当前位置:$currentPosition"
        )
    }
}

然后别忘记了我们的输入框需要做的筛选动作哦

binding.editSearch.setTextChangedListener {
    val key = StringUtils.getEditString(binding.editSearch)
    if (StringUtils.isEmpty(key)) {
        mAdapter.setDatas(infoList)
    } else {
        mAdapter.setDatas(filterCity(key))
    }
    mAdapter.notifyDataSetChanged()
}

最后附上我们的filterCity去根据我们输入的内容进行数据匹配，至此，我们所有的工作都已经完成咯

private fun filterCity(key: String?): MutableList<WanAndroidListBean> {
    val data = ArrayList<WanAndroidListBean>()
    for (item in infoList) {
        if (item.name.contains(key.toString())) {
            data.add(item)
        }
    }
    return data
}

搜索筛选效果

代码传送门