android棒棒糖工具栏：滚动时如何隐藏/显示工具栏？

Posted

技术标签:

【中文标题】android棒棒糖工具栏：滚动时如何隐藏/显示工具栏？【英文标题】：android lollipop toolbar: how to hide/show the toolbar while scrolling? 【发布时间】：2014-12-19 19:14:45 【问题描述】：

我正在使用 appcompat / support-v7 中引入的新工具栏小部件。我想根据用户是否向上/向下滚动页面来隐藏/显示工具栏，就像在新的 Google 的 playstore 应用程序或 NewsStand 应用程序中一样。工具栏小部件中是否为此内置了一些东西，或者我应该将它与 FrameLayout 和 ObservableScrollView 结合使用？

【问题讨论】：

我的回答有帮助吗？如果有，请接受，或询问缺少什么。 还没试过。肯定会回来的。也在寻找其他人的想法.. 嗨 nomongo 你找到解决这个问题的方法了吗？ 【参考方案1】：

据我所知，没有任何内置功能可以为您做到这一点。但是，您可以查看 Google IO 源代码，尤其是 BaseActivity。搜索“自动隐藏”或查看onMainContentScrolled

为了隐藏Toolbar，你可以这样做：

toolbar.animate().translationY(-toolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();

如果您想再次显示，请致电：

toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator()).start();

【讨论】：

在 onCreate 中，您的工具栏尚未布局。这就是 getBottom 返回 0 的原因，因此没有动画距离。将 OnGlobalLayoutListener 添加到您的工具栏 ViewTreeObserver 并在回调中启动动画。之后不要忘记删除 OnGlobalLayoutListener。 我对 OnGlobalLayoutListener 不熟悉。你能给我一些代码吗？ 我试过了。工具栏没有隐藏。它的颜色变成了背景色。滚动时看起来很奇怪！ 有效，但需要 API 16，我们可以通过什么方式在 API 9 上进行这项工作？ 如果我没记错的话，它需要 API 12。为了兼容较低的 API 级别，请使用nineoldandroids.com【参考方案2】：

要隐藏工具栏，您可以这样做：

getSupportActionBar().hide();

所以你只需要有一个滚动监听器并在用户滚动时隐藏工具栏！

【讨论】：

很好的解决方案，但仍然没有提供动画。这很奇怪，因为其他 Material Design 基本视图（如 FAB）在显示/隐藏时提供动画【参考方案3】：

隐藏：

getSupportActionBar().hide();

显示：

getSupportActionBar().show();

【讨论】：

【参考方案4】：

答案很简单。只需实现OnScrollListener并在侦听器中隐藏/显示您的工具栏。比如你有listview/recyclerview/gridview，那么就按照例子来吧。

在您的MainActivity Oncreate 方法中，初始化工具栏。

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        if (toolbar != null) 
            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayShowHomeEnabled(true);

然后实现OnScrollListener

public RecyclerView.OnScrollListener onScrollListener = new RecyclerView.OnScrollListener() 
        boolean hideToolBar = false;
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) 
            super.onScrollStateChanged(recyclerView, newState);
            if (hideToolBar) 
                ((ActionBarActivity)getActivity()).getSupportActionBar().hide();
             else 
                ((ActionBarActivity)getActivity()).getSupportActionBar().show();
            
        

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) 
            super.onScrolled(recyclerView, dx, dy);
            if (dy > 20) 
                hideToolBar = true;

             else if (dy < -5) 
                hideToolBar = false;
            
        
    ;

我的想法来自：https://***.com/a/27063901/1079773

【讨论】：

也添加动画部分，这将是一个非常完美的答案。【参考方案5】：

Android 设计支持库可用于显示/隐藏工具栏。

看到这个。 http://android-developers.blogspot.kr/2015/05/android-design-support-library.html

这里有详细的示例。 http://inthecheesefactory.com/blog/android-design-support-library-codelab/en

【讨论】：

感谢您指向“inthecheesefactory”网站！这是一个包含有用信息的好网站！【参考方案6】：

实际上有很多方法可以在您滚动内容时隐藏/显示工具栏。其中一种方法是通过 Android 设计支持库或更具体地说是 Coordinator 布局来实现。超级强大的框架布局。

基本上你需要做的就是在你的布局文件中有以下结构，你应该能够达到你想要的结果。

<CoordinatorLayout>
   <AppBarLayout>
   </AppBarLayout>
   <NestedScrollView>
   </NestedScrollView>
</CoordinatorLayout>

我实际上制作了一个视频来解释如何逐步完成它。随意检查一下，如果有帮助，请告诉我。谢谢！ :)

https://youtu.be/mEGEVeZK7Nw

【讨论】：

【参考方案7】：

只需在工具栏中添加此属性即可完成

app:layout_scrollFlags="scroll|enterAlways"

不是很棒

【讨论】：

很好但不适合我，这段代码自动隐藏工具栏和tabLayout【参考方案8】：

我一直在尝试实现相同的行为，这里是显示和隐藏工具栏的主要代码（放在包含 RecyclerView 的任何类中）：

int toolbarMarginOffset = 0

private int dp(int inPixels)
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, inPixels, getApplicationContext().getResources().getDisplayMetrics());


public RecyclerView.OnScrollListener onScrollListenerToolbarHide = new RecyclerView.OnScrollListener() 
    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) 
        super.onScrolled(recyclerView, dx, dy);
        toolbarMarginOffset += dy;
        if(toolbarMarginOffset>dp(48))
            toolbarMarginOffset = dp(48);
        
        if(toolbarMarginOffset<0)
            toolbarMarginOffset = 0;
        
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams)toolbar.getLayoutParams();
        params.topMargin = -1*toolbarMarginOffset; 
        toolbar.setLayoutParams(params);
    
;

我已经包含了从像素转换为 dp 的 dp 函数，但显然将它设置为您的工具栏高度。 （将 dp(48) 替换为您的工具栏高度）

无论您在哪里设置 RecyclerView，都包括：

yourListView.setOnScrollListener(onScrollListenerToolbarHide);

但是，如果您还使用 SwipeRefreshLayout，则会出现一些其他问题。

我不得不将 RecyclerView 的适配器中第一个元素的 marginTop 设置为工具栏的高度加上原始偏移量。 （我知道有点黑客）。这样做的原因是我发现如果我更改了上面的代码以包括在滚动时更改 recyclerView 的 marginTop ，这是一种紧张的体验。所以我就是这样克服的。所以基本上设置你的布局，使你的工具栏浮动在 RecyclerView 的顶部（剪辑它）像这样的东西（在你的自定义 RecyclerView 适配器的 onBindViewHolder 中）：

 if(position==0)
     ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams)holder.card.getLayoutParams();
     // params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
     params.topMargin = dp(10+48);

最后，由于 RecyclerViews 刷新圈会有很大的偏移量，因此您需要将其偏移（回到持有 RecyclerView 的类的 onCreate 中）：

swipeLayout.setProgressViewOffset(true,dp(48),dp(96));

我希望这对某人有所帮助。这是我的第一个详细答案，所以我希望我足够详细。

【讨论】：

缓慢滚动会导致屏幕闪烁，不好看。【参考方案9】：

隐藏特定片段的菜单：

 setHasOptionsMenu(true); //Inside of onCreate in FRAGMENT:  


   @Override
   public void onPrepareOptionsMenu(Menu menu) 
       menu.findItem(R.id.action_search).setVisible(false);

【讨论】：

【参考方案10】：

我实现了一个实用程序类来在滚动时执行整个隐藏/显示工具栏动画。你可以在这里看到文章http://rylexr.tinbytes.com/2015/04/27/how-to-hideshow-android-toolbar-when-scrolling-google-play-musics-behavior/。源代码在这里https://github.com/rylexr/android-show-hide-toolbar。

【讨论】：

【参考方案11】：

可以在此处下载包含用于滚动工具栏或任何类型标题的完整源代码的库和演示：

https://github.com/JohannBlake/JBHeaderScroll

标题可以是工具栏、线性布局、相对布局或您用来创建标题的任何类型的视图。

可滚动区域可以是任何类型的滚动内容，包括 ListView、ScrollView、WebView、RecyclerView、RelativeLayout、LinearLayout 或任何你想要的。

甚至还支持嵌套标题。

以 Google 报亭中的方式同步标题（工具栏）和可滚动内容确实是一项复杂的工作。

这个库不需要实现任何类型的 onScrollListener。

上面列出的其他解决方案只是半生不熟的解决方案，没有考虑到工具栏下方的可滚动内容区域的顶部边缘必须首先与工具栏的底部边缘对齐，然后在滚动时内容区域需要重新定位并可能调整大小。 JBHeaderScroll 处理所有这些问题。

【讨论】：

【参考方案12】：

有一个名为 Android Design Support Library 的 Android 库，它是一个方便的库，您可以在其中找到 Material 文档提供的所有那些 Material 奇特设计的东西，而无需告诉您如何去做。

这在Android Blog post 中得到了很好的呈现。 “折叠工具栏”尤其是您要寻找的。​​p>

【讨论】：

以上是关于android棒棒糖工具栏：滚动时如何隐藏/显示工具栏？的主要内容，如果未能解决你的问题，请参考以下文章

Android - 当键盘为 android 5.0 (棒棒糖) 启动时调整滚动视图

当用户滚动时如何显示或隐藏日期文本视图就像whatsapp聊天android Kotlin

展开/折叠棒棒糖工具栏动画（电报应用程序）

Android：向上滚动时显示工具栏（向上拖动），向下滚动时隐藏（向下拖动）

android lollipop 中的顶部栏如何隐藏？

当softKeyBoard隐藏按钮和其他元素时如何使布局可滚动[ANDROID]