3

Задача: сделать поле поиска(используем для фона CardView), находящееся прямо под toolbar и наполовину выпирающее из AppBarLayout. Пример ниже:

введите сюда описание изображения

Первый найденный мной способ. Тут я сделал разметку с помощью отрицательного margin у CardView:

...
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways"
            />

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:layout_marginBottom="-28dp"
            app:layout_scrollFlags="scroll|enterAlways"
            />
    </android.support.design.widget.AppBarLayout>
...

Второй способ. C помощью app:layout_anchor задаю CardView якорь в bottom AppbarLayout и увеличиваю его elevation.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.helloworld.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways"
            android:layout_marginBottom="28dp"/>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom"
        app:cardElevation="5dp"
    />
</android.support.design.widget.CoordinatorLayout>

Однако в обоих случаях возникает проблема при скроллинге RecyclerView и скрытии содержимого AppBarLayout. На экране остается часть CardView, которая выходит за пределы AppBarLayout(RecyclerView на картинке ниже отключен):

введите сюда описание изображения

Вопросы:

  1. Какой из этих способов лучше? Есть ли лучше? Какие?
  2. Как решить проблему при скроллинге и скрывать все элементы? Обернуть AppBarLayout в еще один layout и уже его скрывать? Или добавить ScroolListener и скрывать CardView вручную?
  3. Второй способ идентичен шаблону ScrollingActivity в Android Studio. Только вместо моего CardView там находится FloatingActionButton, который исчезает при скроллинге(но не сразу). Как реализована данная возможность и как ее прикрутить к CardView?
1
  • Мягко говоря это не соответствует принципам material design, и даже есть отголоски такого использования в Anti-patterns, но дело ваше мне так лично - нравится. Просто проблема очевидна и предсказуема, если вы играете с -margin. Представьте что этот элемент как FAB, при scroll накрутите на него анимацию -scale + invisible и обратно, примерно как у FAb, это то что мне пришло сразу в голову, думаю решений здесь уйма, и ограничения только ваша фантазия. 30 апр 2016 в 7:16

1 ответ 1

1

Я делал так:

  1. AppBarLayout прозрачен.
  2. Под ним ImageView c высотой чуть большей AppBar-a
  3. На AppBarLayout повешен слушатель onOffsetChangeListener, скролящий ImageView из п.2

Если охота копаться в коде, то вот: тык

введите сюда описание изображения

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.