web-dev-qa-db-ja.com

Android SearchViewのカスタマイズ

Androidを初めて使用しましたが、シンプルだと思われますが、困惑しました。アクションバー/ツールバーではなく、RelativelayoutでカスタムsearchViewを作成する必要があります。問題背景、テキスト入力の色、XMLの検索アイコンの色、またはそれらの属性だけをカスタマイズするのが難しいことはわかりません。現在のところ、私の携帯電話では、コードを表示できません。私はそれをカスタマイズできますか？多分私がフォローできるチュートリアルを見せてくれますか？事前にありがとう!!!!

androidandroid-layoutandroid-search
5
user5807086

私がここで与えた私の答えを見て、独自のSearchBarをスタイルすることをお勧めします。

理由はわかりませんが、Googleのデフォルトの検索バーのスタイルを設定できなかったため、独自の検索バーを作成する必要がありました。

これが私がやった方法です：

Android（min21） =のスタイリング検索ビュー

InstantSearchアルゴリズムを実装したい場合は、この素晴らしい作者と彼のプロジェクトに従ってください（承認された回答を見てください）。

RecyclerViewをSearchViewでフィルタリングする方法

さらにサポートが必要な場合は、コメントを残してください。回答が私の回答にも賛成した場合：P

[〜＃〜] update [〜＃〜]：これは、Googleの検索ビューの実装であり、詳細情報を提供します： https ：//developer.Android.com/guide/topics/search/search-dialog.html

ごきげんよう ：）

2
Cesarsk

このコードをRelativeLayoutに追加します-

<Android.support.v7.widget.SearchView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@color/colorAsh"
        Android:backgroundTint="@color/colorAsh"
        Android:searchIcon="@drawable/ic_search"
        Android:commitIcon="@drawable/ic_commit"
        Android:searchHintIcon="@drawable/ic_search" 
        Android:closeIcon="@drawable/ic_close" 
        Android:goIcon="@drawable/ic_go">

    </Android.support.v7.widget.SearchView>

これらのアイコンを変更することを忘れないでください。

そして、 SearchView に従って、SearchViewの各オプションを確認します。

6
AGM Tazim

独自の検索ビューを実行するだけで、非常に簡単です。

custom_searchview.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="horizontal" Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:paddingLeft="8dp"
    Android:paddingRight="8dp"
    Android:paddingTop="4dp"
    Android:paddingBottom="4dp"
    Android:gravity="center_vertical">

    <ImageView
        Android:layout_width="20dp"
        Android:layout_height="20dp"
        Android:adjustViewBounds="true"
        Android:src="@drawable/ic_search_white"/>

    <EditText
        Android:id="@+id/edt_search_text"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"
        Android:inputType="text"
        Android:imeOptions="actionSearch"
        Android:hint="@string/by_name"
        Android:paddingLeft="8dp"
        Android:paddingRight="8dp"
        Android:lines="1"
        Android:textColorHint="@color/colorTextGrey"
        Android:textColor="@color/white"
        Android:textSize="14sp"
        Android:background="@Android:color/transparent"/>

    <ImageView
        Android:id="@+id/iv_clear_text"
        Android:layout_width="25dp"
        Android:layout_height="25dp"
        Android:adjustViewBounds="true"
        Android:visibility="gone"
        Android:src="@drawable/ic_clear"/>

</LinearLayout>

次に、このレイアウトをアクティビティレイアウトファイルに含めることができます。これは、「検索アイコン」、「EditText」、「クリアアイコン」の順に並んだシンプルなレイアウトです。クリアアイコンは、ユーザーがテキストを入力した後に表示されます。

次に、アクティビティで、ユーザーがキーボードの検索をクリックしたときにリッスンし、ユーザーがテキストを入力して「クリアアイコン」を表示したときにリッスンする必要があります

    /*search btn clicked*/
    edtSearchText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
        @Override
        public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
            if (actionId == EditorInfo.IME_ACTION_SEARCH) {
                performSearch();
                return true;
            }
            return false;
        }
    });

    /*hide/show clear button in search view*/
    edtSearchText.addTextChangedListener(searchViewTextWatcher);


TextWatcher searchViewTextWatcher = new TextWatcher() {

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {

        if(s.toString().trim().length()==0){
            ivClearText.setVisibility(View.GONE);
        } else {
            ivClearText.setVisibility(View.VISIBLE);
        }


    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count,
                                  int after) {
        // TODO Auto-generated method stub

    }

    @Override
    public void afterTextChanged(Editable s) {
        // TODO Auto-generated method stub

    }
};
2
Mikhail Kim