Android UI--SearchView的使用

2017-10-29  本文已影响14人  倾倒的吞天壶

1. 基本使用

1) 嵌入在菜单文件中

把searchView嵌入在菜单文件中是一种常见的操作方式。
首先,你需要在资源文件夹下的菜单文件夹中新建菜单文件,在其中添加菜单项,并在菜单项中嵌入searchView。如果你使用的是支持库的话,那你在申明控件属性时要使用支持库的命名空间。比如:

<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:title="@string/action_search"
          app:actionViewClass="android.support.v7.widget.SearchView"
          app:showAsAction="always"/>

</menu>

然后在你的fragment或者activity中添加菜单文件,从中你就可以得到searchView控件了。可以为searchView控件添加一个监听事件,用于监听searchView输入框中的用户输入信息。比如:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);

    final MenuItem searchItem = menu.findItem(R.id.action_search);
    final SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    searchView.setOnQueryTextListener(this);

    return true;
}

@Override
public boolean onQueryTextChange(String query) {
    // Here is where we are going to implement the filter logic
    return false;
}

@Override
public boolean onQueryTextSubmit(String query) {
    return false;
}

2) 嵌入在布局文件中

把searchView嵌入在布局文件中是另一种设置方式,这样做的好处是:既可以在XML文件中通过控件属性静态操作,也可以在代码中动态设置,比如:

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="8dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_search"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <android.support.v7.widget.SearchView
                android:id="@+id/search_view"
                app:iconifiedByDefault="false"
                app:queryHint="@string/search_hint"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                </android.support.v7.widget.SearchView>

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

然后你可以在代码中find到searchView控件,再添加监听事件等等,就不再赘述了。
到目前为止,你的searchView已经ready啦,下面需要添加一些逻辑来完成用户交互,这些逻辑将在onQueryTextChange()方法中完成。
</br>

searchView的搜索功能添加

searchView一般和列表控件(RecyclerView、ListView)一起完成搜索过滤的功能,所以我们在布局文件中添加一个RecyclerView控件,如下:

    <android.support.v7.widget.RecyclerView
        android:fadeScrollbars="false"    //右侧的滑动标识始终显示
        android:scrollbarThumbVertical="@color/colorPrimary"    //指定滑动块的颜色
        android:scrollbarSize="2dp"    //指定滑动块的宽度
        android:scrollbars="vertical"    //指定滑动块的类型
        android:id="@+id/rv_search_quote_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>

这里我们只实现一个简单的搜索逻辑:item中只要包含用户的输入的信息就让它显示,在RecyclerView的Adapter中写一个filter方法:

    public void filter(String text) {
        mData.clear();    //先把原始数据集清空,别急我们已经在mDataCopy中备份了
        if (text.isEmpty()) {
            mData.addAll(mDataCopy);    //当用户还没有输入,或者清空输入时,显示全部列表项
        } else {
            text = text.toLowerCase();
            for (String data : mDataOriginal) {
                if (data.contains(text)) {
                    mData.add(searchEntity);    //只要源数据包含用户输入,就把它添加到数据集中
                }
            }
        }
        notifyDataSetChanged();    //完成搜索后通知RecyclerView刷新
    }

然后为searchView添加一个查询用户输入的监听事件:OnQueryTextListener,在其方法onQueryTextChange中调用filter方法完成搜索匹配:

    @Override
    public boolean onQueryTextChange(String newText) {
        mSearchAdapter.filter(newText);
        return true;
    }

到这里为止就结合searchView完成了一个简单的搜索匹配功能。

2. github

上一篇 下一篇

猜你喜欢

热点阅读