CoordinatorLayout解析(二): 结合CollapsingToolbarLayout实现Toolbar折叠效果
文章目录1 CollapsingToolbarLayout概述2 实现Toolbar折叠效果2.1 编码2.2 效果图Toolbar的折叠和隐藏效果更推荐使用MotionLayout 来实现此文仅为记录CollapsingToolbarLayout的用法。1 CollapsingToolbarLayout概述CollapsingToolbarLayout继承自FrameLayout它的作用是提供一个可以折叠的Toolbar设置它的layout_scrollFlag属性可以控制包含在CollapsingToolbarLayout中的控件如ImageView、Toolbar在响应layout_behavior事件时做出的相应的scrollFlags滚动事件。CollapsingToolbarLayout的源码packagecom.google.android.material.appbar;publicclassCollapsingToolbarLayoutextendsFrameLayout{//...省略其它源码}2 实现Toolbar折叠效果项目结构2.1 编码app模块下的build.gradleplugins{alias(libs.plugins.android.application)}android{namespacecom.example.collapsingtoolbardemocompileSdk36defaultConfig{applicationIdcom.example.collapsingtoolbardemominSdk24targetSdk36versionCode1versionName1.0testInstrumentationRunnerandroidx.test.runner.AndroidJUnitRunner}buildTypes{release{minifyEnabledfalseproguardFilesgetDefaultProguardFile(proguard-android-optimize.txt),proguard-rules.pro}}compileOptions{sourceCompatibility JavaVersion.VERSION_17 targetCompatibility JavaVersion.VERSION_17}}dependencies{implementation libs.appcompat implementation libs.material implementation libs.activity implementation libs.constraintlayout testImplementation libs.junit androidTestImplementation libs.ext.junit androidTestImplementation libs.espresso.core}activity_main.xml:注意AppBarLayout必须是第一个嵌套在CoordinatorLayout里面的子View。?xml version1.0 encodingutf-8?androidx.coordinatorlayout.widget.CoordinatorLayoutxmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:idid/mainandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:fitsSystemWindowstruetools:context.MainActivitycom.google.android.material.appbar.AppBarLayoutandroid:idid/appbarandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:fitsSystemWindowstrueandroid:themestyle/ThemeOverlay.AppCompat.Dark.ActionBarcom.google.android.material.appbar.CollapsingToolbarLayoutandroid:idid/collapsing_toolbarandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:fitsSystemWindowstrueapp:collapsedTitleGravitystartapp:contentScrim?attr/colorPrimaryapp:expandedTitleGravitycenter_horizontal|bottomapp:expandedTitleMarginEnd64dpapp:expandedTitleMarginStart48dpapp:layout_scrollFlagsscroll|exitUntilCollapsedtools:titleCollapsingToolbarLayout标题ImageViewandroid:idid/backdropandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:fitsSystemWindowstrueandroid:scaleTypecenterCropandroid:srcdrawable/mao/androidx.appcompat.widget.Toolbarandroid:idid/toolbarandroid:layout_widthmatch_parentandroid:layout_height?attr/actionBarSizeapp:layout_collapseModepinapp:popupThemestyle/ThemeOverlay.AppCompat.Lighttools:titleToolbar标题//com.google.android.material.appbar.CollapsingToolbarLayout/com.google.android.material.appbar.AppBarLayoutandroidx.recyclerview.widget.RecyclerViewandroid:idid/recyclerViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:scrollbarsnoneapp:layout_behaviorstring/appbar_scrolling_view_behavior//androidx.coordinatorlayout.widget.CoordinatorLayoutCollapsingToolbarLayout属性说明app:contentScrim“?attr/colorPrimary”用来设置CollapsingToolbarLayout收缩后最顶部的颜色。app:expandedTitleGravity“center_horizontal|bottom”表示将此CollapsingToolbarLayout完全展开后title所处的位置默认值为leftbottom。app:collapsedTitleGravity“start”表示当头部的衬图ImageView消失后此title将回归到Toolbar的位置默认值为left。app:layout_scrollFlags“scroll|exitUntilCollapsed”用来设置滚动事件属性里面必须至少启用scroll这个flag这样View才会滚动出屏幕否则将一直固定在顶部。scroll|exitUntilCollapsed能实现折叠效果scroll|enterAlways则实现隐藏效果。此外要定义AppBarLayout与滚动视图之间的联系Design Support Library包含了一个特殊的字符串资源 string/appbar_scrolling_view_behavior它和AppBarLayout.ScrollingViewBehavior相匹配用来通知AppBarLayout何时发生了滚动事件。这个Behavior需要设置在触发事件的View上即布局中的RecyclerView的属性app:layout_behavior“string/appbar_scrolling_view_behavior”。当然AppBarLayout中的子View需要设置app:layout_scrollFlags属性否则就算接收到RecyclerView滚动事件AppBarLayout也不会有什么反应。RecyclerView的item布局文件?xml version1.0 encodingutf-8?androidx.constraintlayout.widget.ConstraintLayoutxmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentImageViewandroid:idid/imgandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:srcmipmap/ic_launcherapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintEnd_toEndOfparentapp:layout_constraintHorizontal_bias0.3app:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparent/TextViewandroid:idid/tvandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textSize30spapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toEndOfid/imgapp:layout_constraintTop_toTopOfparenttools:text提示文字//androidx.constraintlayout.widget.ConstraintLayoutRecyclerViewAdapter.java:packagecom.example.collapsingtoolbardemo;importandroid.content.Context;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.view.ViewGroup;importandroid.widget.TextView;importandroid.widget.Toast;importandroidx.annotation.NonNull;importandroidx.recyclerview.widget.RecyclerView;importjava.util.List;/** * Created by Administrator on 2025/8/13. */publicclassRecyclerViewAdapterextendsRecyclerView.AdapterRecyclerViewAdapter.ViewHolder{privateContextmContext;privateListStringmContents;publicRecyclerViewAdapter(Contextcontext,ListStringcontent){mContextcontext;mContentscontent;}NonNullOverridepublicViewHolderonCreateViewHolder(NonNullViewGroupparent,intviewType){ViewviewLayoutInflater.from(parent.getContext()).inflate(R.layout.my_item,parent,false);returnnewViewHolder(view);}OverridepublicvoidonBindViewHolder(NonNullViewHolderholder,intposition){finalViewviewholder.mView;TextViewtvview.findViewById(R.id.tv);tv.setText(mContents.get(position));view.setOnClickListener(v-Toast.makeText(mContext,mContents.get(position),Toast.LENGTH_SHORT).show());}OverridepublicintgetItemCount(){returnmContents.size();}publicstaticclassViewHolderextendsRecyclerView.ViewHolder{publicfinalViewmView;publicViewHolder(NonNullViewitemView){super(itemView);mViewitemView;}}}MainActivity.java:packagecom.example.collapsingtoolbardemo;importandroid.graphics.Color;importandroid.os.Bundle;importandroidx.activity.EdgeToEdge;importandroidx.appcompat.app.AppCompatActivity;importandroidx.appcompat.widget.Toolbar;importandroidx.core.graphics.Insets;importandroidx.core.view.ViewCompat;importandroidx.core.view.WindowInsetsCompat;importandroidx.recyclerview.widget.DefaultItemAnimator;importandroidx.recyclerview.widget.RecyclerView;importandroidx.recyclerview.widget.StaggeredGridLayoutManager;importcom.google.android.material.appbar.AppBarLayout;importcom.google.android.material.appbar.CollapsingToolbarLayout;importjava.util.ArrayList;importjava.util.List;/** * 参考资料刘望舒.Android进阶之光[M].北京:电子工业出版社2018 */publicclassMainActivityextendsAppCompatActivity{OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);EdgeToEdge.enable(this);setContentView(R.layout.activity_main);/*ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) - { Insets systemBars insets.getInsets(WindowInsetsCompat.Type.systemBars()); v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom); return insets; });*/ToolbartoolbarfindViewById(R.id.toolbar);setSupportActionBar(toolbar);CollapsingToolbarLayoutcollapsingToolbarLayoutfindViewById(R.id.collapsing_toolbar);// 会覆盖Toolbar中的app:title属性//collapsingToolbarLayout.setTitle(多来啊梦);AppBarLayoutappBarLayoutfindViewById(R.id.appbar);appBarLayout.addOnOffsetChangedListener(newAppBarLayout.OnOffsetChangedListener(){OverridepublicvoidonOffsetChanged(AppBarLayoutappBarLayout,intverticalOffset){// 当verticalOffset接近0时表示图片滑动到了顶部此时可以显示标题if(Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange()0){collapsingToolbarLayout.setTitle(哆啦A梦);}else{// 否则隐藏标题collapsingToolbarLayout.setTitle();}}});RecyclerViewrvfindViewById(R.id.recyclerView);rv.setLayoutManager(newStaggeredGridLayoutManager(1,StaggeredGridLayoutManager.VERTICAL));rv.setItemAnimator(newDefaultItemAnimator());ListStringcontentnewArrayList();content.add(djjjj减肥萨达);content.add(发多少);content.add(阿范德萨发);content.add( 额阿帆);content.add(答复);content.add(大师傅);content.add( 阿发);content.add( e网通);content.add( 二二);content.add(阿凡达);content.add(让他无任何);content.add(如图);content.add( 人物);content.add( 人员无人);content.add(热突然);content.add(提问题);content.add( 人特意);content.add( 人特意);content.add( 团任务);content.add(日dsf);content.add(dfas a);content.add(dthtrtr);content.add(rhetr);content.add( yhjteyt);content.add( trey5tr);content.add(ulotu);content.add(rewr5);content.add( iryyte);content.add( ytrry);content.add( uouyrw);content.add(krejhhg);rv.setAdapter(newRecyclerViewAdapter(this,content));}}2.2 效果图折叠Toolbar参考文献[1] 刘望舒.Android进阶之光[M].北京:电子工业出版社2018[2] 《Android进阶之光》博文视点主页关注我Accrual

相关新闻

HoRain云--Node.js 工作机制

HoRain云--Node.js 工作机制

🎬 HoRain 云小助手:个人主页 ⛺️生活的理想,就是为了理想的生活! ⛳️ 推荐 前些天发现了一个超棒的服务器购买网站,性价比超高,大内存超划算!忍不住分享一下给大家。点击跳转到网站。 目录 ⛳️ 推荐 …

2026/11/14 21:42:07 阅读更多 →
Kimi 生成的很多公式,复制到 WORD 中会乱码,我应该怎么做?试试 AI 导出鸭轻松解决

Kimi 生成的很多公式,复制到 WORD 中会乱码,我应该怎么做?试试 AI 导出鸭轻松解决

从Kimi公式乱码到结构化交付:AI生成内容工程化流转的架构洞见 当Kimi输出的LaTeX公式在Word中变成“{\displaystyle\int}”,技术文档工程师的深夜崩溃,本质是AI生成内容(AIGC)与办公套件之间“结构化数据鸿沟”的暴露。…

2026/10/24 8:53:55 阅读更多 →
【CanMV K210】编程基础 GPIO 输入输出与高低电平控制

【CanMV K210】编程基础 GPIO 输入输出与高低电平控制

GPIO 是 CanMV K210 硬件编程中最基础的控制能力。LED、蜂鸣器、按键、继电器、红外避障、震动检测等实验,都会围绕 GPIO 的输入、输出和高低电平展开。 学完本篇后,后续 LED、按键、触摸开关、倾斜传感器、红外避障、继电器和蜂鸣器实验都会更容易理解。…

2026/10/31 1:19:06 阅读更多 →

最新新闻

Electron桌面应用开发实战:从环境搭建到打包发布全流程

Electron桌面应用开发实战:从环境搭建到打包发布全流程

做前端这些年,我大部分时间都在跟浏览器标签页打交道,直到第一次把桌面应用跑起来,才发现原来自己一直被限制在地址栏和刷新按钮围起来的框框里。Electron这个词,最开始是在某段时间频繁出现在同事的讨论里,一个用HTML…

2026/11/14 5:13:29 阅读更多 →
滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

简介:亚太天能T109滑盖智能锁产品说明书是一份PDF格式的官方技术文档,主要面向智能锁安装人员、终端用户及售后维护者,帮助快速掌握产品安装、配置与常见故障处理。全包仅1个PDF文件,大小4.37MB,内容结构清晰&#xff…

2026/11/14 5:13:29 阅读更多 →
PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

上个月我在调试一台高速AGV的驱动系统,整车要求空载跑到8m/s,电机转速已经拉到额定点,驱动器的输出电压也顶到了母线电压极限附近。再往上踩速度指令,转速纹丝不动,三相电流反而开始震荡。那会儿我的第一反应就是&…

2026/11/14 5:13:29 阅读更多 →
C++核心知识点:从内存管理到STL的实战指南

C++核心知识点:从内存管理到STL的实战指南

C 这门语言我前前后后折腾了十几年,用它写过嵌入式驱动、做过游戏服务端,也搭过基础组件库。每次看到新人一头扎进"C 核心知识点"这个搜索词,我其实挺感慨的——这门语言的难点从来不是语法多,而是知识点之间的耦合太深…

2026/11/13 22:08:41 阅读更多 →
T109滑盖智能锁怎么装?安装调试与故障排查全攻略

T109滑盖智能锁怎么装?安装调试与故障排查全攻略

简介:亚太天能T109滑盖智能锁产品说明书以PDF格式发布,适合智能锁用户、安装人员与售后维修人员阅读。内容围绕T109系列指纹密码刷卡锁展开,先介绍前面板、后面板、锁体、机械钥匙、电池盒盖等部件名称与功能,再给出完整安装步骤&…

2026/11/14 2:41:37 阅读更多 →
LLM知识降熵:从信息垄断到理解权下放

LLM知识降熵:从信息垄断到理解权下放

你有没有过这种经历:翻开源码注释、论文摘要或者一份专业报告,每个字都认识,连在一起却像天书。想找人聊聊,身边要么没人懂,要么懂的懒得跟你解释。后来我试着把同一段内容丢给一个大语言模型,几秒钟之后&a…

2026/11/14 5:13:29 阅读更多 →

日新闻

周新闻

月新闻