Плавающая кнопка действия, прикрепленная якорем, не скрывающаяся при прокрутке элементов RecyclerView медленно

У меня есть дизайн внизу.

То, что я хочу выполнить над макетом вкладок:

Я хочу иметь AppBarLayout, который скрывается, когда пользователь прокручивает RecyclerView на одной из вкладок.
Я хочу, чтобы изображение пользователя было прикреплено к синему фону за ним и чтобы скрыть, когда пользователь прокручивается вниз.
Я хочу, чтобы вкладки были прикреплены вверху, когда пользователь прокручивает, чтобы он мог легко переключать их. Представление recycler и макет табуляции должны быть единственными вещами, видимыми пользователю при прокрутке вниз.

Итак, я достиг 1 и 3, но я не могу достичь 2 - когда вы медленно прокручиваете RecyclerView, изображение остается над ним и не скрывает.

Вот что я сделал:

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

Проверьте XML внизу.

Итак, что происходит:

Все загружается отлично
Кнопка находится в правильном положении.
AppBarLayout отвечает на прокрутку
При медленной прокрутке кнопки не скрывается
При быстрой прокрутке скрывает
При смене фрагментов viewpager он скрывает

Вот видео с проблемой: YOUTUBE

Я попытался отладить координаторLayout и когда он вызвал метод hide() кнопки, но я не мог найти проблему. Любые идеи?

Изменить 1:

Если вы удалите панель инструментов в примере cheesesquare, вы получите ту же ошибку.

Мой тест xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:clickable="true"
    android:background="@color/bg_secondary"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:elevation="1dp"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            android:fitsSystemWindows="true">

            <ImageView
                android:id="@+id/img"
                android:src="@drawable/header_bg"
                android:scaleType="centerCrop"
                android:cropToPadding="true"
                app:layout_collapseMode="parallax"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

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


    <android.support.v4.view.ViewPager
        android:id="@+id/profile_tabs"
        android:elevation="2dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="1dp"
        app:pressedTranslationZ="12dp"
        android:clickable="true"
        app:rippleColor="@android:color/transparent"
        android:src="@drawable/ic_launcher"
        app:layout_collapseMode="parallax"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|left|end" />

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

Изменить 2:

Для этой проблемы существует проблема отмеченная как отклонение.

Ответы

Ответ 1

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

    public class FABBehavior extends FloatingActionButton.Behavior {

    public FABBehavior() {
    }

    public FABBehavior(Context context, AttributeSet attributeSet) {
    }

    public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
        if(dependency instanceof Snackbar.SnackbarLayout) {
           return super.onDependentViewChanged(parent, child, dependency);
        } else if(dependency instanceof AppBarLayout) {
            this.updateFabVisibility(parent, (AppBarLayout)dependency, child);
        }

        return false;
    }

    private boolean updateFabVisibility(CoordinatorLayout parent, AppBarLayout appBarLayout, FloatingActionButton child) {
        CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams)child.getLayoutParams();
        if(lp.getAnchorId() != appBarLayout.getId()) {
            return false;
        } else {

            ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) child.getLayoutParams();
            int point = child.getTop() - params.topMargin;
            try {
                Method method = AppBarLayout.class.getDeclaredMethod("getMinimumHeightForVisibleOverlappingContent");
                method.setAccessible(true);
                if(point <= (int) method.invoke(appBarLayout)) {
                    child.hide();
                } else {
                    child.show();
                }
                return true;
            } catch (Exception e) {
                return true;
            }
        }
    }
}

Вы можете применить это поведение, используя app:layout_behavior, конечно.

Ответ 2

У меня была аналогичная проблема, и я исправил ее, как показано ниже:

AppBarLayout appBarLayout = (AppBarLayout)findViewById(R.id.app_bar_layout);
    appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if(fab.getTop() <= 0) {
                fab.hide();
            } else {
                fab.show();
            }
        }
    });

У меня есть этот код внутри класса активности, и я запускаю этот код на Lollipop.

Ответ 3

Я использовал этот код в своем приложении:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/circlejoined_rootview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/circlebd_rootview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/collapsing_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleTextAppearance="@style/expanded_title">

            <ImageView
                android:id="@+id/circleback_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.4" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/gradient_bg"
                android:orientation="vertical"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                android:gravity="center_horizontal">
            </LinearLayout>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:orientation="vertical">
        <android.support.design.widget.TabLayout
            android:id="@+id/circleresdyn_tablayout"
            style="@style/cirres_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/main_color"/>
        <android.support.v4.view.ViewPager
            android:id="@+id/circleresdyn_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout></RelativeLayout>

Ответ 4

Вы можете использовать панель инструментов для достижения того, чего хотите:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:clickable="true"
    android:background="@color/bg_secondary"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:elevation="1dp"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            android:fitsSystemWindows="true">

            <ImageView
                android:id="@+id/img"
                android:src="@drawable/header_bg"
                android:scaleType="centerCrop"
                android:cropToPadding="true"
                app:layout_collapseMode="parallax"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
          <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"/>

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


    <android.support.v4.view.ViewPager
        android:id="@+id/profile_tabs"
        android:elevation="2dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />



          <android.support.design.widget.FloatingActionButton
               android:id="@+id/test"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:elevation="1dp"
               app:pressedTranslationZ="12dp"
               android:clickable="true"
               app:rippleColor="@android:color/transparent"
               android:src="@drawable/ic_launcher"
               app:layout_collapseMode="parallax"
               app:layout_anchor="@id/app_bar_layout"
               app:layout_anchorGravity="bottom|left|end" />

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

Без панели инструментов FloatingActionButton не скрывается так, как вы хотите.

Ответ 5

Если я правильно понял ваш вопрос (возможно, нет), попробуйте создать прослушиватель прокрутки и скрыть его оттуда. Если я не ошибаюсь, тогда это должно быть так, но исправьте меня, если я ошибаюсь:

viewPager.setOnScrollListener(new OnScrollListener() {
    @Override
    public void onScroll(View v) {
        fab.setVisibility(View.GONE);
    }
}