首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在滚动时向上/向下滑动ToolBar?

在滚动时向上/向下滑动ToolBar可以通过以下步骤实现:

  1. 首先,确保你的应用程序中包含一个ToolBar组件,它是一个可滚动的视图容器,通常位于屏幕的顶部。
  2. 监听滚动事件。根据你使用的开发框架或库的不同,可以使用不同的方法来监听滚动事件。例如,在Android开发中,你可以使用RecyclerView的addOnScrollListener()方法来监听滚动事件。
  3. 在滚动事件的回调函数中,根据滚动的方向来决定ToolBar的动画效果。如果向上滚动,你可以将ToolBar向上滑动并隐藏,如果向下滚动,你可以将ToolBar向下滑动并显示。
  4. 实现ToolBar的滑动动画。根据你使用的开发框架或库的不同,可以使用不同的方法来实现ToolBar的滑动动画。例如,在Android开发中,你可以使用属性动画或Transition动画来实现ToolBar的滑动动画。

以下是一个示例代码片段,展示了如何在Android应用程序中实现向上/向下滑动ToolBar的效果:

代码语言:java
复制
RecyclerView recyclerView = findViewById(R.id.recyclerView);
final Toolbar toolbar = findViewById(R.id.toolbar);

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    private static final int HIDE_THRESHOLD = 20;
    private int scrolledDistance = 0;
    private boolean controlsVisible = true;

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);

        // 计算滚动距离
        scrolledDistance += dy;

        // 向上滚动
        if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {
            toolbar.animate().translationY(-toolbar.getHeight()).setInterpolator(new AccelerateInterpolator(2)).start();
            controlsVisible = false;
            scrolledDistance = 0;
        }
        // 向下滚动
        else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) {
            toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();
            controlsVisible = true;
            scrolledDistance = 0;
        }
    }
});

这段代码使用RecyclerView的addOnScrollListener()方法监听滚动事件,并根据滚动的距离和方向来决定ToolBar的显示和隐藏。当滚动距离超过设定的阈值时,ToolBar会向上滑动并隐藏,当滚动距离小于负的阈值时,ToolBar会向下滑动并显示。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CollapsingToolbarLayout使用

CollapsingToolbarLayout 可以看到,Toolbar的标题放大并在下方显示,当我们向上滑动列表,顶部Header部分的图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式的方式显示蓝色主题...,直至高度缩为Toolbar的高度并成为Toolbar的背景色;向下滑动列表,Header部分逐渐显示。...,效果图中所示;contentScrim内容遮罩,上下滚动图片上面显示和隐藏的遮罩色,Toolbar位置的的背景色;通常这样设置:app:contentScrim="?...attr/colorPrimary",即显示为Toolbar颜色,应用的主题色;layout_collapseMode折叠模式,设置其他控件滚动自身的交互行为,有两种取值:parallax,折叠视差效果...当设置为1.0,滚动列表图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为,可以参考上一篇文章,这里我介绍一下本例中几个新的注意点。

2.5K60

AppBarLayout学习

: 此时可以看到,向上滚动,没有区别;向下滚动,由于ImageView设置了enterAlways,因此首先滚动,直至出现了,然后ScrollView滚动,最后才是ToolBar显示。...可以理解为设置了enterAlways属性的View在向下滚动的优先级高于ScrollView本身,可以实现分段滚动的效果。...exitUtilCollapsed 当向上滑动,称为exit;向下滑动,称为enter,这样理解起enterAlways和enterAlwaysCollpased就很好理解了,理解exitUtilCollapsed...exitUtilCollapsed用于设置向上滚动的最小高度,吸顶的功能。...向下滚动,当ScrollView滚动顶部了,才继续滚动了。 snap snap是一个根据View在屏幕上显示范围进行调整的一个属性,看下效果其实就明白是怎么回事了。

1.1K30
  • Android开发笔记(一百三十五)应用栏布局AppBarLayout

    对于大家关心的额外功能,则主要有以下几点: 1、支持响应主体页面的滑动行为,即在主体页面上移或者下拉,AppBarLayout能够捕捉到主体页面的滚动操作; 2、AppBarLayout捕捉到滚动操作之后...如果仅仅声明scroll,没有声明其它标志,则滚动效果如下图所示: ? 2、enterAlways : 头部与主体先一起滚动,头部滚到位后,主体继续向上或者向下滚。...具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。然后头部固定不动,主体继续向上滚动向下滚动:头部固定不动,主体先向下滚动,一直滚到主体全部拉出。然后头部向下展开。...具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。然后头部与主体先一起滚动,头部滚到位后,主体继续向上向下滚动:头部与主体先一起滚动,一直滚到头部折叠的最小高度。...然后主体向下滚动,滚到位后头部继续向下展开。 5、snap : 在用户手指松开,系统自行判断,接下来是全部向上滚到顶,还是全部向下展开。

    2K40

    细说 AppbarLayout,如何理解可折叠 Toolbar 的定制

    向上滑动的时候,Toolbar滑动,然后 NestedScrollView 中的内容再滑动向下滑动的时候,NestedScrollView 中的内容先滑动,然后 Toolbar 再一起滑动。...当 AppBarLayout 中的内容要从 CoordinatorLayout 外面进入内部,我们用 enter 指代这种行为,对应的手势就是向下滑动。...而 enterAlways 这个标志与 scroll 配合使用可以改变这种行为,enterAlways 起作用时,当手指向下滑动Toolbar 会和 NestedScrollView 一起滑动,它们是同时滑动的...Toolbar滑动,等到视图可见范围高度为 collapsed 指定高度它会静止,等到 NestedScrollView 内容完全显示在 Toolbar 下方它再一起滑动,它的动作是 3 段式的...也就是说 snap 代表一种吸附的行为,当一个滑动事件结束后,Toolbar 会向最接近它的边缘自行滚动。那什么是最近的概念呢?比如向上滑动,如果滑过了一半它就向上滚动,否则滚动回原来的地方。

    3K30

    Material Design 实战 之第四弹 —— 卡片布局

    其中, scroll 表示当RecyclerView向上滚动Toolbar会跟着一起向上滚动并实现隐藏; enterAlways 表示当RecyclerView向下滚动...,Toolbar会跟着一起向下滚动并重新显示; snap 表示当Toolbar还没有完全隐藏或显示,会根据当前滚动的距离,自动选择是隐藏还是显示。...其中, scroll表示当RecyclerView向上滚动Toolbar会跟着一起向上滚动并实现隐藏; enterAlways表示当RecyclerView向下滚动Toolbar会跟着一起向下滚动并重新显示...运行程序可见, 随着我们 向上滚动RecyclerView会Toolbar消失掉; 向下滚动RecyclerView,Toolbar又会重新出现; 滚动Toolbar的一半时松开手指,Toolbar...当用户需要操作Toolbar上的功能,只需要轻微向下滚动Toolbar就会重新出现。

    2.1K10

    高仿支付宝9.9.2版本生活模块界面来讲解CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout

    enterAlways:值设为enterAlways的View,当ScrollView往下滚动,该View会直接往下滚动。而不用考虑ScrollView是否在滚动。...exitUntilCollapsed:值设为exitUntilCollapsed的View,当这个View要往上逐渐“消逝”,会一直往上滑动,直到剩下的的高度达到它的最小高度后,再响应ScrollView...View就暂时不去往下滚动,直到ScrollView滑动到顶部不再滑动,View再继续往下滑动,直到滑到View的顶部结束。...最后snap这是属性是子View不会存在局部显示的情况,滚动Child View的部分高度,当我们松开手指,Child View要么向上全部滚出屏幕,要么向下全部滚进屏幕。...4.Toolbar动态变化 在此整体布局就已经完成,不过还有一个效果就是向上移动是toolbar的的View是动态变化的,一开始我以为这些控件会有这个功能吧,没想到找了很久都没找到,没办法只能自己实现了

    1.1K20

    Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout

    所以Toolbar的上部边缘是不可以往下拉的,只有下部边缘才能往下拉,这样的视觉效果好比Toolbar电影幕布一般缓缓向下展开。...2、enterAlways : 头部与主体先一起滚动,头部滚到位后,主体继续向上或者向下滚。 同时声明scroll和enterAlways,滚动效果如下图所示: ?...具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。然后头部固定不动,主体继续向上滚动向下滚动:头部固定不动,主体先向下滚动,一直滚到主体全部拉出。然后头部向下展开。...具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。然后头部与主体先一起滚动,头部滚到位后,主体继续向上向下滚动:头部与主体先一起滚动,一直滚到头部折叠的最小高度。...5、snap : 在用户手指松开,系统自行判断,接下来是全部向上滚到顶,还是全部向下展开。 同时声明scroll和snap,滚动效果如下图所示: ?

    3.3K30

    CoordinatorLayout使用(四):和Toolbar的简单使用

    snap: 代码中枚举SCROLL_FLAG_SNAP 在滚动结束后,如果view只是部分可见,它将滑动到最近的边界。...enterAlways: 代码中枚举SCROLL_FLAG_ENTER_ALWAYS 这个flag让任意向下滚动都会导致该view变为可见,启用快速“返回模式”。...,只有当滚动视图到达顶部才扩大到完整高度。...设置enterAlways也就是为true的时候,任意向下滚动都会让view(Toolbar)变为可见 反之,不设置,也就是false,就需要向下拉到底以后,才会显示view(Toolbar) enterAlwaysCollapsed...设置exitUntilCollapsed也就是为true的时候,任意向上滚动都会让view(Toolbar)变为minHeight的高度可见,而不会全部消失 反之,不设置,也就是false,会全部消失

    1.5K30

    AppBarLayout和CollapsingToolbarLayout的闲谈

    其实就是向下滚动Scrolling View和Child View之间的滚动优先级问题。...对比scroll和scroll | enterAlways设置,发生向下滚动事件,前者优先滚动Scrolling View,后者优先滚动Child View,当优先滚动的一方已经全部滚进屏幕之后,另一方才开始滚动...这里涉及到Child View的高度和最小高度,向下滚动,Child View先向下滚动最小高度值,然后Scrolling View开始滚动,到达边界,Child View再向下滚动,直至显示完全。...发生向上滚动事件,Child View向上滚动退出直至最小高度,然后Scrolling View开始滚动。也就是,Child View不会完全退出屏幕。...也就是说,Child View不会存在局部显示的情况,滚动Child View的部分高度,当我们松开手指,Child View要么向上全部滚出屏幕,要么向下全部滚进屏幕,有点类似ViewPager的左右滑动

    1.8K30

    CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件

    比如:在CoordinatorLayout中使用AppBarLayout,如果AppBarLayout的子View(ToolBar、TabLayout)标记了app:layout_scrollFlags...等)就能够响应(ToolBar、TabLayout)控件被标记的滚动事件。...标记了layout_scrollFlags滚动事件,那么当LinearLayout滚动便可触发ToolBar中的layout_scrollFlags效果 即往上滑动隐藏ToolBar,下滑出现ToolBar...enterAlways 这个flag让任意向下滚动都会导致该view变为可见,启用快速“返回模式”。...enterAlwaysCollapsed 当你的视图已经设置minHeight属性又使用此标志,你的视图只能已最小高度进入,只有当滚动视图到达顶部才扩大到完整高度 exitUntilCollapsed

    2.1K30

    Android 类似UC浏览器的效果:向上滑动地址栏隐藏功能

    思路要求 ScrollView 嵌套 地址栏 和 WebView 手指滑屏向下滚动(网页向上),如果网页有滚动条,首先把 地址栏 滚动到消失,然后 WebView 才开始滚动; 手指滑屏向上滚动(网页向下...事件传送给 ScrollView 还是留给自己 由于MotionEvent.ACTION_MOVE 事件传送给 ScrollView 后无法在一次 Touch 事件中再接收,所以会导致如果有地址栏,向下滑动第一次只能滑动到...layout_width="match_parent" android:layout_height="match_parent" <LinearLayout android:id="@+id/<em>toolBar</em>...GestureDetector 逻辑分发 – 决定是<em>滑动</em>webview还是改变webview高度从而改变ScrollView<em>滚动</em>范围(ScrollView总是<em>滚动</em>到最底) WebView 重画之后检测当前地址栏偏移...run() { mScrollView.fullScroll(ScrollView.FOCUS_DOWN); } }); } } } 总结 以上所述是小编给大家介绍的Android 类似UC浏览器的效果:<em>向上</em><em>滑动</em>地址栏隐藏功能

    1.5K20

    Material Design之CollapsingToolbarLayout 相关属性和方法介绍

    enterAlways - 实现quick return效果, 当向下移动,立即显示View(比如Toolbar)。...exitUntilCollapsed - 向上滚动收缩View,但可以固定Toolbar一直在上面。...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志,你的View只能以最小高度进入,只有当滚动视图到达顶部才扩大到完整高度。...parallax - 设置为这个模式,在内容滚动,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier...当然 里面的toolbar 你们还可以设置其他的属性。 然后里面的NestedScrollView这货。 它和scrollview 基本上一样  但是它支持嵌套滚动  嵌套滚动默认是启用的。

    94130

    通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

    Scroll: 表示向下滚动,这个View会被滚出屏幕范围直到隐藏. enterAlways: 表示向上滚动,这个View会随着滚动手势出现,直到恢复原来的位置. enterAlwaysCollapsed...exitUntilCollapsed: 同样顾名思义,这个flag定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失。...parallax - 设置为这个模式,在内容滚动,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier...除此之外,在设计 Toolbar 的时候,Google也留给了开发者很多可定制修改的余地,这些可定制修改的属性在API文档中都有详细介绍,: 设置导航栏图标; 设置App的logo; 支持设置标题和子标题...tab,viewpager就会去变动,滑动viewpager,tab也会自动变。

    2.3K90

    Android - 仿网易云音乐歌单详情页

    Toolbar的背景) 4、上下滑动,通过NestedScrollView拿到移动的高度,同时调整Toolbar的背景图透明度 1、Activity设置自定义元素共享切换动画 大家可以发现页面跳转图片移动的是一个曲线路径...,切换页面就会出现闪烁的情况,而如果取的是缓存就不会有这样的问题,所以这里有个小技巧,就是起初Glide加载的图片就指定固定的大小(.override(120,120)),这样图片就会被缓存起来,等到跳转就取缓存...状态栏的高度  final int headerBgHeight = toolbarHeight + StatusBarUtil.getStatusBarHeight(this); // 使背景图向上移动到图片的最底端...compile 'jp.wasabeef:glide-transformations:2.0.1' 4、上下滑动,渐变背景图透明度 由于NestedScrollView滚动监听只能在API23以上才能使用...,这里为了兼容需要额外处理,定义滚动接口,具体:MyNestedScrollView /** * 根据页面滑动距离改变Header透明度方法 */ private void

    1.4K10

    Axure高保真教程:鼠标滚动上下翻页效果

    今天作者就教大家如何在Axure中制作一鼠标滚动上下翻页的效果,我们会以鼠标滚动切换图片为案例。...一、效果展示 鼠标向上滚动,切换查看上一张图片; 鼠标向下滚动,切换查看下一张图片; 循环效果,如果在最后一张图片继续向下滚动,就会循环至第一张图片;如果在第一张图片继续向上滚动,就会循环值最后一张图片...这要就即可以有滚动效果,但是又不出现滚动条。 2. 设置交互 1)向下滚动的交互 鼠标向下滚动,按理来说,我们只需用设置面板状态的交互,就能将图片设置到下一个页面。...设置到下一页,这里需要增加向上滑动的动画,动画时间可以自己设置,案例中是1秒。...然后我们会发现有一个问题,就是一开开始进入,如果直接向上滚动没有效果的,因为滚动条已经在顶部没办法向上滚动,只有先向下滚动后才能继续向上滚动。那如果一开始我们就想向上滚动该怎么办呢?

    11810
    领券