web-dev-qa-db-ja.com

Google PlayストアアプリのようにAndroid SearchViewをスタイルする方法は？

SearchViewのtoolbarのスタイルを設定して、Google Play Store appのSearchViewのように見える/動作するようにしています。これは、searchviewをcardviewでラップしているようですが、上ボタン/引き出しの切り替え動作も統合しているようです。

これはメインのアクティビティsearchViewであり、引き出しトグルが統合されています

MainActivity SearchView

クリックすると、引き出しトグルが矢印に変わります（クリックすると、検索ビューからフォーカスが削除されます）

enter image description here

ストア内のアプリをクリックすると、アプリの詳細ページに移動し、アイコン化されたバージョンの検索ビューが、上ボタンが折りたたまれたアクションアイテムとして表示されます。

enter image description here

最後に、検索アイコンをクリックすると、アクションアイテムとして展開され（一種のリップルアニメーション付き）、画面全体に表示され、[上へ]ボタンが組み込まれます。

enter image description here

自分でやろうとすると、多くの問題があります。 searchviewをcardviewでラップして、ツールバーに配置しようとしました。それは機能しますが、削除できない左側のパディングが常にあります（私はcontentInsetStartを試しましたが、機能しません）：

<Android.support.v7.widget.Toolbar
    Android:id="@+id/activityCatalogToolbar"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    Android:background="?attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    Android:theme="@style/AppTheme.AppBarOverlay"
    app:contentInsetStart="0dp"
    app:contentInsetLeft="0dp">

    <Android.support.v7.widget.CardView
        Android:id="@+id/activityCatalogSearchContainer"
        Android:layout_height="match_parent"
        Android:layout_width="wrap_content"
        Android:layout_gravity="end"
        Android:layout_marginTop="4dp"
        Android:layout_marginBottom="4dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginLeft="8dp"
        app:cardCornerRadius="4dp"
        app:cardElevation="8dp">

        <Android.support.v7.widget.SearchView
            Android:id="@+id/activityCatalogSearch"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:queryHint=""
            Android:iconifiedByDefault="false"/>

    </Android.support.v7.widget.CardView>

</Android.support.v7.widget.Toolbar>

enter image description here

また、ツールバーを削除して、FrameLayoutだけに置き換えようとしました。これにより、パディングを制御できますが、ツールバーの機能（上ボタンなど）が失われ、テーマの問題（アイコンとテキストが消える）が発生します。

誰かがこれをどのように行っているのか考えていますか？フレームワークにすでに存在するウィジェットをスタイルするためだけに、別のライブラリを追加したくありません。ありがとう！

androidgoogle-playthemesandroid-appcompatsearchview
11
d370urn3ur

あなたはこのプロジェクトを深く掘り下げることを試みるかもしれません：

https://Android.googlesource.com/platform/packages/apps/Dialer/

Lollipop、Marshmallow、またはNの場合、必要なのは SearchEditTextLayout です。

利点

  • サードパーティではなく、Googleが作成したコード。
10
R. Zagórski

このSearchViewのカスタム実装を使用する必要があります。

https://github.com/Quinny898/PersistentSearch

Android Studio：

Sonatypeリポジトリをまだ追加していない場合は追加します。

maven {
        url "https://oss.sonatype.org/content/repositories/snapshots"
    }

依存関係としてインポートします。

compile 'com.quinny898.library.persistentsearch:library:1.1.0-SNAPSHOT'

あなたのレイアウトでは：

<com.quinny898.library.persistentsearch.SearchBox
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:id="@+id/searchbox"
        />

出力：

enter image description here

2
Harshad Pansuriya

私自身、これを作ろうとしていました。最終的に、検索ボタンをImageButtonにしました。これをクリックすると、このように作成されたレイアウト内にEdittextを含むフラグメントが上に追加されます。このフラグメントは、この検索ボックスの下にあるリストビューで構成され、提案を示しています。

ヒント：フラグメントのルートレイアウトを背景なしで維持し、クリック可能をtrueに設定して、透明なペインで最良の結果を得る

0
Kushan