[英]Android ActionBar: collapsible SearchView with action button
How to build ActionBar
with collapsible search view with single action item visible, when search view is expanded? 在展开搜索视图时,如何使用可折叠搜索视图构建
ActionBar
,并且单个操作项可见? To be more descriptive, this is what I need: 为了更具描述性,这就是我需要的:
Note that there are other menu items and
android:uiOptions="splitActionBarWhenNarrow"
is defined in AndroidManifest.xml
. 请注意,还有其他菜单项和
android:uiOptions="splitActionBarWhenNarrow"
在AndroidManifest.xml
定义。
I tried to set up custom search item layout: 我尝试设置自定义搜索项目布局:
menu.xml
menu.xml文件
<item
android:id="@+id/menu_search"
android:actionLayout="@layout/actionbar_search"
android:icon="@drawable/action_search"
android:showAsAction="always|collapseActionView"
android:title="@string/search" />
actionbar_search.xml
actionbar_search.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="horizontal" >
<com.actionbarsherlock.widget.SearchView
android:id="@+id/search_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:iconifiedByDefault="false"
android:queryHint="@string/search_hint" />
<ImageButton
android:id="@+id/add_item"
android:layout_width="wrap_content"
android:layout_height="match_parent"
style="@style/Widget.Sherlock.ActionButton"
android:src="@drawable/content_new"/>
</LinearLayout>
But by default search view takes all available width and button is not visible. 但默认情况下,搜索视图会占用所有可用宽度,而按钮则不可见。 I don't know how to force
SearchView
to fill all available space between app icon and menu item. 我不知道如何强制
SearchView
填充应用程序图标和菜单项之间的所有可用空间。 All I found is android:maxWidth
property, but this only allows to hardcoded dimension, and I'm looking for some more flexible solution. 我发现只有
android:maxWidth
属性,但这只允许硬编码维度,我正在寻找一些更灵活的解决方案。 I tried also RelativeLayout
with android:layout_toRightOf="@id/search_view"
with no luck. 我还试用了
RelativeLayout
和android:layout_toRightOf="@id/search_view"
没有运气。
After considering the suggestions from comments, many googling and testing succeeded in obtaining the desired effect. 在考虑了评论中的建议后,许多谷歌搜索和测试成功地获得了预期的效果。 I'm not proud of this solution but it works, it's not too complicated and should be enough for this case.
我并不为这个解决方案感到骄傲,但它有效,它不是太复杂,应该足够这个案例。
In resume what I did: 在简历中我做了什么:
SearchView
with custom "add item" button in customView
of ActionBar
. ActionBar
customView
中使用自定义“添加项目”按钮放置SearchView
。 collapseActionView
and android:actionLayout
from search item in menu.xml
android:actionLayout
的搜索项中删除了collapseActionView
和android:actionLayout
menu.xml
SearchView
programmatically. SearchView
。 Some code to better understand what I did. 一些代码可以更好地理解我的所作所为。 Maybe this can be useful for someone.
也许这对某人有用。
menu.xml
menu.xml文件
<item
android:id="@+id/menu_search"
android:icon="@drawable/action_search"
android:showAsAction="always"
android:title="@string/search" />
// ... other menu items
actionbar_search.xml
actionbar_search.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="horizontal">
<com.actionbarsherlock.widget.SearchView
android:id="@+id/search_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:iconifiedByDefault="false"
android:queryHint="@string/search_hint"
android:visibility="invisible" />
<ImageButton
android:id="@+id/add_item"
android:layout_width="wrap_content"
android:layout_height="match_parent"
style="@style/Widget.Sherlock.ActionButton"
android:src="@drawable/content_new"
android:title="@string/add_item" />
</LinearLayout>
MainActivity.java
MainActivity.java
@Override
public void onCreate(Bundle savedInstanceState) {
// ...
actionBar.setCustomView(R.layout.actionbar_search);
actionBarCustomView = ab.getCustomView();
searchView = ((SearchView) actionBarCustomView.findViewById(R.id.search_view));
searchView.setOnCloseListener(new SearchView.OnCloseListener() {
@Override
public boolean onClose() {
searchView.setVisibility(View.INVISIBLE);
return false;
}
});
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
// ...
case R.id.menu_search:
if (searchView.getVisibility() == View.VISIBLE) {
searchView.setIconified(true);
searchView.setVisibility(View.INVISIBLE);
} else {
searchView.setMaxWidth(abCustomView.getWidth() - addButton.getWidth());
searchView.setVisibility(View.VISIBLE);
searchView.setIconified(false);
}
break;
// ...
}
return true;
}
@Override
public void onBackPressed() {
if (searchView.getVisibility() == View.VISIBLE) {
searchView.setIconified(true);
searchView.setVisibility(View.INVISIBLE);
return;
}
// ...
}
You can do it only using yourmenu.xml. 您只能使用yourmenu.xml来执行此操作。
Set your other menu icon to always show as an action. 将其他菜单图标设置为始终显示为操作。 Your menu.xml should look like this:
您的menu.xml应如下所示:
<item
android:id="@+id/menu_search"
android:actionLayout="@layout/actionbar_search"
android:icon="@drawable/action_search"
android:showAsAction="always|collapseActionView"
android:title="@string/search"
/>
<item
android:id="@+id/your_other_menu_id"
android:showAsAction="always"
android:icon="@android:drawable/your_other_menu_ic"
/>
Simply you can do it like this 你可以这样做
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
searchView.setIconified(true); //to be opened collapsed
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch(item.getItemId()){
case R.id.action_search:
searchView.setIconified(false);// to Expand the SearchView when clicked
return true;
}
return false;
}
And at search item in menu.xml make 并在menu.xml中搜索项目make
showAsAction="always" showAsAction = “总是”
Note: I am using android.support.v7.widget.SearchView but in your case it doesn't matter 注意:我使用的是android.support.v7.widget.SearchView,但在你的情况下并不重要
Just a change menu xml. 只是一个更改菜单xml。 showaction prefix to your app name
showaction前缀到您的应用名称
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<item
android:id="@+id/menu_search"
android:actionLayout="@layout/actionbar_search"
android:icon="@drawable/action_search"
app:showAsAction="always|collapseActionView"
android:title="@string/search"
/>
</menu>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.