wake-up-neo.net

Wie kann ich den SearchView gestalten, wenn eine Symbolleiste als Aktionsleiste verwendet wird?

Ich verwende eine Toolbar als Aktionsleiste in meiner App, die die AppCompat v21-Bibliothek verwendet, wie in diesem Beitrag im Android Developers Blog beschrieben. Ich habe die Aktionsleiste mit dem ThemeOverlay.AppCompat.Dark.ActionBar-Design so gestaltet, dass der Text hell ist. Ich möchte jedoch, dass das Popup für Suchvorschläge der Aktionsleiste SearchView dunklen Text auf hellem Hintergrund anzeigt, und ich habe diesen Effekt nicht erzielen können.

Hier ist das XML für meine Aktionsleiste Toolbar:

<Android.support.v7.widget.Toolbar
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/toolbar_actionbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:minHeight="?attr/actionBarSize"
    Android:background="?attr/colorPrimary"
    Android:elevation="@dimen/action_bar_elevation"
    app:theme="@style/ActionBarThemeOverlay"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 

Ich habe versucht, die Überlagerung der Aktionsleiste auf das _SearchView-Format zu erweitern:

<style name="ActionBarThemeOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="searchViewStyle">@style/Widget.AppCompat.Light.SearchView</item>
</style>

Ich habe dasselbe Element zu meinem Hauptthema hinzugefügt:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="searchViewStyle">@style/Widget.AppCompat.Light.SearchView</item>
</style>

Die searchViewStyle-Elemente scheinen jedoch keine Wirkung zu haben. Wie kann ich das SearchView hier gestalten?

25
Ben

Nachdem ich mich mit dem Quellcode befasst und ein wenig experimentiert hatte, habe ich eine Lösung gefunden und einige Verwirrungsursachen beseitigt. Zunächst muss der Stil SearchView im App-Design festgelegt werden:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="searchViewStyle">@style/MySearchViewStyle</item>
</style>

Dann müssen wir die suggestionRowLayout in die searchViewStyle setzen:

<style name="MySearchViewStyle" parent="Widget.AppCompat.Light.SearchView">
    <item name="suggestionRowLayout">@layout/search_suggestion_row</item>
</style>

In meiner Frage ging ich davon aus, dass wir @style/Widget.AppCompat.Light.SearchView verwenden könnten, um ein Menü mit leichten Vorschlägen zu erhalten. Es stellt sich jedoch heraus, dass dies nicht der Fall ist. Wir müssen unser eigenes Layout definieren. Ich basierte auf abc_search_dropdown_item_icons_2line.xml aus der AppCompat v21-Bibliothek.

10
Ben

Laut dem AppCompat v21-Ankündigungsblog-Beitrag :

AppCompat bietet die aktualisierte SearchView-API von Lollipop, die weitaus anpassbarer und ansprechbarer ist (Beifall in Warteschlange stellen). Wir verwenden jetzt die Lollipop-Style-Struktur anstelle der alten searchView * -Thema-Attribute.

So gestalten Sie SearchView (in values/themes.xml):

<style name="Theme.MyTheme" parent="Theme.AppCompat">
   <item name="searchViewStyle">@style/MySearchViewStyle</item>
</style>
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
   <!-- Background for the search query section (e.g. EditText) -->
   <item name="queryBackground">...</item>
   <!-- Background for the actions section (e.g. voice, submit) -->
   <item name="submitBackground">...</item>
   <!-- Close button icon -->
   <item name="closeIcon">...</item>
   <!-- Search button icon -->
   <item name="searchIcon">...</item>
   <!-- Go/commit button icon -->
   <item name="goIcon">...</item>
   <!-- Voice search button icon -->
   <item name="voiceIcon">...</item>
   <!-- Commit icon shown in the query suggestion row -->
   <item name="commitIcon">...</item>
   <!-- Layout for query suggestion rows -->
   <item name="suggestionRowLayout">...</item>
</style>

Wie weiter in diesem Blogbeitrag recherchiert .

43
ianhanniballake

Hier ist ein Beispiel für search_suggestion_row.xml

    <?xml version="1.0" encoding="utf-8"?>
<!--
/*
 * Copyright (C) 2014 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.Apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
                Android:layout_width="match_parent"
                Android:layout_height="58dip"
                style="@style/RtlOverlay.Widget.AppCompat.Search.DropDown">

    <!-- Icons come first in the layout, since their placement doesn't depend on
         the placement of the text views. -->
    <Android.support.v7.internal.widget.TintImageView
               Android:id="@Android:id/icon1"
               Android:layout_width="@dimen/abc_dropdownitem_icon_width"
               Android:layout_height="48dip"
               Android:scaleType="centerInside"
               Android:layout_alignParentTop="true"
               Android:layout_alignParentBottom="true"
               Android:visibility="invisible"
               style="@style/RtlOverlay.Widget.AppCompat.Search.DropDown.Icon1" />

    <Android.support.v7.internal.widget.TintImageView
               Android:id="@+id/edit_query"
               Android:layout_width="48dip"
               Android:layout_height="48dip"
               Android:scaleType="centerInside"
               Android:layout_alignParentTop="true"
               Android:layout_alignParentBottom="true"
               Android:background="?attr/selectableItemBackground"
               Android:visibility="gone"
               style="@style/RtlOverlay.Widget.AppCompat.Search.DropDown.Query" />

    <Android.support.v7.internal.widget.TintImageView
               Android:id="@id/Android:icon2"
               Android:layout_width="48dip"
               Android:layout_height="48dip"
               Android:scaleType="centerInside"
               Android:layout_alignWithParentIfMissing="true"
               Android:layout_alignParentTop="true"
               Android:layout_alignParentBottom="true"
               Android:visibility="gone"
               style="@style/RtlOverlay.Widget.AppCompat.Search.DropDown.Icon2" />


    <!-- The subtitle comes before the title, since the height of the title depends on whether the
         subtitle is visible or gone. -->
    <TextView Android:id="@Android:id/text2"
              style="?android:attr/dropDownItemStyle"
              Android:textAppearance="?attr/textAppearanceSearchResultSubtitle"
              Android:singleLine="true"
              Android:layout_width="match_parent"
              Android:layout_height="29dip"
              Android:paddingBottom="4dip"
              Android:gravity="top"
              Android:layout_alignWithParentIfMissing="true"
              Android:layout_alignParentBottom="true"
              Android:visibility="gone" />

    <!-- The title is placed above the subtitle, if there is one. If there is no
         subtitle, it fills the parent. -->
    <TextView Android:id="@Android:id/text1"
              style="?android:attr/dropDownItemStyle"
              Android:textAppearance="?attr/textAppearanceSearchResultTitle"
              Android:singleLine="true"
              Android:layout_width="match_parent"
              Android:layout_height="wrap_content"
              Android:layout_centerVertical="true"
              Android:layout_above="@Android:id/text2" />

</RelativeLayout>
<!-- From: file:/usr/local/google/buildbot/repo_clients/https___googleplex-Android.googlesource.com_a_platform_manifest.git/lmp-mr1-supportlib-release/frameworks/support/v7/appcompat/res/layout/abc_search_dropdown_item_icons_2line.xml -->
1
awsleiman

Wenn es nicht funktioniert, können Sie dafür programmieren. Ich erkläre in diesem Beitrag. Es ist für Xamarin-Formulare, aber ich hoffe, Sie können es auf andoird native anwenden. Sie können den Hintergrund, das Symbol, das klare Symbol sowie die Farbe ändern

So ändern Sie das Bild für die Schaltfläche zum Löschen der Suchleiste in Xamarin-Formularen

0
vu ledang