如何在Google Play商店应用中设置Android SearchView的样式? [英] How to style Android SearchView like in Google Play Store app?
问题描述
我尝试在工具栏
中设置 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屋!