マテリアルデザインガイドラインのように見えるSearchViewを作成する


134

現在、アプリをマテリアルデザインに変換する方法を学習中ですが、今は少し行き詰まっています。ツールバーを追加し、ナビゲーションドロワーにすべてのコンテンツをオーバーレイしました。

私は現在、材料ガイドラインのような拡張可能な検索を作成しようとしています: ここに画像の説明を入力してください

これは私が今持っているものであり、上記のようにする方法を理解できません:
私の検索

これは私のメニューのxmlです。

<?xml version="1.0" encoding="utf-8"?>
<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:icon="@android:drawable/ic_menu_search"
        android:title="Search"
        app:showAsAction="always"
        app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

これで機能し、SearchViewに展開するメニュー項目が表示され、リストを細かくフィルター処理できます。1枚目の写真のようには見えませんが。ホームアイコンを戻る矢印に変更できるように

を使用しようとしMenuItemCompat.setOnActionExpandListener()ましたがR.id.action_search、うまくいきません。リスナーでは何も発生しません。それがうまくいったとしても、それでも最初の画像にあまり近づきません。

マテリアルガイドラインのように見える新しいappcompatツールバーでSearchViewを作成するにはどうすればよいですか?


6
app:showAsAction = "always | collapseActionView"
パブロス

あなたはここに私の答えを見てみたいことがありますstackoverflow.com/a/41013994/5326551
shnizlon

回答:


152

android.support.v7ライブラリを使用している場合、これは実際には非常に簡単です。

ステップ1

メニュー項目を宣言する

<item android:id="@+id/action_search"
    android:title="Search"
    android:icon="@drawable/abc_ic_search_api_mtrl_alpha"
    app:showAsAction="ifRoom|collapseActionView"
    app:actionViewClass="android.support.v7.widget.SearchView" />

ステップ2

SearchViewを拡張AppCompatActivityしてonCreateOptionsMenuセットアップします。

import android.support.v7.widget.SearchView;

...

public class YourActivity extends AppCompatActivity {

    ...

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_home, menu);
        // Retrieve the SearchView and plug it into SearchManager
        final SearchView searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.action_search));
        SearchManager searchManager = (SearchManager) getSystemService(SEARCH_SERVICE);
        searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
        return true;
    }

    ... 

}

結果

ここに画像の説明を入力してください

ここに画像の説明を入力してください


2
私はそれを賛成していましたが、どのエミュレータを使用していますか?試しましたが、navigate-backボタンではなく検索アイコンが表示されます。画面の左端からの距離は、Xアイコンと画面の右端の間の距離と同じではありません(私は持っていません)アクションオーバーフロー)。ここ質問を投稿しました。詳しく調べていただけますか?
Solace 2015

13
材料検索ではありません。アクションバーの通常の古い検索にすぎません
Gopal Singh Sirvi

2
私は自分のサブ質問に回答しました。検索ボタンをクリックせずに常に表示されるようにsearchView.setIconifiedByDefault(false);して、onCreateOptionsMenu関数に行を追加しました。
adelriosantiago 2015年

3
別の便利なヒント-検索ビューを最初に展開したい場合はapp:showAsAction="always"、それがないことを確認してくださいapp:showAsAction="ifRoom|collapseActionView"
Vinay W

1
また、このメソッドを使用すると、searchBarを展開しても、OverflowIconは表示されます(つまり、3つのドット)。ただし、一部のアプリでは、検索を完全に展開し、背景を白に変更して検索を処理します。GMailのように
Zen

83

これについて1週間困惑した後。私はそれを理解したと思います。
現在、ツールバー内のEditTextのみを使用しています。これはredditのoj88から提案されました。

私はこれを手に入れました:
新しいSearchView

最初に私のアクティビティのonCreate()の内部で、次のように、ツールバーの右側に画像ビューを持つEditTextを追加しました。

    // Setup search container view
    searchContainer = new LinearLayout(this);
    Toolbar.LayoutParams containerParams = new Toolbar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    containerParams.gravity = Gravity.CENTER_VERTICAL;
    searchContainer.setLayoutParams(containerParams);

    // Setup search view
    toolbarSearchView = new EditText(this);
    // Set width / height / gravity
    int[] textSizeAttr = new int[]{android.R.attr.actionBarSize};
    int indexOfAttrTextSize = 0;
    TypedArray a = obtainStyledAttributes(new TypedValue().data, textSizeAttr);
    int actionBarHeight = a.getDimensionPixelSize(indexOfAttrTextSize, -1);
    a.recycle();
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, actionBarHeight);
    params.gravity = Gravity.CENTER_VERTICAL;
    params.weight = 1;
    toolbarSearchView.setLayoutParams(params);

    // Setup display
    toolbarSearchView.setBackgroundColor(Color.TRANSPARENT);
    toolbarSearchView.setPadding(2, 0, 0, 0);
    toolbarSearchView.setTextColor(Color.WHITE);
    toolbarSearchView.setGravity(Gravity.CENTER_VERTICAL);
    toolbarSearchView.setSingleLine(true);
    toolbarSearchView.setImeActionLabel("Search", EditorInfo.IME_ACTION_UNSPECIFIED);
    toolbarSearchView.setHint("Search");
    toolbarSearchView.setHintTextColor(Color.parseColor("#b3ffffff"));
    try {
        // Set cursor colour to white
        // https://stackoverflow.com/a/26544231/1692770
        // https://github.com/android/platform_frameworks_base/blob/kitkat-release/core/java/android/widget/TextView.java#L562-564
        Field f = TextView.class.getDeclaredField("mCursorDrawableRes");
        f.setAccessible(true);
        f.set(toolbarSearchView, R.drawable.edittext_whitecursor);
    } catch (Exception ignored) {
    }

    // Search text changed listener
    toolbarSearchView.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            Fragment mainFragment = getFragmentManager().findFragmentById(R.id.container);
            if (mainFragment != null && mainFragment instanceof MainListFragment) {
                ((MainListFragment) mainFragment).search(s.toString());
            }
        }

        @Override
        public void afterTextChanged(Editable s) {
            // https://stackoverflow.com/a/6438918/1692770
            if (s.toString().length() <= 0) {
                toolbarSearchView.setHintTextColor(Color.parseColor("#b3ffffff"));
            }
        }
    });
    ((LinearLayout) searchContainer).addView(toolbarSearchView);

    // Setup the clear button
    searchClearButton = new ImageView(this);
    Resources r = getResources();
    int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, r.getDisplayMetrics());
    LinearLayout.LayoutParams clearParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    clearParams.gravity = Gravity.CENTER;
    searchClearButton.setLayoutParams(clearParams);
    searchClearButton.setImageResource(R.drawable.ic_close_white_24dp); // TODO: Get this image from here: https://github.com/google/material-design-icons
    searchClearButton.setPadding(px, 0, px, 0);
    searchClearButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            toolbarSearchView.setText("");
        }
    });
    ((LinearLayout) searchContainer).addView(searchClearButton);

    // Add search view to toolbar and hide it
    searchContainer.setVisibility(View.GONE);
    toolbar.addView(searchContainer);

これは機能しましたが、ホームボタンをタップしたときにonOptionsItemSelected()が呼び出されないという問題に遭遇しました。そのため、ホームボタンを押して検索をキャンセルすることができませんでした。ホームボタンにクリックリスナーを登録する方法をいくつか試しましたが、うまくいきませんでした。

結局、私が持っていたActionBarDrawerToggleが物事を妨害していることがわかったので、それを削除しました。このリスナーはそれから働き始めました:

    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // toolbarHomeButtonAnimating is a boolean that is initialized as false. It's used to stop the user pressing the home button while it is animating and breaking things.
            if (!toolbarHomeButtonAnimating) {
                // Here you'll want to check if you have a search query set, if you don't then hide the search box.
                // My main fragment handles this stuff, so I call its methods.
                FragmentManager fragmentManager = getFragmentManager();
                final Fragment fragment = fragmentManager.findFragmentById(R.id.container);
                if (fragment != null && fragment instanceof MainListFragment) {
                    if (((MainListFragment) fragment).hasSearchQuery() || searchContainer.getVisibility() == View.VISIBLE) {
                        displaySearchView(false);
                        return;
                    }
                }
            }

            if (mDrawerLayout.isDrawerOpen(findViewById(R.id.navigation_drawer)))
                mDrawerLayout.closeDrawer(findViewById(R.id.navigation_drawer));
            else
                mDrawerLayout.openDrawer(findViewById(R.id.navigation_drawer));
        }
    });

そのため、ホームボタンで検索をキャンセルできますが、戻るボタンを押してキャンセルすることはできません。だから私はこれをonBackPressed()に追加しました:

    FragmentManager fragmentManager = getFragmentManager();
    final Fragment mainFragment = fragmentManager.findFragmentById(R.id.container);
    if (mainFragment != null && mainFragment instanceof MainListFragment) {
        if (((MainListFragment) mainFragment).hasSearchQuery() || searchContainer.getVisibility() == View.VISIBLE) {
            displaySearchView(false);
            return;
        }
    }

EditTextとメニュー項目の表示を切り替えるために、このメソッドを作成しました。

public void displaySearchView(boolean visible) {
    if (visible) {
        // Stops user from being able to open drawer while searching
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);

        // Hide search button, display EditText
        menu.findItem(R.id.action_search).setVisible(false);
        searchContainer.setVisibility(View.VISIBLE);

        // Animate the home icon to the back arrow
        toggleActionBarIcon(ActionDrawableState.ARROW, mDrawerToggle, true);

        // Shift focus to the search EditText
        toolbarSearchView.requestFocus();

        // Pop up the soft keyboard
        new Handler().postDelayed(new Runnable() {
            public void run() {
                toolbarSearchView.dispatchTouchEvent(MotionEvent.obtain(SystemClock.uptimeMillis(), SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN, 0, 0, 0));
                toolbarSearchView.dispatchTouchEvent(MotionEvent.obtain(SystemClock.uptimeMillis(), SystemClock.uptimeMillis(), MotionEvent.ACTION_UP, 0, 0, 0));
            }
        }, 200);
    } else {
        // Allows user to open drawer again
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);

        // Hide the EditText and put the search button back on the Toolbar.
        // This sometimes fails when it isn't postDelayed(), don't know why.
        toolbarSearchView.postDelayed(new Runnable() {
            @Override
            public void run() {
                toolbarSearchView.setText("");
                searchContainer.setVisibility(View.GONE);
                menu.findItem(R.id.action_search).setVisible(true);
            }
        }, 200);

        // Turn the home button back into a drawer icon
        toggleActionBarIcon(ActionDrawableState.BURGER, mDrawerToggle, true);

        // Hide the keyboard because the search box has been hidden
        InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
        imm.hideSoftInputFromWindow(toolbarSearchView.getWindowToken(), 0);
    }
}

ツールバーのホームボタンを引き出しアイコンと戻るボタンの間で切り替える方法が必要でした。私は最終的にこのSOの答えで以下の方法を見つけました。私がより理解できるように少し修正しましたが、

private enum ActionDrawableState {
    BURGER, ARROW
}

/**
 * Modified version of this, https://stackoverflow.com/a/26836272/1692770<br>
 * I flipped the start offset around for the animations because it seemed like it was the wrong way around to me.<br>
 * I also added a listener to the animation so I can find out when the home button has finished rotating.
 */
private void toggleActionBarIcon(final ActionDrawableState state, final ActionBarDrawerToggle toggle, boolean animate) {
    if (animate) {
        float start = state == ActionDrawableState.BURGER ? 1.0f : 0f;
        float end = Math.abs(start - 1);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            ValueAnimator offsetAnimator = ValueAnimator.ofFloat(start, end);
            offsetAnimator.setDuration(300);
            offsetAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
            offsetAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    float offset = (Float) animation.getAnimatedValue();
                    toggle.onDrawerSlide(null, offset);
                }
            });
            offsetAnimator.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    toolbarHomeButtonAnimating = false;
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            });
            toolbarHomeButtonAnimating = true;
            offsetAnimator.start();
        }
    } else {
        if (state == ActionDrawableState.BURGER) {
            toggle.onDrawerClosed(null);
        } else {
            toggle.onDrawerOpened(null);
        }
    }
}

これでうまくいき、途中で見つけたいくつかのバグをなんとか解決できました。100%だとは思いませんが、十分に機能します。

編集:JavaではなくXMLで検索ビューを追加する場合は、次のようにします。

toolbar.xml:

<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    contentInsetLeft="72dp"
    contentInsetStart="72dp"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    app:contentInsetLeft="72dp"
    app:contentInsetStart="72dp"
    app:popupTheme="@style/ActionBarPopupThemeOverlay"
    app:theme="@style/ActionBarThemeOverlay">

    <LinearLayout
        android:id="@+id/search_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/search_view"
            android:layout_width="0dp"
            android:layout_height="?attr/actionBarSize"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:gravity="center_vertical"
            android:hint="Search"
            android:imeOptions="actionSearch"
            android:inputType="text"
            android:maxLines="1"
            android:paddingLeft="2dp"
            android:singleLine="true"
            android:textColor="#ffffff"
            android:textColorHint="#b3ffffff" />

        <ImageView
            android:id="@+id/search_clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:src="@drawable/ic_close_white_24dp" />
    </LinearLayout>
</android.support.v7.widget.Toolbar>

アクティビティのonCreate():

    searchContainer = findViewById(R.id.search_container);
    toolbarSearchView = (EditText) findViewById(R.id.search_view);
    searchClearButton = (ImageView) findViewById(R.id.search_clear);

    // Setup search container view
    try {
        // Set cursor colour to white
        // https://stackoverflow.com/a/26544231/1692770
        // https://github.com/android/platform_frameworks_base/blob/kitkat-release/core/java/android/widget/TextView.java#L562-564
        Field f = TextView.class.getDeclaredField("mCursorDrawableRes");
        f.setAccessible(true);
        f.set(toolbarSearchView, R.drawable.edittext_whitecursor);
    } catch (Exception ignored) {
    }

    // Search text changed listener
    toolbarSearchView.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            Fragment mainFragment = getFragmentManager().findFragmentById(R.id.container);
            if (mainFragment != null && mainFragment instanceof MainListFragment) {
                ((MainListFragment) mainFragment).search(s.toString());
            }
        }

        @Override
        public void afterTextChanged(Editable s) {
        }
    });

    // Clear search text when clear button is tapped
    searchClearButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            toolbarSearchView.setText("");
        }
    });

    // Hide the search view
    searchContainer.setVisibility(View.GONE);

素晴らしい作品、素晴らしい見た目、ありがとう!ただし、コードでレイアウトを作成する代わりに、XMLでEditTextとImageViewを使用してLinearLayoutを作成し、onCreateでそれを拡張しました。
2014

ええ、私はXMLでそれをやろうとしましたが、Android StudioはレイアウトXMLでオートコンプリートを提供しないので、私は何か間違っていると思っていました。
Mike

これに必要なそれぞれのXMLレイアウト設計でこの回答を更新していただけませんか?それは他を非常によく助けることができます。
Shreyash Mahajan

1
@マイク回答を更新して、完全なgithubソースコードを入力してください。
Hamed Ghadirian 2015

1
プロジェクト
全体


19

質問の最初のスクリーンショットは公開ウィジェットではありません。サポートSearchView(android.support.v7.widget.SearchView)は、Android 5.0 LollipopのSearchView(android.widget.SearchView)を模倣しています。2番目のスクリーンショットは、Google Playのような他のマテリアルデザインのアプリで使用されます。

最初のスクリーンショットのSearchViewは、ドライブ、YouTube、その他のクローズドソースのGoogle Appsで使用されています。幸い、Android 5.0 Dialerでも使用されています。ビューをバックポートすることもできますが、いくつかの5.0 APIを使用しています。

確認したいクラスは次のとおりです。

SearchEditTextLayoutAnimUtils、およびDialtactsActivityを使用して、ビューの使用方法を理解します。また、ContactsCommonからのリソースも必要です。

幸運を祈ります。


それを調べてくれてありがとう、私はそれを行うことができる何かがすでにそこにあったことを望んでいました。とりあえず、背景が透明なEditTextを使用しましたが、必要なものには問題ありません。
Mike

111
この答えは私にとって非常に不安です。なぜGoogleは独自のマテリアルデザインガイドラインに一致するプライベートウィジェットを使用し、それに対して私たちのためにくだらないウィジェットを公開するのですか?そして、すべての開発者は今、自分でこれに苦労していますか?これについて考えられる理由は何ですか?
グレッグエニス2015年

18

これが私の試みです:

ステップ1:というスタイルを作成する SearchViewStyle

<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
    <!-- Gets rid of the search icon -->
    <item name="searchIcon">@drawable/search</item>
    <!-- Gets rid of the "underline" in the text -->
    <item name="queryBackground">@null</item>
    <!-- Gets rid of the search icon when the SearchView is expanded -->
    <item name="searchHintIcon">@null</item>
    <!-- The hint text that appears when the user has not typed anything -->
    <item name="queryHint">@string/search_hint</item>
</style>

ステップ2:という名前のレイアウトを作成する simple_search_view_item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.SearchView
    android:layout_gravity="end"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    style="@style/SearchViewStyle"
    xmlns:android="http://schemas.android.com/apk/res/android" />  

手順3:この検索ビューのメニューアイテムを作成する

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        app:actionLayout="@layout/simple_search_view_item"
        android:title="@string/search"
        android:icon="@drawable/search"
        app:showAsAction="always" />
</menu>  

ステップ4:メニューを膨らませる

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu_searchable_activity, menu);
    return true;
}  

結果:

ここに画像の説明を入力してください

私ができなかった唯一のことは、それをの幅全体に埋め込むことでしたToolbar。誰かが私を助けることができれば、それは黄金になるでしょう。


1
I wasn't able to do was to make it fill the entire width、どのサポートライブラリバージョンを使用していますか?app:contentInsetStartWithNavigation="0dp"ツールバーの設定を試してください。
Mangesh 2016年

@LittleChild、マグネシュから与えられた解決策を試してください。それでも解決しない場合は、ツールバーの下の行を追加してみてください。app:contentInsetStartWithNavigation = "0dp" app:contentInsetLeft = "0dp" app:contentInsetStart = "0dp" app:paddingStart = "0dp" android:layout_marginLeft = "0dp" android:layout_marginStart = "0dp"
Shreyash Mahajan

SearchViewStyleの各行に説明を入力していただき、ありがとうございます。
シンタS

小さな子供は全体の幅については、次のようなSTHを行うことができます(」stackoverflow.com/questions/27946569/...
Ali_dev

10

SearchViewの望ましい外観を実現するには、スタイルを使用できます。

最初に、次のstyleようなSearchView を作成する必要があります。

<style name="CustomSearchView" parent="Widget.AppCompat.SearchView">
    <item name="searchIcon">@null</item>
    <item name="queryBackground">@null</item>
</style>

この記事の「SearchView」セクションにある属性の全リスト。

次に、ActionBarとして使用されるのを作成する必要がありstyleますToolbar

<style name="ToolbarSearchView" parent="Base.ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="searchViewStyle">@style/CustomSearchView</item>
</style>

最後に、ツールバーのテーマ属性を次のように更新する必要があります。

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:theme="@style/ToolbarSearchView" />

結果:

ここに画像の説明を入力してください

注:Toolbarテーマ属性を直接変更する必要があります。メインテーマのsearchViewStyle属性を更新するだけでは、には影響しませんToolbar


ねえ、あなたはそれらの追加でしたnavigate-back(矢印バック)及びcancelまたはそれらが自動的に追加された(x)のアイコンを自分で?
Solace 2015

1
@Solaceそれらは自動的に追加されます
Artem

SearchViewで検索クエリの作成を開始したときにのみ表示されますか、それとも何も記述しておらず、検索ヒントが表示されている場合でも表示されますか?私が質問を書き始めるまで私のものが表示されないので、私は尋ねています。したがって、この情報は私にとって非常に役立ちます
Solace

1
@Solace navigate-backは常に表示され、clear検索クエリを記述した後にのみ表示されます。
Artem 2015

6

目的の効果を得る別の方法は、このマテリアル検索ビューライブラリを使用することです。検索履歴を自動的に処理し、ビューに検索候補を提供することもできます。

サンプル:(ポルトガル語で表示されますが、英語とイタリア語でも動作します)。

サンプル

セットアップ

このlibを使用する前にMsvAuthoritybr.com.maukerパッケージ内で指定されたクラスをアプリモジュールに実装する必要があります。このクラスには、という静的なStringパブリック変数が必要CONTENT_AUTHORITYです。必要な値を指定し、マニフェストファイルに同じ名前を追加すること忘れないでください。libはこのファイルを使用して、コンテンツプロバイダーの権限を設定します。

例:

MsvAuthority.java

package br.com.mauker;

public class MsvAuthority {
    public static final String CONTENT_AUTHORITY = "br.com.mauker.materialsearchview.searchhistorydatabase";
}

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>

    <application ... >
        <provider
        android:name="br.com.mauker.materialsearchview.db.HistoryProvider"
        android:authorities="br.com.mauker.materialsearchview.searchhistorydatabase"
        android:exported="false"
        android:protectionLevel="signature"
        android:syncable="true"/>
    </application>

</manifest>

使用法

それを使用するには、依存関係を追加します。

compile 'br.com.mauker.materialsearchview:materialsearchview:1.2.0'

次に、Activityレイアウトファイルに以下を追加します。

<br.com.mauker.materialsearchview.MaterialSearchView
    android:id="@+id/search_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

その後、あなただけ取得する必要がありますMaterialSearchView使用して参照しgetViewById()て、それを開いたり、使用してそれを閉じMaterialSearchView#openSearch()MaterialSearchView#closeSearch()

PS:だけでなく、ビューを開いたり閉じたりすることが可能Toolbarです。このopenSearch()メソッドはButton、フローティングアクションボタンなど、基本的にすべてのから使用できます。

// Inside onCreate()
MaterialSearchView searchView = (MaterialSearchView) findViewById(R.id.search_view);
Button bt = (Button) findViewById(R.id.button);

bt.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            searchView.openSearch();
        }
    });

次のように、戻るボタンを使用してビューを閉じることもできます。

@Override
public void onBackPressed() {
    if (searchView.isOpen()) {
        // Close the search on the back button press.
        searchView.closeSearch();
    } else {
        super.onBackPressed();
    }
}

libの使用方法の詳細については、githubページを確認してください


2
優れたライブラリーであり、open / closeメソッドを抽象化して、MenuItemがそれを開閉する必要がないようにする優れたアイデアです。これをアプリで検索アイコン付きのFloatingActionButtonとともに使用することを計画しているので、うまく機能します。
AdamMc331

「検索」のような文字列のパラメータがないのはなぜですか?ライブラリは人々を文字列の英語版またはポルトガル語版のどちらかに制限しているようです:/
Aspiring Dev

ただし、READMEに記載されているように、スタイルを使用してヒント文字列を変更することは可能です。音声入力のヒントについては、後でリリースされます:github.com/Mauker1/MaterialSearchView/issues/23
Mauker

@rpgmaker最新の更新を確認してください。これらの文字列を変更できるようになりました。
Mauker 2016年

@Mauker android:imeOptions = "actionSearch"をコンポーネントのEditTextに設定する方法はありますか?(キーボードに「検索」ボタンを表示したい)
Greg

2

次のコードは、GmailのSearchViewと同じSearchViewを作成し、指定されたツールバーに追加します。独自の「ViewUtil.convertDpToPixel」メソッドを実装する必要があるだけです。

private SearchView createMaterialSearchView(Toolbar toolbar, String hintText) {

    setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setDisplayShowCustomEnabled(true);
    actionBar.setDisplayShowTitleEnabled(false);

    SearchView searchView = new SearchView(this);
    searchView.setIconifiedByDefault(false);
    searchView.setMaxWidth(Integer.MAX_VALUE);
    searchView.setMinimumHeight(Integer.MAX_VALUE);
    searchView.setQueryHint(hintText);

    int rightMarginFrame = 0;
    View frame = searchView.findViewById(getResources().getIdentifier("android:id/search_edit_frame", null, null));
    if (frame != null) {
        LinearLayout.LayoutParams frameParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        rightMarginFrame = ((LinearLayout.LayoutParams) frame.getLayoutParams()).rightMargin;
        frameParams.setMargins(0, 0, 0, 0);
        frame.setLayoutParams(frameParams);
    }

    View plate = searchView.findViewById(getResources().getIdentifier("android:id/search_plate", null, null));
    if (plate != null) {
        plate.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        plate.setPadding(0, 0, rightMarginFrame, 0);
        plate.setBackgroundColor(Color.TRANSPARENT);
    }

    int autoCompleteId = getResources().getIdentifier("android:id/search_src_text", null, null);
    if (searchView.findViewById(autoCompleteId) != null) {
        EditText autoComplete = (EditText) searchView.findViewById(autoCompleteId);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, (int) ViewUtil.convertDpToPixel(36));
        params.weight = 1;
        params.gravity = Gravity.CENTER_VERTICAL;
        params.leftMargin = rightMarginFrame;
        autoComplete.setLayoutParams(params);
        autoComplete.setTextSize(16f);
    }

    int searchMagId = getResources().getIdentifier("android:id/search_mag_icon", null, null);
    if (searchView.findViewById(searchMagId) != null) {
        ImageView v = (ImageView) searchView.findViewById(searchMagId);
        v.setImageDrawable(null);
        v.setPadding(0, 0, 0, 0);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        params.setMargins(0, 0, 0, 0);
        v.setLayoutParams(params);
    }

    toolbar.setTitle(null);
    toolbar.setContentInsetsAbsolute(0, 0);
    toolbar.addView(searchView);

    return searchView;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.