Android撸一个搜索界面

前言

在Android开发过程中，我们经常会涉及到搜哦功能的问题，那么今天就让我们来一起撸一个简单的搜索界面吧。

今天涉及到知识：

搜索界面含有内容
搜索功能涉及到几个类的介绍
适配器代码
涉及到的背景xml文件
项目结构及效果图
在Activity中布局及代码

先来波效果图

1.gif

一. 搜索界面含有内容

搜索界面主要含有三个功能：

热搜列表
搜索历史
搜索框搜索的结果列表

一般热搜会显示固定几条热度比较高的数据，此处为了显示效果，我将热搜数据写死。
然后搜索历史记录的是每次点击搜索关键字成功后的数据。搜索框结果展示的话，就是展示搜索出的结果，由于是模糊匹配，可能会有多条数据，所以以列表展示。

二. 搜索功能涉及到几个类的介绍

这里为了实现搜索列表，我主要写了以下几个类:

SearchHelper : 处理搜索框控件初始化相关代码
SearchDataHelper : 数据检索工具类(处理数据)
HotAdapter：热搜适配器
HistoryAdapter：历史搜索和搜索结果展示的适配器

三. 适配器代码

下面贴出热搜适配器HotAdapter代码：

/**
 * Title:热搜列表适配器
 * description:
 * autor:pei
 * created on 2020/9/19
 */
public class HotAdapter<T> extends RecyclerView.Adapter {

    protected Context mContext;
    protected View mLayoutView;
    protected List<T> mData;
    private int mCount;
    private OnItemClickListener mOnItemClickListener;

    public HotAdapter(Context context, List<T> data,int count) {
        this.mContext = context;
        this.mData = data;
        this.mCount=count;
    }

    public void setOnItemClickListener(OnItemClickListener listener){
        this.mOnItemClickListener=listener;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        mLayoutView = LayoutInflater.from(mContext).inflate(R.layout.adapter_item_hot, parent, false);
        ViewHolder viewHolder = new ViewHolder(mLayoutView);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        //设置高度
        //九宫格设置item高度[思路:(屏幕宽度-间隙*间隙个数)/item个数]
        int height = ScreenUtil.getWidth() / (mCount * 2);
        ViewGroup.LayoutParams params=((ViewHolder) holder).mTvName.getLayoutParams();
        params.height=height;
        ((ViewHolder) holder).mTvName.setLayoutParams(params);


        String name = mData.get(position).toString();
        ((ViewHolder) holder).mTvName.setText(name);

        //点击事件
        ((ViewHolder) holder).mTvName.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mOnItemClickListener!=null){
                    mOnItemClickListener.click(v,position);
                }
            }
        });
    }

    @Override
    public int getItemCount() {
        return mData == null ? 0 : mData.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {

        TextView mTvName;

        public ViewHolder(View view) {
            super(view);
            mTvName = (TextView) view.findViewById(R.id.tv_name);
        }
    }

    public interface OnItemClickListener{
        void click(View view,int position);
    }

}

HotAdapter对应布局adapter_item_hot.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<TextView 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:id="@+id/tv_name"
    style="@style/tv_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textSize="16sp"
    android:textColor="@color/black"
    android:background="@drawable/click_bg"/>

HistoryAdapter代码如下：

/**
 * Title:搜索历史适配器
 * description:
 * autor:pei
 * created on 2020/9/20
 */
public class HistoryAdapter<T> extends RecyclerView.Adapter {

    protected Context mContext;
    protected View mLayoutView;
    protected List<T> mData;
    private OnItemClickListener mOnItemClickListener;

    public HistoryAdapter(Context context, List<T> data) {
        this.mContext = context;
        this.mData = data;
    }

    public void setOnItemClickListener(OnItemClickListener listener) {
        this.mOnItemClickListener = listener;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        mLayoutView = LayoutInflater.from(mContext).inflate(R.layout.adapter_item_history, parent, false);
        ViewHolder viewHolder = new ViewHolder(mLayoutView);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        String name = mData.get(position).toString();
        ((ViewHolder) holder).mTvName.setText(name);

        //点击事件
        ((ViewHolder) holder).mTvName.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mOnItemClickListener != null) {
                    mOnItemClickListener.click(v, name);
                }
            }
        });
    }

    @Override
    public int getItemCount() {
        return mData == null ? 0 : mData.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {

        TextView mTvName;

        public ViewHolder(View view) {
            super(view);
            mTvName = (TextView) view.findViewById(R.id.tv_name);
        }
    }

    public interface OnItemClickListener {
        void click(View view, String item);
    }
}

HistoryAdapter对应布局adapter_item_history.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<TextView 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:id="@+id/tv_name"
    style="@style/tv_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="15dp"
    android:paddingBottom="15dp"
    android:paddingStart="10dp"
    android:paddingEnd="10dp"
    android:textSize="16sp"
    android:textColor="@color/black"
    android:background="@drawable/click_bg"/>

四. 涉及到的背景xml文件

其中会涉及到xml背景文件的问题，贴出主要的两个。
click_bg.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/color_e3e3e3" android:state_pressed="true" />
    <item android:drawable="@color/white" />
</selector>

search_bg.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#f4f4f4" />
    <corners android:radius="6dp" />
</shape>

五. 项目结构及效果图

项目结构图.png

效果图.gif

六. 在Activity中布局及代码

TempActivity对应布局activity_temp如下：