如何在 Google Play Store 应用中设置 Android SearchView 的样式? [英] How to style Android SearchView like in Google Play Store app?

问题描述

我正在尝试在 toolbar 中设置 SearchView 的样式，使其外观/行为类似于 Google Play 商店应用中的 SearchView.它似乎将搜索视图包装在卡片视图中，但它似乎也集成了向上按钮/抽屉切换行为.

这是主要的活动 searchView，它集成了抽屉切换

当您单击它时，抽屉切换变为箭头(单击时将从搜索视图中移除焦点)

当您点击商店中的应用程序时，您会转到应用程序详细信息页面，您会看到搜索视图的图标化版本，作为带有向上按钮的折叠操作项:

最后，如果您点击搜索图标，它会展开为一个操作项(带有一种波纹动画)并一直显示在屏幕上，并包含向上按钮:

当我尝试自己做时，我遇到了很多问题.我试图将搜索视图包装在卡片视图中并将其放在工具栏中.它可以工作，但左侧总是有我无法删除的填充(我尝试了 contentInsetStart，不起作用):

我还尝试删除工具栏并仅将其替换为 FrameLayout.这允许我控制填充，但显然我失去了工具栏功能(向上按钮等)并且还引入了主题问题(图标和文本消失).
有人知道他们是如何做到这一点的吗?我不想添加另一个库只是为了对框架中已经存在的小部件进行样式设置.谢谢！
解决方案
你可以尝试深入研究这个项目:
https://android.googlesource.com/platform/packages/apps/Dialer/
对于 Lollipop 或 Marshmallow，或 N 它有一个 SearchEditTextLayout 这就是你需要的:
优势
由 Google 而非第三方制作的代码.
I am trying to style a SearchView in a toolbar to look / behave like the SearchView in the Google Play Store app.  It seems to wrap the searchview in a cardview but it also seems to integrate up button / drawer toggle behavior.

This is the main activity searchView, it has integrated drawer toggle



when you click on it, the drawer toggle changes to arrow (that when clicked will remove focus from the search view)



When you click on an app in the store, you go to app detail page and you have what looks like iconified version of the search view as a collapsed action item with up button:



Finally if you click on search icon it expands as an action item (with a kind of ripple animation) and displays all the way across the screen and incorporates the up button:



When I try to do it myself I have a lot of problems.  I tried to wrap the searchview in a cardview and put that in a toolbar.  It works but there is always padding on the left side that I can't remove (I tried contentInsetStart, doesn't work):
<android.support.v7.widget.Toolbar
    android:id="@+id/activityCatalogToolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:contentInsetStart="0dp"
    app:contentInsetLeft="0dp">

    <android.support.v7.widget.CardView
        android:id="@+id/activityCatalogSearchContainer"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="end"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        app:cardCornerRadius="4dp"
        app:cardElevation="8dp">

        <android.support.v7.widget.SearchView
            android:id="@+id/activityCatalogSearch"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:queryHint=""
            android:iconifiedByDefault="false"/>

    </android.support.v7.widget.CardView>

</android.support.v7.widget.Toolbar>


I have also tried to remove the toolbar and replace it with just a FrameLayout.  This allows me to control the padding but obviously I lose the toolbar functionalities (up button, etc) and also introduces theming problems (icons and text disappear).

Does anyone have an idea how they are doing this?  I don't want to add another library just to style widgets that already exist in the framework.  Thanks!
解决方案
You might try to deep dive into this project:

https://android.googlesource.com/platform/packages/apps/Dialer/

For Lollipop or Marshmallow, or N it has a SearchEditTextLayout which is what you need:

Advantage


a code made by Google, not third party.


                        
这篇关于如何在 Google Play Store 应用中设置 Android SearchView 的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！