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

查看:318
本文介绍了如何在Google Play商店应用中设置Android SearchView的样式?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我尝试在工具栏中设置 SearchView 的外观/行为与 SearchView Google Play商店应用中。它似乎将cardview包装在cardview中,但它似乎也集成了按钮/抽屉切换行为。

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





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





当您点击商店中的某个应用程序时,您会转至应用程序详细信息页面,并将搜索视图的图标化版本显示为具有向上按钮的折叠操作项目:





当我尝试自己做这件事时,我遇到了很多问题。我试图在cardview中包装searchview并将其放入工具栏中。它的作品,但总是有填充左侧,我不能删除(我试过contentInsetStart,不起作用):

 < 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>



我也尝试删除工具栏,并用一个FrameLayout替换它。这允许我控制填充,但显然我失去了工具栏功能(向上按钮等),还引入了主题问题(图标和文本消失)。

有人有一个想法他们如何做到这一点?我不想添加另一个库只是为了在框架中已经存在的样式。感谢!

解决方案

您可能会尝试深入探索此项目:

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



对于棒棒糖或棉花糖,或N它有一个 SearchEditTextLayout 这就是你需要的:

优势


  • 不是第三方。


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商店应用中设置Android SearchView的样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆