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

如何让CollapsingToolbarLayout在滚动后完全消失?

CollapsingToolbarLayout是Android设计支持库中的一个控件,用于实现可折叠的工具栏效果。当滚动内容时,可以通过一些设置让CollapsingToolbarLayout在滚动后完全消失。

要实现CollapsingToolbarLayout在滚动后完全消失,可以通过以下步骤:

  1. 在布局文件中,将CollapsingToolbarLayout的app:layout_scrollFlags属性设置为scroll|exitUntilCollapsed。这个属性告诉CollapsingToolbarLayout在滚动时跟随内容滚动,并在折叠后退出屏幕。

示例代码:

代码语言:txt
复制
<android.support.design.widget.CollapsingToolbarLayout
    ...
    app:layout_scrollFlags="scroll|exitUntilCollapsed">
    ...
</android.support.design.widget.CollapsingToolbarLayout>
  1. 确保CollapsingToolbarLayout的子视图中包含一个可滚动的视图,例如NestedScrollView或RecyclerView。这些可滚动的视图将触发CollapsingToolbarLayout的折叠效果。

示例代码:

代码语言:txt
复制
<android.support.design.widget.CollapsingToolbarLayout
    ...
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

    <android.support.v4.widget.NestedScrollView
        ...
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- 可滚动的内容 -->

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CollapsingToolbarLayout>
  1. 可选步骤:如果希望CollapsingToolbarLayout在完全折叠后消失,可以在代码中设置CollapsingToolbarLayout的折叠监听器,并在完全折叠时将其隐藏。

示例代码:

代码语言:txt
复制
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsingToolbarLayout);
AppBarLayout appBarLayout = findViewById(R.id.appBarLayout);

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
            // 完全折叠时隐藏CollapsingToolbarLayout
            collapsingToolbarLayout.setVisibility(View.GONE);
        } else {
            collapsingToolbarLayout.setVisibility(View.VISIBLE);
        }
    }
});

这样,当滚动内容时,CollapsingToolbarLayout将在滚动后完全消失。

推荐的腾讯云相关产品:腾讯云移动推送(https://cloud.tencent.com/product/umeng_push)、腾讯云物联网通信(https://cloud.tencent.com/product/iotexplorer)、腾讯云云服务器(https://cloud.tencent.com/product/cvm)等。

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

相关·内容

EasyCVR全屏摄像头PTZ控制按钮消失如何操作其显示?

EasyCVR可以进行视频直播,同时也支持对摄像头进行PTZ控制,EasyCVR的网页页面也会进行对应的PTZ控制显示,EasyCVR将该显示放在了播放界面右侧,如下: 但是实际使用过程中,当我们进行全屏播放时...,控制按钮会消失,这个问题我们该如何解决?...对于这样的问题,解决方法有两种: 一种是从播放器端来进行处理,播放器的内部进行控制按钮的设计,通过播放器的UI来展示出控制的按钮; 另一种是播放器的外层再加一层,来进行控制UI的页面。...两种方法都可以实现效果,深层代码的执行我们本文不做讨论,如果大家有兴趣可以自行测试一下。另外EasyCVR也欢迎大家的测试,如果还想了解更多TSINGSEE青犀视频云边端架构,可关注我们。

1.3K20
  • Android--AppBarLayout、CollapsingToolbarLayout组合使用

    、Toolbar常常是组合应用的,AppBarLayout能够赋予Toolbar显示和消失的功能,而CollapsingToolbarLayout能够赋予Toolbar伸缩的功能 AppBarLayout...为scroll|exitUntilCollapsed,还可以使用app:contentScrim来设定缩小到最小高度的颜色(会有一个渐变的效果) 被CollapsingToolbarLayout包裹的控件...,可是设定app:layout_collapseMode属性,其中parallax表示随着滑动控件的滚动,最终该控件会消失,pin则表示,最终不会消失,废话不多说,来看下xml <?...layout_collapseParallaxMultiplier为缩放的中间轴,默认是0.5就是该控件的高度的一半 Toolbar的app:layout_collapseMode为pin,因为最后Toolbar不会消失...的setTitle方法才能设置标题 private CollapsingToolbarLayout collapsingtoolbarlayout; collapsingtoolbarlayout.setTitle

    3.4K30

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

    可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,...不过,Android实现展开效果的时候,并非直接Toolbar展开或收缩,而是另外提供了CollapsingToolbarLayout,通过该布局包裹Toolbar,从而控制标题栏的展开和收缩行为。...工程中使用CollapsingToolbarLayout,则需注意以下几点: 1、添加几个库的支持,包括appcompat-v7库(Toolbar需要)、design库(CollapsingToolbarLayout...同时声明scroll和enterAlways,滚动效果如下图所示: ? 3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。...具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。然后头部与主体先一起滚动,头部滚到位,主体继续向上。 向下滚动:头部与主体先一起滚动,一直滚到头部折叠的最小高度。

    3.2K30

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

    区别在于 exitUntilCollapsed 的存在, scroll 滑动受到了一定的限制。这个限制就是 scoll 不再能够进行完全的滑动,因为 collapsed 距离的存在。...也就是说 snap 代表一种吸附的行为,当一个滑动事件结束,Toolbar 会向最接近它的边缘自行滚动。那什么是最近的概念呢?比如向上滑动时,如果滑过了一半它就向上滚动,否则滚动回原来的地方。...指定 Contetn scrim CollapsingToolbarLayout 会在折叠状态显示指定的颜色或者是图片,它就像是一块纱布一样遮住 title 下面的内容,所以被称为内容纱布。...需要注意的是,这个属性作用对象是 CollapsingToolbarLayout 中的子 View 并不是 CollapsingToolbarLayout如何理解视差?...就是滚动的速度不同,造成的视觉差异效果。也就是说 CollapsingToolbarLayout 中有的 view 滚动的快一些,其它的滚动的慢一些。

    2.9K30

    使用CoordinatorLayout打造各种炫酷的效果

    int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED 另一种enterAlways,但是只显示折叠的高度。...方法一:代码中使用这个方法 setCollapseMode(int collapseMode) 方法 二:布局文件中使用自定义属性 app:layout_collapseMode="pin" 到此...TabLayout会静止,不会随着滑动的 时候消失不见 拓展 如果我们仅仅 改变CollapsingToolbarLayout的app:layout_scrollFlags=”scroll|exitUntilCollapsed...- 对于AppBarLayout,我们主要 讲解了这个属性app:layout_scrollFlags,设置不同 的属性我们可以滚动的时候显示不同 的效果 - 对于CollapsingToolbarLayout...,我们主要讲解了app:layout_collapseMode这个属性,设置不同的值,我们可以其子View呈现不同的 炫酷效果,如parallax和pin等 CoordinatorLayout的相关用法还有很多

    5K10

    Material Design 实战 之 第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型的功能实现(充分利用系统状态栏空间)

    CollapsingToolbarLayout可以Toolbar的效果变得更加丰富,不仅仅是展示一个标题栏,而是能够实现非常华丽的效果。...其中, scroll表示CollapsingToolbarLayout会随着水果内容详情的滚动一起滚动, exitUntilCollapsed表示当CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上...由于CoordinatorLayout本身已经可以响应滚动事件了, 因此我们它的内部就需要使用NestedScrollView或RecyclerView这样可以响应滚动事件的布局。...继续向上拖动,直到标题栏变成完全折叠状态,效果如图: ? 而这个时候向下拖动水果内容详情,就会执行一个完全相反的动画过程。最终恢复刚刚点进来的样子。...现在只要是Android5.0及以上的系统运行这个MaterialTest程序,水果详情展示界面的效果便如下: ? 跟刚刚的效果相比,视觉体验是完全不同档次的。 ?

    2.3K40

    html滚动条使用,以及页面有多个div块,如何body页面不使用滚动条,只某个div内使用滚动

    滚动条空白部分的颜色 scrollbar-shadow-color立体滚动条阴影的颜色 我们通过几个实例来讲解上述的样式属性: 1.浏览器窗口永远都不出现滚动条 没有水平滚动条...加上一点特别的效果: 4.样式表文件中定义好一个类...举例: 2,页面有多个div块,如何...body页面不使用滚动条,只某个div内使用滚动条 先说说正常显示的,显示滚动条和不显示滚动条,效果图如下: 代码: iframe 中始终显示滚动条:</h3...2,另外可能会出现关闭了整个body的滚动,发现div的滚动即使启动了也没有显示,这种情况可能是没有设置此div的高度或宽度,这是需要设置的。

    4.6K30

    CollapsingToolbarLayout使用

    这个效果就是利用了CollapsingToolbarLayout控件,讲解案例代码前,先来介绍一下CollapsingToolbarLayout。...CollapsingToolbarLayout CollapsingToolbarLayout 的 Children 布局上,可以按照 FrameLayout 的属性来拍版,因为它本身继承于 FrameLayout...关于CollapsingToolbarLayout的属性官网上可以查到,这里我只介绍案例中我们常用的几个属性:title标题,布局展开时放大显示图片底部,布局折叠时缩小显示Toolbar左侧。...attr/colorPrimary",即显示为Toolbar颜色,应用的主题色;layout_collapseMode折叠模式,设置其他控件滚动时自身的交互行为,有两种取值:parallax,折叠视差效果...当设置为1.0,滚动列表时图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为,可以参考上一篇文章,这里我介绍一下本例中几个新的注意点。

    2.5K60

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

    为了App页面更加生动活泼,势必要求Toolbar在某些特定的场景上移或者下拉,如此才能满足酷炫的页面特效需要。...RecyclerView是其中一个特工,它可用来替代ListView和GridView;替代ScrollView的则另有其人,它便是嵌套滚动视图NestedScrollView,Android5.0之后的...CollapsingToolbarLayout》。...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。...具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。然后头部与主体先一起滚动,头部滚到位,主体继续向上。 向下滚动:头部与主体先一起滚动,一直滚到头部折叠的最小高度。

    2K40

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

    snap: 代码中枚举SCROLL_FLAG_SNAP 滚动结束,如果view只是部分可见,它将滑动到最近的边界。...enterAlways: 代码中枚举SCROLL_FLAG_ENTER_ALWAYS 这个flag任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。...enterAlwaysCollapsed必须是scroll为true,enterAlways为true的情况下,不然,不会有效果 设置enterAlwaysCollapsed也就是为true的时候,任意向下的滚动都会...设置exitUntilCollapsed也就是为true的时候,任意向上的滚动都会view(Toolbar)变为minHeight的高度可见,而不会全部消失 反之,不设置,也就是false,会全部消失...---- 中场小节 CoordinatorLayout中, 如果NestedScrollView要和Toolbar互动的话(CollapsingToolbarLayout等之后了解,这里不涉及)

    1.4K30

    学习使用Material Design控件(四)Android实现标题栏自动缩放、放大效果

    AppBarLayout 可以包含在其中的控件响应被标记了ScrollingViewBehavior的View的滚动事件 CollapsingToolbarLayout 可以控制包含在CollapsingToolbarLayout...其中的控件,响应collapse时是移除屏幕和固定在最上面 TabLayout 结合ViewPager,实现多个TAB的切换的功能 NestedScrollView 与ScrollView基本相同...android:theme=“@style/ThemeOverlay.AppCompat.Dark.ActionBar” <android.support.design.widget.CollapsingToolbarLayout...app:popupTheme=“@style/ThemeOverlay.AppCompat.Light” / </android.support.design.widget.CollapsingToolbarLayout...,title需要设置到CollapsingToolbarLayoutCollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout

    1.2K31
    领券