美文网首页
Android UI--SearchView的使用

Android UI--SearchView的使用

作者: 倾倒的吞天壶 | 来源:发表于2017-10-29 18:32 被阅读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

    相关文章

      网友评论

          本文标题:Android UI--SearchView的使用

          本文链接:https://www.haomeiwen.com/subject/udnypxtx.html