有人說(shuō)SearchView太僵硬了, 沒(méi)法定制, 這兩天查了下資料, 發(fā)現(xiàn)還是有些地方可以做做手腳的, 例如:

• 更改Search圖標(biāo)
• 更改輸入框樣式
• 更改提交按鈕樣式
• 監(jiān)聽(tīng)各類(lèi)事件等

我們來(lái)完成一個(gè)小例子, 加深認(rèn)識(shí). 國(guó)際慣例先放效果圖.

searchView_01.gif

用AS創(chuàng)建一個(gè)系統(tǒng)自帶的Scrolling Activity, 略做更改, 在其中增加一個(gè)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添加一個(gè)菜單.

 <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);

其中最后一句是將導(dǎo)航圖標(biāo)調(diào)出來(lái).

注入菜單操作:

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

其中initSearchView(menu)方法是關(guān)鍵, 我們來(lái)看下:

private void initSearchView(Menu menu) {
    searchView = (SearchView) menu.findItem(R.id.action_search).getActionView();
    //默認(rèn)設(shè)置, 設(shè)置搜索框圖標(biāo)化, 即收起搜索框(不展開(kāi))
    //searchView.setIconified(true);
    //設(shè)置搜索框直接展開(kāi)顯示。左側(cè)無(wú)放大鏡 右側(cè)有叉叉 可以關(guān)閉搜索框
    //searchView.setIconified(false);
    //設(shè)置搜索框直接展開(kāi)顯示。左側(cè)有放大鏡(在搜索框外) 右側(cè)無(wú)叉叉 有輸入內(nèi)容后有叉叉 不能關(guān)閉搜索框
    //searchView.setIconifiedByDefault(false);
    //設(shè)置搜索框直接展開(kāi)顯示。左側(cè)無(wú)放大鏡 右側(cè)無(wú)叉叉 有輸入內(nèi)容后有叉叉 不能關(guān)閉搜索框
    //searchView.onActionViewExpanded();

    //取得Search圖標(biāo), 可以更換自己喜歡的圖標(biāo)
    ImageView searchIccon = searchView.findViewById(R.id.search_button);
    //searchIccon.setImageDrawable(getDrawable(R.drawable.ic_youtube_searched_for_white_24dp));

    //設(shè)置是否顯示搜索框展開(kāi)時(shí)的提交按鈕, 可以給提交按鈕更換圖標(biāo), 默認(rèn)圖標(biāo)">"
    //searchView.setSubmitButtonEnabled(true);
    ImageView submitIcon = searchView.findViewById(R.id.search_go_btn);
    submitIcon.setImageDrawable(getDrawable(R.drawable.ic_search_white_24dp));

    //設(shè)置輸入框提示語(yǔ)
    searchView.setQueryHint("搜索標(biāo)題, 作者, 內(nèi)容關(guān)鍵字等");
    //設(shè)置搜索框展開(kāi)的最大寬度
    //searchView.setMaxWidth(500);

    //設(shè)置輸入框文字和提示文字的顏色和大小
    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);
    //設(shè)置輸入框的樣式, 這里設(shè)置了一個(gè)drawable資源, 下面會(huì)貼出來(lái)
    searchAutoCompleteText.setBackground(getDrawable(R.drawable.searchview_edit_bg));

    //搜索圖標(biāo)按鈕(打開(kāi)搜索框的按鈕)的點(diǎn)擊事件
    searchView.setOnSearchClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "Open", Toast.LENGTH_SHORT).show();
        }
    });

    //搜索框展開(kāi)時(shí)后面叉叉按鈕的點(diǎn)擊事件
    searchView.setOnCloseListener(new SearchView.OnCloseListener() {
            @Override
        public boolean onClose() {
            Toast.makeText(mContext, "Close", Toast.LENGTH_SHORT).show();
            return false;
        }
    });

    //搜索框文字變化監(jiān)聽(tīng)
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
        public boolean onQueryTextSubmit(String s) {
            Log.e(TAG, "TextSubmit : " + s);

            searchAutoCompleteText.setText("");
            searchView.setIconified(true); //收起搜索框, 會(huì)觸發(fā)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;
        }
    });
}

貼一個(gè)輸入框樣式:

 <?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

可以設(shè)置 NavigationIcon與SearchView聯(lián)動(dòng), 點(diǎn)擊"<-" 按鈕時(shí), 如果搜索框正在顯示中, 那就隱藏起來(lái), 如果不是顯示狀態(tài)就調(diào)用系統(tǒng)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();
    }
}

另外, 從系統(tǒng)源碼可以知道, 搜索輸入框是AutoCompleteTextView的子類(lèi), 可以為其設(shè)置適配器來(lái)實(shí)現(xiàn)文本補(bǔ)全功能. 具體方法待以后補(bǔ)充.