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

当CollapsingToolbarLayout折叠时显示工具栏图标

当CollapsingToolbarLayout折叠时,可以通过设置工具栏图标来提供用户导航和操作的功能。工具栏图标通常是一个菜单按钮,当用户点击它时,会显示一个菜单列表,包含其他功能选项。

CollapsingToolbarLayout是Android Support Library中的一个控件,用于实现可折叠的工具栏效果。它可以在滚动视图中根据滚动位置自动展开或折叠工具栏,并提供了一些自定义属性和回调方法,使开发者能够根据需要定制工具栏的外观和行为。

在CollapsingToolbarLayout折叠时显示工具栏图标,可以通过以下步骤实现:

  1. 在布局文件中,将CollapsingToolbarLayout作为AppBarLayout的子项,并设置相应的属性,如布局高度、折叠模式等。
  2. 在CollapsingToolbarLayout中添加一个Toolbar作为工具栏,并设置相应的属性,如背景颜色、标题等。
  3. 在Toolbar中添加工具栏图标按钮,可以使用Android提供的标准图标,也可以自定义图标。
  4. 在代码中,通过设置CollapsingToolbarLayout的折叠监听器(addOnOffsetChangedListener)来监听折叠状态的变化。
  5. 在折叠监听器的回调方法中,根据CollapsingToolbarLayout的折叠状态来控制工具栏图标的显示与隐藏。当折叠状态为完全折叠时,显示工具栏图标;否则,隐藏工具栏图标。

以下是一个示例代码:

代码语言:txt
复制
<android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.AppBarLayout>
        <android.support.design.widget.CollapsingToolbarLayout>
            <android.support.v7.widget.Toolbar>
                <!-- 添加工具栏图标按钮 -->
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/menu_icon"
                    android:onClick="showMenu" />
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <!-- 添加其他内容,如滚动视图等 -->
</android.support.design.widget.CoordinatorLayout>
代码语言:txt
复制
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsingToolbarLayout);
collapsingToolbarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        // 根据折叠状态来控制工具栏图标的显示与隐藏
        if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
            // 完全折叠时显示工具栏图标
            showToolbarIcon();
        } else {
            // 非完全折叠时隐藏工具栏图标
            hideToolbarIcon();
        }
    }
});

public void showMenu(View view) {
    // 点击工具栏图标时显示菜单列表
    // ...
}

public void showToolbarIcon() {
    // 显示工具栏图标的逻辑
    // ...
}

public void hideToolbarIcon() {
    // 隐藏工具栏图标的逻辑
    // ...
}

这样,当CollapsingToolbarLayout折叠时,工具栏图标会显示在工具栏中,供用户点击和操作。可以根据具体需求,自定义工具栏图标的样式和功能。

腾讯云相关产品推荐:

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  • 云数据库 MySQL 版(CDB):https://cloud.tencent.com/product/cdb
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/iothub
  • 移动应用开发平台(MADP):https://cloud.tencent.com/product/madp
  • 对象存储(COS):https://cloud.tencent.com/product/cos
  • 区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云游戏引擎(GSE):https://cloud.tencent.com/product/gse
  • 腾讯云直播(CSS):https://cloud.tencent.com/product/css
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,...这里要明确一点,Toolbar本身是页面顶部的工具栏,其上没有本页面的其它控件了,如果Toolbar被拉下来了,那Toolbar上面的空白该显示什么?...折叠系数可通过属性app:layout_collapseParallaxMultiplier配置,该属性为1.0折叠效果同pin模式即固定不动;该属性为0.0折叠效果等同于none模式,即也跟着移动相同距离...下面是标题栏在折叠显示渐变图片的效果图: ?...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。

3.2K30

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

假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,滚动到顶部的时候展开完。...CollapsingToolbarLayout的介绍 CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags...CollapsingToolbarLayout的子View中可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式CollapsingToolbarLayout...我在做这里的时候遇到一个问题,那就是CollapsingToolbarLayout里的Title的问题,一般默认是显示的,即使你不写,它也有会一个默认值一直显示在那里,等折叠收缩完的时候,停留在标题工具栏上...相互建立联系的方法如下: setupWithViewPager(ViewPager viewPager) 如果选项卡里带有图标或者仅仅只有图标就麻烦了,那个选项卡会变得什么都没有了。

2.3K90
  • Android之MaterialDesign应用技术2-仿支付宝上滑搜索框缓慢消失

    1.1:CoordinatorLayout中设置   前面的添加依赖,在上一篇中已经说过,在这就不在重复了,协调者布局中这次又加入了一个新的布局CollapsingToolbarLayout折叠工具栏布局...),很明显上面的效果图中的工具栏上滑的同时把图片折叠进去了,这是一个动画效果,如果不是MaterialDesign库的强大,这都是我们自己写。...竟然折叠的部分是toolbar和背景图片,这就理所应当的把这两个空间写在CollapsingToolbarLayout中,因为上面协调者布局和appbar布局很简单,这里就不在写了,只贴出折叠布局代码(...里面的注释有贴出后加的,用该代码要注意语法)。...EditText获取得光标的时候,EditText的hint会自己显示在上方,并且有动画过渡。 ?

    1.6K100

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

    2、AppBarLayout内部的高度也可能变化,比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout,有关可折叠工具栏布局的详细介绍参见《Android开发笔记(一百三十六)可折叠工具栏布局...CollapsingToolbarLayout》。...同理,拉动AppBarLayout也有类似情况,松开手指后,AppBarLayout得判断要不要继续向上收缩,或是继续向下展开。...所以本文只做下面三个标志的概念解释,有关的效果图参见《Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout》。...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。

    2K40

    CoordinatorLayout使用全解析

    例如,如果视图只有底部25%显示,它将折叠。相反,如果它的底部75%可见,那么它将完全展开。...CollapsingToolbarLayout可以通过app:contentScrim设置折叠工具栏布局的颜色,通过app:statusBarScrim设置折叠状态栏的颜色。...CollapsingToolbarLayout的子布局有3种折叠模式(Toolbar中设置的app:layout_collapseMode) off:默认属性,布局将正常显示,无折叠行为。...pin:CollapsingToolbarLayout折叠后,此布局将固定在顶部。 parallax:CollapsingToolbarLayout折叠,此布局也会有视差折叠效果。...CollapsingToolbarLayout的子布局设置了parallax模式,我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子,值为:0~

    2K20

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

    int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED 另一种enterAlways,但是只显示折叠后的高度。...简单来说 ,CollapsingToolbarLayout工具栏的包装器,它通常作为AppBarLayout的孩子。...主要实现以下功能 - Collapsing title(可以折叠 的 标题 ) - Content scrim(内容装饰),当我们滑动的位置 到达一定阀值的时候,内容 装饰将会被显示或者隐藏...(这个View到达 CollapsingToolbarLayout的底部的时候,这个View 将会被放置,即代替整个CollapsingToolbarLayout) 我们有两种方法可以设置这个常量,...的底部的时候,会代替整个CollapsingToolbarLayout显示 接着说明TabLayout的变化 从前面的描述我们已经知道 没有指定app:layout_scrollFlags的时候,最终

    5K10

    CollapsingToolbarLayout使用

    CollapsingToolbarLayout 可以看到,Toolbar的标题放大并在下方显示,当我们向上滑动列表,顶部Header部分的图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式的方式显示蓝色主题...关于CollapsingToolbarLayout的属性在官网上可以查到,这里我只介绍案例中我们常用的几个属性:title标题,布局展开放大显示在图片底部,布局折叠缩小显示在Toolbar左侧。...attr/colorPrimary",即显示为Toolbar颜色,应用的主题色;layout_collapseMode折叠模式,设置其他控件滚动自身的交互行为,有两种取值:parallax,折叠视差效果...设置为1.0,滚动列表图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为,可以参考上一篇文章,这里我介绍一下本例中几个新的注意点。...表示控件向上折叠退出并以最小高度停留在顶部;前面介绍CollapsingToolbarLayout属性介绍到了statusBarScrim的使用,其实也可以通过android:fitsSystemWindows

    2.5K60

    【Android】5.x炫酷标题栏动画使用理解

    题主之前一直以为标题栏也就是一个简单的导航栏,也就是放个标题,配几个图标而已。但其实还可以像上面一样实现一些较酷炫的效果的。...滑动屏幕,子控件都做出了相应的行为(滑出屏幕,固定顶端等),这些行为其实就是AppbarLayout提供给它子控件的功能。...至于CollapsingToolbarLayout则是给子控件提供了折叠的功能,什么是折叠呢?...我们上面的代码中,Toolbar是AppBarLayout的第一个子控件,虽然设置了scroll值,但也设置了exitUntilCollapsed值,这个的作用是,向上滑动,这个控件也会跟着滑出屏幕...至于作用其实就是当你一向下滑动屏幕,控件就能马上显示出来,不必滑到顶端。 snap:当你停止滑到屏幕,控件自动恢复原样或者自动滑到底。

    1.1K60

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

    开始无知的我还以为是监听 onTouchListener 根据滑动的距离和位置来改变显示效果来实现的。 唉,今天无意中看到这个 CollapsingToolbarLayout 。...在折叠的时候 显示的toolbar的id 13.app:layout_scrollFlags="scroll|exitUntilCollapsed"  scroll - 想滚动就必须设置这个。...enterAlways - 实现quick return效果, 向下移动,立即显示View(比如Toolbar)。...--layout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式CollapsingToolbarLayout完全收缩后,Toolbar...parallax - 设置为这个模式,在内容滚动CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier

    93430

    【翻译】MotionLayout实现折叠工具栏(Part 1)

    【翻译】MotionLayout实现折叠工具栏(Part 1) 2018-08-13 by Liuqingwen | Tags: Android 翻译 | Hits ?...在我们开始之前,有必要在这里澄清一下:在 CoordinatorLayout 中使用 CollapsingToolbarLayout 来实现折叠工具栏是没任何问题的。...举个例子,一个折叠工具栏应该根据用户的滚动进行展开和折叠,所以实际动画的运行应该时刻跟随用户的拖拽进行。这也是那些框架办不到的地方。 废话不多说,让我们看下我们所要尝试模拟做到的行为动作。...这里的代码展示了一个折叠工具栏,应用了 Material Components Library 库里的 CollapsingToolbarLayout 和 CoordinatorLayout 布局。...我们使用的是一个标准的 ImageView 控件,其位于 ConstraintSet 下的 Constraint 元素中,其主要的属性变成可以是 ConstraintLayout.LayoutParams

    1.9K31

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

    AppBarLayout 中的内容要从 CoordinatorLayout 外面进入内部,我们用 enter 指代这种行为,对应的手势就是向下滑动。... AppBarLayout 中的内容从 CoordinatorLayout 内部向外部方向移动,我们用 exit 指代这种行为,对应的手势是向上滑动。...Toolbar 先滑动,等到视图可见范围高度为 collapsed 指定高度它会静止,等到 NestedScrollView 内容完全显示在 Toolbar 下方它再一起滑动,它的动作是 3 段式的...也就是说 snap 代表一种吸附的行为,一个滑动事件结束后,Toolbar 会向最接近它的边缘自行滚动。那什么是最近的概念呢?比如向上滑动,如果滑过了一半它就向上滚动,否则滚动回原来的地方。...指定 Contetn scrim 后,CollapsingToolbarLayout 会在折叠状态显示指定的颜色或者是图片,它就像是一块纱布一样遮住 title 下面的内容,所以被称为内容纱布。

    2.9K30

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

    本文来做一个额外的活动作为水果的详情展示界面,点击水果列表卡片的时候就进入这个界面。...app:contentScrim指定CollapsmgToolbarLayout在趋于折叠状态以及折叠之后的背景色, 其实CollapsingToolbarLayout折叠之后就是一个普通的Toolbar...其中, scroll表示CollapsingToolbarLayout会随着水果内容详情的滚动一起滚动, exitUntilCollapsed表示CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上...以及, app:layout_collapseMode用于指定当前控件在CollapsingToolbarLayout折叠过程中的折叠模式, 其中Toolbar指定成pin,表示在折叠的过程中位置始终保持不变...首先需要提前准备好一个图标, 这里放置了一张ic_comment.png到drawable-xxhdpi目录下。 然后修改activity_fruit.xml: ......

    2.3K40

    NestedScrollView 嵌套 ListView 实现滑动折叠效果

    当我们引入RecyclerView的时候,恰好是压死骆驼的最后一根稻草,故不得不采用其他方案来代替RecyclerView 和 CollapsingToolbarLayout实现的折叠效果。...app:contentScrim 表示CollapsingToolbarLayout折叠以后,toolbar的颜色。...enterAlways - 实现quick return效果, 向下移动,立即显示View(比如Toolbar). exitUntilCollapsed - 向上滚动收缩View,但可以固定Toolbar...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志,你的View只能以最小高度进入,只有当滚动视图到达顶部才扩大到完整高度。...表示不动,parallax视差效果 将 app:layout_behavior="@string/appbar_scrolling_view_behavior"指定给NestedScrollView,即该控件滑动的时候

    3.4K50

    Flutter之SliverAppBar

    SliverAppBar控件可以实现页面头部区域展开、折叠的效果,类似于Android中的CollapsingToolbarLayout。 先看下SliverAppBar实现的效果,效果图如下: ?...SliverAppBar中有一个非常重要的参数flexibleSpace,flexibleSpace是SliverAppBar中展开和折叠区域,flexibleSpace与expandedHeight一起使用...FlexibleSpaceBar( ), ), SliverAppBar其他常用属性说明如下: 属性 说明 leading 左侧控件,通常情况下为"返回"图标...floating 设置为true,向下滑动,即使当前CustomScrollView不在顶部,SliverAppBar也会跟着一起向下出现 pinned 设置为trueSliverAppBar...内容滑出屏幕,将始终渲染一个固定在顶部的收起状态 snap 设置为true手指放开,SliverAppBar会根据当前的位置进行调整,始终保持展开或收起的状态,此效果在floating=true

    1.4K30

    【翻译】MotionLayout实现折叠工具栏(Part 2)

    通过上一篇文章我们了解了基本的折叠工具栏动画行为,使用的是 MotionLayout ,第一次尝试的效果与在 CoordinatorLayout 中使用 CollapsingToolbarLayout...也就是说:随着工具栏折叠动画的开始,图片便立刻发生渐变,一直持续到工具栏完全到达折叠状态: ? 这个问题实际上很容易解决,这要感谢 MotionLayout 的另一个非常重要的特性:关键帧。...目前来说,发生的情况是:图片的透明度在过渡动画还没有达到 60% 之前是不会发生变化的(也就是至少超过一半的折叠状态下不发生变化),接下来会慢慢开始淡出,直到工具栏达到 90% 折叠完全透明。 ?...最终标题文本会走在工具栏折叠动画之前,接着在折叠完全结束的时候直接回落到正确的位置上: ?...但是在目前来说,添加 tools:showPaths="true" 这段代码能够让 MotionLayout 计算并显示这三个被过渡动画所影响的视图控件的轨迹路线:标题文本控件(顶部,中心左侧),工具栏的海滩小排屋图片

    1.7K30

    AppBarLayout和CollapsingToolbarLayout的闲谈

    了解 CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器,对容器中的不同View设置layout_collapseMode折叠模式,来达到不同的折叠效果。...对比scroll和scroll | enterAlways设置,发生向下滚动事件,前者优先滚动Scrolling View,后者优先滚动Child View,优先滚动的一方已经全部滚进屏幕之后,另一方才开始滚动...这里涉及到Child View的高度和最小高度,向下滚动,Child View先向下滚动最小高度值,然后Scrolling View开始滚动,到达边界,Child View再向下滚动,直至显示完全。...也就是说,Child View不会存在局部显示的情况,滚动Child View的部分高度,当我们松开手指,Child View要么向上全部滚出屏幕,要么向下全部滚进屏幕,有点类似ViewPager的左右滑动...属性contentScrim 设置完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。

    1.7K30

    Android开发笔记(一百四十四)高仿支付宝的头部伸缩动画

    再嵌套CollapsingToolbarLayout再嵌套Toolbar的布局。...; 3、CollapsingToolbarLayout嵌套Toolbar,这是为了定义导航栏上方无论何时都要显示的长条区域,其中Toolbar还要定义两个不同的样式布局,用于分别显示展开与收缩状态工具栏界面...这个渐变动画其实可分为两段: 1、导航栏从展开状态向上收缩,头部的各控件要慢慢向背景色过渡,也就是淡入效果; 2、导航栏向上收缩到一半,顶部的工具栏要换成收缩状态下的工具栏布局,并且随着导航栏继续向上收缩...,新工具栏上的各控件也要慢慢变得清晰起来,也就是淡出效果。...; 2、导航栏向下展开到一半,顶部的工具栏要换成展开状态下的工具栏布局,并且随着导航栏继续向下展开,新工具栏上的各控件也要慢慢变得清晰起来,也就是淡出效果。

    1.2K10
    领券