it-swarm.com.ru

Как оформить Android SearchView, как в приложении Google Play Store?

Я пытаюсь стилизовать SearchView в toolbar, чтобы он выглядел/вел себя как SearchView в Google Play Store app. Кажется, что он оборачивает вид поиска в виде карты, но он также интегрирует поведение переключения кнопок/ящиков.

Это основной вид деятельности searchView, он имеет встроенный переключатель ящика

 MainActivity SearchView

когда вы щелкаете по нему, переключатель ящика меняется на стрелку (при щелчке он удаляет фокус из окна поиска)

 enter image description here

Когда вы нажимаете на приложение в магазине, вы переходите на страницу сведений о приложении, и у вас есть то, что выглядит как уменьшенная версия представления поиска в виде свернутого элемента действия с кнопкой вверх:

 enter image description here

Наконец, если вы щелкнете по значку поиска, он развернется как элемент действия (с некоторой анимацией пульсаций) и отобразится по всему экрану и будет содержать кнопку вверх:

 enter image description here

Когда я пытаюсь сделать это сам, у меня много проблем. Я попытался обернуть поисковое представление в карточное представление и поместить это в панель инструментов. Это работает, но с левой стороны всегда есть отступы, которые я не могу удалить (я попробовал 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. Это позволяет мне контролировать отступы, но, очевидно, я теряю функциональность панели инструментов (кнопка «вверх» и т.д.), А также создает проблемы с тематикой (значки и текст исчезают).

У кого-нибудь есть идеи, как они это делают? Я не хочу добавлять другую библиотеку только для стилизации виджетов, которые уже существуют в фреймворке. Спасибо!

7
d370urn3ur

Вы можете попытаться углубиться в этот проект:

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

Для Lollipop или Marshmallow, или N он имеет SearchEditTextLayout , что вам нужно:

Преимущество

  • код, созданный Google, а не третьей стороной.
8
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
Ironman

Я сам пытался это построить. Закончилось просто сделать кнопку поиска ImageButton. щелчок по нему приведет к добавлению фрагмента сверху, который будет содержать текст редактирования внутри макета, сделанного так. и этот фрагмент состоял из списка под этим окном поиска, чтобы показать предложения.

Подсказка: оставьте корневое расположение фрагмента без фона и установите для clickable значение true, чтобы добиться наилучших результатов с прозрачной панелью.

0
Kushan