SearchView补充

有人说SearchView太僵硬了, 没法定制, 这两天查了下资料, 发现还是有些地方可以做做手脚的, 例如:

• 更改Search图标
• 更改输入框样式
• 更改提交按钮样式
• 监听各类事件等

我们来完成一个小例子, 加深认识. 国际惯例先放效果图.

searchView_01.gif

用AS创建一个系统自带的Scrolling Activity, 略做更改, 在其中增加一个ImageView控件.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout  
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.truly.scrolldemo.MainActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/darkbg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />

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

给Toolbar添加一个菜单.

 <menu 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"
    tools:context="com.truly.scrolldemo.MainActivity">
    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        android:title="@string/action_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

initToolbar方法:

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

其中最后一句是将导航图标调出来.

注入菜单操作:

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

其中initSearchView(menu)方法是关键, 我们来看下:

private void initSearchView(Menu menu) {
    searchView = (SearchView) menu.findItem(R.id.action_search).getActionView();
    //默认设置, 设置搜索框图标化, 即收起搜索框(不展开)
    //searchView.setIconified(true);
    //设置搜索框直接展开显示。左侧无放大镜 右侧有叉叉 可以关闭搜索框
    //searchView.setIconified(false);
    //设置搜索框直接展开显示。左侧有放大镜(在搜索框外) 右侧无叉叉 有输入内容后有叉叉 不能关闭搜索框
    //searchView.setIconifiedByDefault(false);
    //设置搜索框直接展开显示。左侧无放大镜 右侧无叉叉 有输入内容后有叉叉 不能关闭搜索框
    //searchView.onActionViewExpanded();

    //取得Search图标, 可以更换自己喜欢的图标
    ImageView searchIccon = searchView.findViewById(R.id.search_button);
    //searchIccon.setImageDrawable(getDrawable(R.drawable.ic_youtube_searched_for_white_24dp));

    //设置是否显示搜索框展开时的提交按钮, 可以给提交按钮更换图标, 默认图标">"
    //searchView.setSubmitButtonEnabled(true);
    ImageView submitIcon = searchView.findViewById(R.id.search_go_btn);
    submitIcon.setImageDrawable(getDrawable(R.drawable.ic_search_white_24dp));

    //设置输入框提示语
    searchView.setQueryHint("搜索标题, 作者, 内容关键字等");
    //设置搜索框展开的最大宽度
    //searchView.setMaxWidth(500);

    //设置输入框文字和提示文字的颜色和大小
    searchAutoCompleteText = searchView.findViewById(R.id.search_src_text);
    //searchAutoCompleteText.setHintTextColor(getResources().getColor(android.R.color.darker_gray));
    //searchAutoCompleteText.setTextColor(getResources().getColor(android.R.color.white));
    searchAutoCompleteText.setTextSize(14);
    //设置输入框的样式, 这里设置了一个drawable资源, 下面会贴出来
    searchAutoCompleteText.setBackground(getDrawable(R.drawable.searchview_edit_bg));

    //搜索图标按钮(打开搜索框的按钮)的点击事件
    searchView.setOnSearchClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "Open", Toast.LENGTH_SHORT).show();
        }
    });

    //搜索框展开时后面叉叉按钮的点击事件
    searchView.setOnCloseListener(new SearchView.OnCloseListener() {
            @Override
        public boolean onClose() {
            Toast.makeText(mContext, "Close", Toast.LENGTH_SHORT).show();
            return false;
        }
    });

    //搜索框文字变化监听
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
        public boolean onQueryTextSubmit(String s) {
            Log.e(TAG, "TextSubmit : " + s);

            searchAutoCompleteText.setText("");
            searchView.setIconified(true); //收起搜索框, 会触发onCloseClick事件
            Toast.makeText(mContext, "TextSubmit : " + s, Toast.LENGTH_SHORT).show();

            return true;
        }

            @Override
        public boolean onQueryTextChange(String s) {
            Log.e(TAG, "TextChange --> " + s);
            return false;
        }
    });
}

贴一个输入框样式:

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_window_focused="true">
        <shape>
            <corners android:radius="18dp"/>
            <solid android:color="@color/halfTransparent"/><!--半透明 -->
        </shape>
    </item>
<item>
    <shape>
        <corners android:radius="18dp"/>
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>
</selector>

效果如下:

image.png

可以设置 NavigationIcon与SearchView联动, 点击"<-" 按钮时, 如果搜索框正在显示中, 那就隐藏起来, 如果不是显示状态就调用系统onBackPressed()方法.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case android.R.id.home:
            this.onBackPressed();
            break;
        case R.id.action_settings:
            break;
    }
    return super.onOptionsItemSelected(item);
}

@Override
public void onBackPressed() {
    if (searchAutoCompleteText.isShown()) {
        searchAutoCompleteText.setText("");
        searchView.setIconified(true);
    } else {
        super.onBackPressed();
    }
}

另外, 从系统源码可以知道, 搜索输入框是AutoCompleteTextView的子类, 可以为其设置适配器来实现文本补全功能. 具体方法待以后补充.