创建看起来像材料设计准则的SearchView


134

我目前正在学习如何将我的应用程序转换为Material design,并且现在有点卡住了。我添加了工具栏,并在导航抽屉中覆盖了所有内容。

我现在正在尝试创建一个类似于材料指南中的可扩展搜索: 在此处输入图片说明

这是我现在所能获得的,我不知道如何像上面这样进行:
我的搜寻

这是我的菜单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,并且可以很好地过滤列表。虽然看起来与第一张图片不一样。

我尝试使用MenuItemCompat.setOnActionExpandListener()R.id.action_search所以可以将主页图标更改为后退箭头,但这似乎不起作用。监听器中没有任何内容。即使这样行​​得通,它也不会非常接近第一张图片。

如何在新的appcompat工具栏中创建类似于材料指南的SearchView?


6
app:showAsAction =“ always | collapseActionView”
Pavlos

您可能想在这里看看我的答案:stackoverflow.com/a/41013994/5326551
shnizlon

Answers:


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步

扩展AppCompatActivityonCreateOptionsMenu设置SearchView。

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图标和屏幕右边缘之间的距离不同(我没有动作溢出)。在这里发布问题,您可以调查一下吗?
安慰

13
它不是物质搜索。这只是操作栏中通常的旧搜索
Gopal Singh Sirvi

2
我回答了我自己的子问题,以使其始终可见,而无需单击搜索按钮,将行添加searchView.setIconifiedByDefault(false);onCreateOptionsMenu函数中。
adelriosantiago

3
另一个有用的花絮-如果您希望最初扩展搜索视图,请确保您具有app:showAsAction="always"且不app:showAsAction="ifRoom|collapseActionView"
Vinay W

1
同样,使用此方法,即使将searchBar展开,OverflowIcon仍然可见(即3点)。但是某些应用程序可以通过完全展开搜索并将背景更改为白色来处理搜索。如Gmail

83

经过一个星期的困惑。我想我已经知道了。
我现在仅在工具栏内使用EditText。这是oj88在reddit上向我建议的。

我现在有了这个:
新的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%,但对我来说效果很好。

编辑:如果要以XML而不是Java添加搜索视图,请执行以下操作:

工具栏.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>

您的Activity的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中对其进行了膨胀。
aluxian 2014年

是的,我尝试使用XML进行此操作,但我认为我做错了,因为Android Studio不会为我提供布局XML的自动填充功能。
2014年

您可以使用为此所需的相应XML布局设计来更新此答案吗?可以很好地帮助其他人。
Shreyash Mahajan 2015年

1
@Mike您能否更新您的答案并放入完整的github源代码?
Hamed Ghadirian 2015年

1
请在github上发布完整的项目
Nilabja 2015年


19

您问题中的第一个屏幕截图不是公共窗口小部件。支持SearchView(android.support.v7.widget.SearchView)模仿了Android 5.0 Lollipop的SearchView(android.widget.SearchView)。您的第二张屏幕截图已被其他材料设计的应用(例如Google Play)使用。

第一个屏幕截图中的SearchView在云端硬盘,YouTube和其他封闭源Google Apps中使用。幸运的是,它也在Android 5.0 Dialer中使用。您可以尝试向后移植视图,但是它使用了一些5.0 API。

您将要查看的类是:

SearchEditTextLayoutAnimUtilsDialtactsActivity了解如何使用视图。您还将需要ContactsCommon的资源。

祝你好运。


感谢您对此的调查,我希望已经有一些可以做到的事情。现在,我只使用了具有透明背景的EditText,看来可以满足我的需要。
2014年

111
这个答案令我非常不安。Google为什么要使用恰好与自己的材料设计指南相匹配的私有小部件,然后为我们发布一个不适合的小部件?现在每个开发人员都在为此苦苦挣扎吗?有什么可能的原因呢?
格雷格·恩尼斯

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

@LittleChild,尝试Magnesh提供的解决方案。如果仍然无法解决,请尝试在工具栏中添加以下行。app:contentInsetStartWithNavigation =“ 0dp” app:contentInsetLeft =“ 0dp” app:contentInsetStart =“ 0dp” app:paddingStart =“ 0dp” android:layout_marginLeft =“ 0dp” android:layout_marginStart =“ 0dp”
Shreyash Mahajan

感谢您为SearchViewStyle中的每一行添加解释!
Shinta S

小孩子(”:对于整个宽度,你可以做某事像这样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>

属性的整个列表,你可以找到在文章中,“搜索查看”部分。

其次,您需要style为您创建一个Toolbar,用作ActionBar:

<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)还是被自动添加?
安慰

1
@Solace它们是自动添加的
Artem

它们是否仅在您开始在SearchView中编写搜索查询时才出现,或者即使您没有编写任何内容并且可见搜索提示时它们仍在那儿?我问是因为我直到开始编写查询时才出现。因此,此信息对我非常有用
Solace 2015年

1
@Solace navigate-back始终显示,clear仅在您编写了一些搜索查询后才显示。
Artem

6

达到预期效果的另一种方法是使用此材料搜索视图库。它会自动处理搜索历史记录,并且还可以向视图提供搜索建议。

示例:(以葡萄牙语显示,但也可以英语和意大利语使用)。

样品

建立

在使用此lib之前,您必须在您的应用模块上MsvAuthoritybr.com.mauker包中实现一个名为的类,并且该类应具有一个名为的公共静态String变量CONTENT_AUTHORITY。给它提供所需的值,不要忘记在清单文件中添加相同的名称。该库将使用此文件来设置内容提供者权限。

例:

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,例如Floating Action 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
优秀的库,并且是抽象打开/关闭方法的好主意,因此不需要MenuItem来打开/关闭它,我计划在我的应用程序中将其与带有搜索图标的FloatingActionButton一起使用,因此它将很好地工作。
AdamMc331 '16

为什么没有诸如“搜索”之类的字符串的参数?似乎图书馆将人们限制为英语或葡萄牙语版本的字符串:/
Aspiring Dev

但是可以使用自述文件中所述的样式来更改提示字符串。至于语音输入提示,它将在稍后发布:github.com/Mauker1/MaterialSearchView/issues/23
Mauker

@rpgmaker检查最新更新,现在可以更改这些字符串。
莫克

@Mauker知道如何将android:imeOptions =“ actionSearch”设置为组件的EditText吗?(我想在键盘上显示一个“搜索”按钮)
Greg

2

下面将创建与Gmail中相同的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;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.