【问题标题】:Using SearchView with AppCompatActivity results in UI glitches将 SearchView 与 AppCompatActivity 一起使用会导致 UI 故障
【发布时间】:2016-04-08 10:47:08
【问题描述】:

我正在尝试在操作栏中创建一个带有搜索按钮的 Android 应用,当用户按下搜索按钮时,操作栏上会出现一个搜索文本框,就像在 Google 的 Messenger 应用中一样(见下文)。

我尝试实现它,如下所示,但我的应用程序如下所示:

这有一些问题。例如,文本中带有省略号的“搜索...”,与没有省略号的简单“搜索”不同,但迄今为止最令人担忧的是,工具栏中没有返回按钮,搜索按钮被按下左边太远了,右边的溢出按钮被推到一边了。此外,在我的设备上按下物理后退按钮不会折叠搜索视图,它只是存在于应用程序中。

我用来实现搜索栏的一些代码如下。我尝试设置SearchViewExpandListener,如下所示,以便在展开搜索视图时出现后退按钮,但它不起作用。

编辑:我还在我的 onMenuItemActionExpandonMenuItemActionCollapsed 方法上运行带有断点的应用程序,我发现这些方法实际上从未被调用过。

MainActivity.java

import android.content.Context;
import android.support.v4.view.MenuItemCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(false);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);

        MenuItem searchItem = menu.findItem(R.id.action_search);
        SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
        // See above
        MenuItemCompat.setOnActionExpandListener(searchItem, new SearchViewExpandListener(this));
        MenuItemCompat.setActionView(searchItem, searchView);

        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {

            @Override
            public boolean onQueryTextSubmit(String s) {
                Toast.makeText(MainActivity.this, "You searched " + s, Toast.LENGTH_SHORT).show();
                return false;
            }

            @Override
            public boolean onQueryTextChange(String s) {
                return false;
            }
        });
        return true;
    }

// See above
    private class SearchViewExpandListener implements MenuItemCompat.OnActionExpandListener {

        private Context context;

        public SearchViewExpandListener (Context c) {
            context = c;
        }

        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            ((AppCompatActivity) context).getSupportActionBar().setDisplayShowHomeEnabled(true);
            return false;
        }

        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            ((AppCompatActivity) context).getSupportActionBar().setDisplayShowHomeEnabled(false);
            return false;
        }
    }
}

menu.xml

<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:title="Search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom"/>

    <item android:id="@+id/action_about"
        android:title="About"
        app:showAsAction="never"/>
</menu>

似乎不止我一个人有这个问题。 This guide on implementing a SearchView 似乎遇到了类似的问题。

那么在 AppCompatActivity 中实现搜索栏的正确方法是什么,它会产生类似于 Google 的 Material Design 指南中的搜索栏以及 Google Messenger 等应用程序中的搜索栏?我觉得就像我过去一直在无休止地搜索一样,但我找不到任何对我有帮助的东西。

【问题讨论】:

  • 在菜单的 action_search 项中尝试 app:showAsAction="always|collapseActionView"

标签: android user-interface android-appcompat searchview


【解决方案1】:

在 serchView 菜单项的 showAsAction 中使用 collapseActionView 标志和 always

app:showAsAction="always|collapseActionView"

collapseActionView 标志指示当用户不与它交互时如何显示小部件:如果小部件在应用栏上,则应用应将小部件显示为图标。如果小部件位于溢出菜单中,则应用程序应将小部件显示为菜单项。当用户与操作视图交互时,它会展开以填充应用栏。

【讨论】:

  • 我从没想过解决方案会这么简单。谢谢你!
猜你喜欢
  • 1970-01-01
  • 2020-10-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-05-23
  • 1970-01-01
  • 2019-09-19
  • 2014-01-28
相关资源
最近更新 更多