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