android - Android ActionBar 検索ビューのカスタマイズ

Question

--- 問題を解決 - 編集テキストに回答を追加 ---

ActionBarAndroid アプリで Sherlockを使用しています。そこで見せたいのはSearchView. 今のところ問題なく動作していますが、カスタマイズしようとすると何か間違っていることに気付きます。

私はこのように作成します：

searchView.setQueryHint("Search: ");
searchView.setOnQueryTextListener(this);
searchView.setOnCloseListener(...);

searchMenuItem = menu.add("Search place");
searchMenuItem.setIcon(R.drawable.ic_action_search)
              .setActionView(searchView)
              .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM |  MenuItem.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW);

私は2つのことをしたい：

表示されるテキストフィールドに表示される「検索」というテキストの色を変更します。テーマの全体的なテキストスタイルで変更したようですが、どうにかして別の色を設定できるといいのですが。
この検索ビューを開くと、アクションバーの左側に表示されます。しかし、私は右側にそれが必要です。アイコン (拡大鏡) は実際にはバーの右側にありますが、それを押すと左側に EditTextfield が開きます。LayoutParams を使用しようとしましたが、LayoutParams を使用してアクションバーに追加しようとすると、重要なものが不足しています。

ここに画像の説明を入力

うまくいけば、誰かが私を助けてくれるかもしれません。

どうもありがとう、トバイアス

- - 編集 - -

さて、これで1つのことが解決されました。ActionBar を XML で追加すると、TextEdit が右側になります。

getSupportMenuInflater().inflate(R.menu.activity_main, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView) searchItem.getActionView();
Log.e(TAG, "searchView: " + searchView);

そして私のmenu.xmlで

<item android:id="@+id/action_search"
 android:title="Search"
 android:icon="@drawable/ic_action_search"          
 android:showAsAction="always"
 android:actionViewClass="com.actionbarsherlock.widget.SearchView" />

これで、少なくとも 1 つの謎が解決しました (なぜこれが違いを生んだのか)。しかし、新しく作成された XML は呼び出し時にもう閉じません

searchMenuItem.collapseActionView();

ですから、まだ何か問題があります。

--- 編集 2 ---

お知らせするだけです。テキストの色の解決策を見つけました。これは、SearchView の AutoCompleteTextView を使用して実現できます。

AutoCompleteTextView searchText = (AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
searchText.setHintTextColor(getResources().getColor(R.color.white));
searchText.setTextColor(getResources().getColor(R.color.white));

したがって、私が抱えている最後の問題は、テキストを送信するときに SearchView が閉じられなくなったことです。したがって collapseActionView() などは機能しません。何か案は？

--- 編集 3 ---

さて、私は解決策を見つけました。これが正しい方法かどうかはわかりませんが、使用する場合

((SearchView) searchMenuItem.getActionView()).setIconified(true);

それはEditText

最初は入力テキストを「削除」して「ヒント」を表示するのに対し、2回目はヒントEditTextを「閉じ」、searchViewを拡大鏡に折りたたむため、2回行う必要があります。不器用なスタイルですが、うまくいきます。:-)

score 29 · Accepted Answer

ネイティブの SearchView Android ウィジェットを簡単にフォーマットするために、クラスSearchViewFormatterを作成しました。例：

new SearchViewFormatter()
            .setSearchBackGroundResource(R.drawable.my_bg)
            .setSearchIconResource(R.drawable.my_ic, true, false) //true to icon inside edittext, false to outside
            .setSearchVoiceIconResource(R.drawable.my_ic)
            .setSearchTextColorResource(R.color.my_color)
            .setSearchHintColorResource(R.color.my_color)
            .setSearchCloseIconResource(R.drawable.my_ic)
            .setInputType(InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS)
            .format(mSearchView);

score 15 · Accepted Answer

参考までに、ActionBar サポート v7 appcompat により、クエリヒントの色、テキストの色、テキストサイズを変更できます。

import android.support.v4.view.MenuItemCompat;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.SearchView.SearchAutoComplete;

...

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_home, menu);
    MenuItem searchItem = menu.findItem(R.id.item_search);
    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    mSearchView.setOnQueryTextListener(this);
    mSearchView.setQueryHint(getString(R.string.text));
    SearchAutoComplete searchAutoComplete = (SearchAutoComplete) mSearchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    searchAutoComplete.setHintTextColor(mRes.getColor(android.R.color.white));
    searchAutoComplete.setTextSize(14);

    return super.onCreateOptionsMenu(menu);
}

score 6 · Accepted Answer

このように編集テキストの角を丸くしました。

int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
        View searchPlate = searchView.findViewById(searchPlateId);
        searchPlate.setBackgroundResource(R.drawable.bg_white_rounded);

        int searchSrcTextId = getResources().getIdentifier("android:id/search_src_text", null, null);
        EditText searchEditText = (EditText) searchView.findViewById(searchSrcTextId);
        searchEditText.setTextColor(Color.BLACK);
        searchEditText.setHintTextColor(Color.LTGRAY);

        int closeButtonId = searchView.getContext().getResources().getIdentifier("android:id/search_close_btn", null, null);
        ImageView closeButtonImage = (ImageView) searchView.findViewById(closeButtonId);
        closeButtonImage.setColorFilter(ContextCompat.getColor(MainActivity.this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN);

bg_white_background.xml:

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

<SearchView
                android:id="@+id/searchView"
                android:layout_width="match_parent"
                android:queryHint="Serach"
                android:layout_height="match_parent"></SearchView>

score 1 · Accepted Answer

2番目の質問を解決するには

この行を変更します。

.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM |  MenuItem.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW);

に：

.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);

メソッドでSHOW_AS_ACTION_IF_ROOMパラメーターのみを使用するsetShowAsAction()

android - Android ActionBar 検索ビューのカスタマイズ

4 に答える 4

Related

Reference