【问题标题】:Searchview overlaps custom title in toolbar. How to prevent?Searchview 与工具栏中的自定义标题重叠。如何预防?
【发布时间】:2020-11-07 08:17:07
【问题描述】:

我的工具栏包含:

  • 我自己在工具栏开头的视图和
  • 然后是标准图标化搜索视图,可通过单击搜索图标展开:

当点击图标展开搜索时,它会与标题重叠:

如何实现将搜索视图仅扩展到“MY TITLE”的末尾?

主布局:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/home_appbarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/app_toolbar"
            android:layout_width="match_parent"
            android:layout_height="44dp"
            android:theme="@style/myToolbarTheme"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="5dp"
            app:contentInsetStartWithNavigation="0dp"
            app:popupTheme="@style/myToolbarTheme"
            app:title="">

            <include layout="@layout/toolbar_title" />
        </androidx.appcompat.widget.Toolbar>

        <include layout="@layout/toolbar_tabs" />
    </com.google.android.material.appbar.AppBarLayout>

    <ViewFlipper .....

toolbar_title 布局:包含在 Mainlayout 中

<ImageView
    android:id="@+id/current_view_icon"
    android:layout_width="@dimen/toolbar_view_icon"
    android:layout_height="@dimen/toolbar_view_icon"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="10dp"
    app:srcCompat="@drawable/ic_chronology" />


<TextView
    android:id="@+id/appbar_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="5dp"
    android:gravity="center_vertical"
    android:text="MY TITLE"
    android:textColor="@color/navigation_inner_color"
    android:textSize="22dp" />

代码中的膨胀菜单:

AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
appToolbar = context.findViewById(R.id.app_toolbar);
((AppCompatActivity) context).setSupportActionBar(appToolbar);
appToolbar.inflateMenu(R.menu.main_menu);

带有快速搜索功能的 R.menu.main_menu:

<?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"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <item
        android:id="@+id/app_bar_search"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="Search"
        app:actionViewClass="mypackage.toolbar.ArrayAdapterSearchView"
        app:showAsAction="always" />
    <item
        android:id="@+id/app_bar_bookmark"
        android:icon="@drawable/ic_bookmark"
        android:title="Bookmark"
        app:showAsAction="always" />
    <item
        android:id="@+id/app_bar_menuitem_settings"
        android:title="Settings"
        app:showAsAction="never" />
</menu>

【问题讨论】:

  • 您是否尝试过使用android:singleLine="true"

标签: android android-layout android-toolbar searchview


【解决方案1】:

我认为你有两个选择,

在样式中设置 SearchView 的宽度

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="searchViewStyle">@style/MySearchViewStyle</item>
</style>

<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
    <item name="android:maxWidth">140dp</item>
</style>

第二个选项是在onCreateOptionsMenu 中获取 SeachView 实例并计算您的toolbar_title layout 的宽度,将剩余宽度设置为搜索栏。

@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);
   searchView.setMaxWidth(calculatedWidth);
   return super.onCreateOptionsMenu(menu);
}

但根据 android 标准,Search View 必须在工具栏中完全扩展。 为此,我们必须使用searchView.setMaxWidth(Integer.MAX_VALUE);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-08-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多