搜索视图与工具栏中的自定义标题重叠。如何预防?
Searchview overlaps custom title in toolbar. How to prevent?
我的工具栏包含:
- 我自己在工具栏开头的视图和
- 然后是一个标准的图标化搜索视图,可以通过单击搜索图标展开它:
单击图标展开搜索时,它与标题重叠:
如何实现搜索视图只扩展到“我的标题”的末尾?
主要布局:
<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>
我想你有两个选择,
在样式中为 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 标准,搜索视图必须在工具栏中完全扩展。
为此,我们必须使用 searchView.setMaxWidth(Integer.MAX_VALUE);
.
我的工具栏包含:
- 我自己在工具栏开头的视图和
- 然后是一个标准的图标化搜索视图,可以通过单击搜索图标展开它:
单击图标展开搜索时,它与标题重叠:
如何实现搜索视图只扩展到“我的标题”的末尾?
主要布局:
<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>
我想你有两个选择,
在样式中为 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 标准,搜索视图必须在工具栏中完全扩展。
为此,我们必须使用 searchView.setMaxWidth(Integer.MAX_VALUE);
.