Android折叠式工具栏的实现（CollapsingToolbar的应用）

最新推荐文章于 2025-09-08 14:10:47 发布

原创最新推荐文章于 2025-09-08 14:10:47 发布 · 938 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #java #安卓

Android 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Android应用中使用AppBarLayout实现折叠工具栏效果。通过在activity_main.xml中添加AppBarLayout，并在其内部配置CollapsingToolbarLayout和Toolbar组件，再配合NestedScrollView实现文字随工具栏折叠联动滚动的效果。

先添加依赖库的代码在build.gradle中，由于依赖库代码一直更新，还请直接去官网查找。
在activity_main.xml文件中添加AppBarLayout

<android.support.design.widget.AppBarLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content">
	</android.support.design.widget.CoordinatorLayout>

在AppBarLayout布局中添加一个CollapsingToolbarLayout并在该布局中添加一个ImageView组件用于显示展开后得工具栏图片，然后再添加一个Toolbar组件用于显示工具栏

<android.support.design.widget.CollapsingToolbarLayout
	android:id="@id/collapsingToolbarLayout"
	app:layout_scrollFlags="scroll|exitUntilCollapsed">
	<ImageView
	id="main.backdrop"
	scaleType="centerCrop">
	<!--上面一行代码的翻译：标度类型=“中心裁剪”-->
	<android.support.v7.widget.Toolbar
	id="toolbar"
	app:layout_collapseMode="pin">

上面最后一行代码的解释：
ImageView 组件中的app:layout_collapseMode="parallax属性代表在折叠的过程中图片产生错位偏移的视觉效果。
而ToolBar组件中app:layout+collapseMode="pin"属性表示在折叠的过程中该组件的位置始终保持不变。

在AppBarLayout布局下添加一个NestedScrollView(嵌套滚动布局)然后在该组件中添加一个TextView组件来实现滚动现实的文字

<android.support.v4.widget.NestedScorllView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
lw="mp"
lh="wc">
	<TextView
	lw="m_p"
	lh="w_c"
	text="随你便">

NestedScrollView组件不仅像ScrollVewi那样使用滚动的方式查看屏幕以外的数据，还增加了相应滚动事假的功能，由于CoordinatorLayout已经可以相应滚动事件了，所以该布局中需要使用NestedScrollView或者是recyclerView这样的滚动组件折叠工具栏进行联动。该组件中的app:layout_behavior="@string/appbar_scrolling_view_behavior"属性这里是指NestedScrollView组件只可保持在AppBarLayout的下面，改变AppBarLayout内容位置是NestedScrollView组件时刻保持在AppBarLayou的下面，改变AppBarLayout内容位置时NestedScrollView组件可以一起滚动，起到联动的作用。

public class MainActivity extends AppCompatActivity{
	@Override
	protected void onCreate(Bundle saveInstanceState){
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		Toolbar toolbar =  findViewById(R.id.toolbar);//获取ToolBar
		setSupportActionBar(toolbar);//设置工具栏为ToolBar
		CollapsingToolbarLayout ctl = findViewById(R.id.collapsingToolbarLayout);
		ctl.setTitle("这是标题文字");
		ctl.setExpandedTitleColor(Color.RED);//未折叠时标题文字的颜色
		ctl.setCollapsedTitleTExtColor(Color.WHITE);//折叠后的标题文字颜色
		ctl.setContentScrimColor(getResources().getColor(R.color.colorPrimary));
	}
}