Android操作栏：可折叠搜索视图与操作按钮

Question

如何构建一个具有可折叠搜索视图和单个可见操作项的 ActionBar，当搜索视图展开时？更具体地说，这就是我所需要的：

请注意，还有其他菜单项，而AndroidManifest.xml中定义了android:uiOptions =“splitActionBarWhenNarrow”。

我尝试设置自定义搜索项布局：

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

操作栏搜索.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>

但默认情况下搜索视图占据了所有可用的宽度，按钮没有显示出来。我不知道如何强制SearchView填充位于应用程序图标和菜单项之间的所有可用空间。我发现的都是android:maxWidth属性，但这只允许硬编码尺寸，我正在寻找更灵活的解决方案。我还尝试了使用android:layout_toRightOf="@id/search_view"的RelativeLayout，但没有成功。

- Rafal Gałka

Answer 1

考虑了评论中的建议，做了很多谷歌搜索和测试后，成功地获得了所需的效果。我对这个解决方案并不感到自豪，但它有效，不太复杂，应该足以满足本例。

总之，我做了以下几件事：

1. 在ActionBar的customView中放置了带有自定义“添加项目”按钮的SearchView。
2. 从menu.xml中的搜索项中删除了collapseActionView和android:actionLayout。
3. 编程折叠/展开SearchView。

以下是一些代码，以更好地理解我做了什么。也许这对某人有用。

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

<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

@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;
    }

    // ...
}

- Rafal Gałka

---

你好，我尝试了你上面的解决方案，但是完全没有起作用。事实上，我无法看到任何操作项。 - AndoAiron

你能发布一些代码片段吗（例如作为gist）？我花了几天时间来研究和测试，认为我可以提供帮助。 - Rafal Gałka

我该在哪里发布我的代码片段？我不能在这里作为评论发表我的有问题的代码。 另外，你能帮我实现这个吗： http://stackoverflow.com/questions/15947557/sherlockactionbar-with-autocompletetextview-and-other-items?noredirect=1#comment22723847_15947557 - AndoAiron

你可以使用 https://gist.github.com/ 来发布代码片段，并在此处粘贴链接。如果我今天有时间，我会尝试帮助你解决问题。 - Rafal Gałka

只需使用actionbar_search.xml中的RelativeLayout并简单地设置imageButton alignParentRight=true，就可以更轻松地实现此目标。同时，您需要在SearchView中添加android:layout_toLeftOf="@+id/add_item"属性。我刚刚测试过，运行良好。 - AndroidGecko

Answer 2

您只需要使用yourmenu.xml文件就可以完成此操作。

将其他菜单图标设置为始终显示为操作。 您的yourmenu.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"
 />

- JPMagalhaes

---

尝试了这种方法。正如我所提到的，还有其他菜单项，它们都会溢出到底部操作栏。而我需要这个添加操作始终位于右上角。 - Rafal Gałka

这种情况中的细节是分割操作栏，而不是可折叠搜索视图。请查看下面的链接。使用本地对象无法设置此行为。您需要创建自己的定制操作栏。https://dev59.com/q2oy5IYBdhLWcg3wa9Qj - JPMagalhaes

谢谢建议，但我已经尝试过这个方法了。自定义ActionBar在SearchView折叠时给我提供了自定义视图。然后我在顶部栏有一个单独的按钮，底部有menu.xml中的表单。问题是当SearchView展开时。我需要强制它填充所有可用空间，包括应用程序图标和单个操作项之间的空间。我尝试理解SearchView类中onMeasure()发生了什么，但不确定我能做些什么，或者这是否正确的方向。任何帮助将不胜感激。 - Rafal Gałka

你尝试过创建自己的操作视图类吗？也许你可以简单地扩展SearchView类，但我不确定。总之，你可以做以下几点：

1. 创建一个实现CollapsibleActionView接口的类（也许是扩展SearchView）; 在这个类中，你可以实现onActionViewExpanded()方法，在TextEdit后添加一个按钮作为你的菜单项。
2. 将这个类设置为你的菜单项的操作视图类： android:actionViewClass="your.package.YourSearchView"

- JPMagalhaes

Answer 3

你可以像这样简单地完成它

@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;
}

在menu.xml中搜索项目并添加showAsAction="always" 注意：我使用的是android.support.v7.widget.SearchView，但在您的情况下无关紧要。

- Salma

---

@salma 是的，你说得对，android.support.v7.widget.SearchView 和 android.widget.searchview 很重要。 - Ajay Pandya

Answer 4

只需更改菜单xml。在您的应用程序名称前添加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>

- nadafafif