概述
Material Design 是一种 Google 推出的、受到 Google Now 和 Android Lollipop 等产品启发的设计语言，广泛应用于 Google 的各种产品中。其中，折叠导航栏是 Material Design 中非常重要的一个概念，它具有很好的用户体验和功能性，有助于提高应用程序的易用性。本文将详细介绍如何在 Material Design 中实现可滚动折叠导航栏，以及相应的代码实现。
实现过程
第一步：添加依赖
在项目的 build.gradle 文件中添加以下依赖：
dependencies {
compile 'com.android.support:design:23.4.0'
}这样就能引入 Material Design 的支持库。
第二步：准备布局
在布局文件中添加一个 CollapsingToolbarLayout 和一个 Toolbar ，其中 CollapsingToolbarLayout 是实现折叠效果的核心控件， Toolbar 则是显示标题和操作的工具栏。
// www.javascriptcn.com code example
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>注意，CollapsingToolbarLayout 中必须包含一个可折叠的头部视图，例如这里的 ImageView，并通过 layout_collapseMode 属性设置折叠模式为 parallax，还需要设置标题栏的颜色 contentScrim 和滚动标志 layout_scrollFlags。
Toolbar 则需要设置 layout_collapseMode 属性为 pin，这样在向上滚动时即可粘在屏幕顶部，同时还可以通过 setTitle() 和 setSubtitle() 方法设置标题和副标题。
第三步：设置菜单项
在代码中设置菜单项，例如：
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}这里使用了 onCreateOptionsMenu() 方法，可以根据需要使用 onOptionsItemSelected() 方法处理菜单项的点击事件。
第四步：设置滚动监听
处理折叠导航栏的滚动事件，当向上滚动时，逐渐折叠导航栏，同时显示 Toolbar，向下滚动时则恢复正常模式。在实现过程中我们需要添加一个 OnOffsetChangedListener() 监听器来处理这些事件：
// www.javascriptcn.com code example
final AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
boolean isShown = true;
int scrollRange = -1;
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
if (scrollRange + verticalOffset == 0) {
collapsingToolbar.setTitle("Title");
isShown = true;
} else if (isShown) {
collapsingToolbar.setTitle("");
isShown = false;
}
}
});这里我们记录了 scrollRange 的值，在滚动时根据折叠距离设置标题栏的显示状态和标题内容。
示例代码
// www.javascriptcn.com code example
public class MainActivity extends AppCompatActivity {
private CollapsingToolbarLayout collapsingToolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("");
final AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
boolean isShown = true;
int scrollRange = -1;
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
if (scrollRange + verticalOffset == 0) {
// 折叠后显示的标题
collapsingToolbar.setTitle("Title");
isShown = true;
} else if (isShown) {
// 未折叠时标题为空
collapsingToolbar.setTitle("");
isShown = false;
}
}
});
// 添加菜单项
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
}
}// www.javascriptcn.com code example
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>指导意义
本文介绍了在 Material Design 中实现可滚动折叠导航栏的过程和代码实现，旨在帮助开发者更好地理解和应用 Material Design 设计语言，提高应用程序的易用性和用户体验。同时，折叠导航栏也是一种非常实用的设计概念，可以用于各种类型的应用程序中，如社交、新闻、电商等，为用户提供更加优秀的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d62c38a941bf7134bd83a4