向下滚动隐藏效果的 FloatingActionButton

Posted

技术标签:

【中文标题】向下滚动隐藏效果的 FloatingActionButton【英文标题】:FloatingActionButton on scroll down hidden effect 【发布时间】:2019-07-05 02:03:33 【问题描述】:

我试图让 floatingActionButton 在向下滚动时隐藏并在向上滚动时再次显示,我使用 setOnScrollChangeListener 让 ScrollView 做到这一点

XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".DetailsActivity"
    android:orientation="vertical">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_
        android:layout_
        app:layout_anchor="@id/linearLayout"
        app:layout_anchorGravity="start|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/icons8_share_480"
        />

代码

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) 
    scrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() 
        @Override
        public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) 
            if (scrollY > 0 && fab.isShown()) 
                fab.setVisibility(View.GONE);
             else if (scrollY < 0) 
                fab.setVisibility(View.VISIBLE);

            
        
    );
 else 
    scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() 
        @Override
        public void onScrollChanged() 
            int mScrollY = scrollView.getScrollY();
            if (mScrollY > 0 && fab.isShown()) 
                fab.setVisibility(View.GONE);
             else if (mScrollY < 0) 
                fab.setVisibility(View.VISIBLE);
            
        
    );

the result。 似乎可行,但有时会出现两个问题,当向上滚动 fab 时不会出现第二个问题,它会直接消失而没有任何影响,这个 GIF Destination 越清楚。

【问题讨论】:

【参考方案1】:

问题是因为在您从顶部滚动到底部后,它确实会被隐藏,但它不知道您何时滚动到顶部,因为您所在位置的 mScrollY &lt; 0 并不真正小于 0。尝试使用此代码,它可以给出旧位置和新位置的位置,然后你可以比较它,这样它就会知道你什么时候开始滚动到顶部或底部

这是链接:https://***.com/a/33230992/10396176

【讨论】:

感谢您的澄清,部分问题已解决。保持晶圆厂的隐藏效果。 如果你有这方面的知识,请告诉我 还有哪些问题?【参考方案2】:

感谢@JEFF,在监控OnScrollChangeListener后,我将condition中的值更改为scrollY &lt; 22,它又出现了。 关于我搜索如何做动画的第二个问题,我发现有两种方法可以做到这一点

首先是使用fab.hidefab.show而不是方法setVisibility();

修改后的代码

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) 
    scrollView.setOnScrollChangeListener((v, scrollX, scrollY, oldScrollX, oldScrollY) -> 
        //   Log.d("ScrollView","scrollX_"+scrollX+"_scrollY_"+scrollY+"_oldScrollX_"+oldScrollX+"_oldScrollY_"+oldScrollY);
        if (scrollY > 0 && fab.isShown()) 
            fab.hide();
         else if (scrollY < 22) 
            fab.show();

        
    );
 else 
    scrollView.getViewTreeObserver().addOnScrollChangedListener(() -> 
        int mScrollY = scrollView.getScrollY();
        if (mScrollY > 0 && fab.isShown()) 
            fab.hide();
         else if (mScrollY < 22) 
            fab.show();
        
    );

第二种方式是使用自定义缩放动画来向上、向下缩放,就像这样answer

【讨论】:

【参考方案3】:
fbListFood = findViewById(R.id.fbListFood);
scrollView = findViewById(R.id.scrollView);


if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) 

    scrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() 
        @Override
        public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) 
            if (scrollY > 0 && fbListFood.isShown()) 
                fbListFood.hide();
             else if (scrollY < 22) 
                fbListFood.show();

            
        
    );
 else 
    

    scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() 
        @Override
        public void onScrollChanged() 
            int mScrollY = scrollView.getScrollY();
            if (mScrollY > 0 && fbListFood.isShown()) 
                fbListFood.hide();
             else if (mScrollY < 22) 
                fbListFood.show();
            
        
    );

【讨论】:

以上是关于向下滚动隐藏效果的 FloatingActionButton的主要内容,如果未能解决你的问题,请参考以下文章

向下滑动关闭垂直滚动视图

Android:向上滚动时显示工具栏(向上拖动),向下滚动时隐藏(向下拖动)

向下滚动时隐藏标题,向上滚动时显示

jQuery:向下滚动时立即隐藏元素

向下滚动以逐渐隐藏菜单栏或视图并向上滚动

html 粘滞标题 - 向下滚动隐藏,向上滚动显示