Material Design 实现 Android 应用 Toolbar 隐藏动画-FunTeaLearn Online Web Tutorials

作为一名前端工程师，我们不仅要熟悉前端技术，还需要了解移动端的设计规范和实现方法。Material Design 是 Google 推出的移动端设计规范，它提供了一套统一的设计语言和交互模式，让用户能够更加顺畅地使用应用。本文将介绍如何使用 Material Design 实现 Android 应用 Toolbar 隐藏动画。

什么是 Material Design？

Material Design 是 Google 推出的一套移动端设计规范，它倡导使用现代化的设计语言和交互模式，提供一致的用户体验。Material Design 的设计基础是材料（Material），强调元素之间的真实关系和物理属性，例如光影、深度和动画等。Material Design 提供了一套统一的设计语言和交互模式，让用户能够更加顺畅地使用应用。

Material Design 提供了许多组件和样式，包括按钮、卡片、浮动操作按钮、动画等，这些组件可以帮助我们快速搭建一个符合 Material Design 规范的应用。

Android 应用 Toolbar 隐藏动画

Toolbar 是 Android 应用中常用的一个组件，它可以用来替代传统的 Action Bar，在应用中提供导航、搜索、设置等功能。在实际开发中，我们可能需要在某些情况下隐藏 Toolbar，例如滚动时隐藏、进入全屏模式时隐藏等。这时，我们可以使用 Material Design 提供的动画效果来实现 Toolbar 的隐藏和显示。

实现步骤

1. 添加依赖

在项目的 build.gradle 文件中添加以下依赖：

implementation 'com.google.android.material:material:1.2.1'

2. 布局文件中添加 Toolbar

在布局文件中添加 Toolbar 组件，例如：

// www.javascriptcn.com code example
<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>

3. 实现隐藏动画

在 Activity 中实现隐藏动画，例如：

// www.javascriptcn.com code example
private AppBarLayout mAppBarLayout;
private Toolbar mToolbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mAppBarLayout = findViewById(R.id.appbar);
    mToolbar = findViewById(R.id.toolbar);

    // 设置滚动监听
    mAppBarLayout.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) {
                // Toolbar 完全隐藏
                isShown = false;
                hideToolbar();
            } else if (!isShown) {
                // Toolbar 显示
                isShown = true;
                showToolbar();
            }
        }
    });
}

// 隐藏 Toolbar
private void hideToolbar() {
    mToolbar.animate().translationY(-mToolbar.getHeight()).setInterpolator(new AccelerateInterpolator(2));
}

// 显示 Toolbar
private void showToolbar() {
    mToolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2));
}

4. 运行效果

运行应用后，当向上滚动时，Toolbar 将会隐藏，向下滚动时，Toolbar 将会显示。

示例代码

完整的示例代码可以在 GitHub 上获取。

总结

本文介绍了如何使用 Material Design 实现 Android 应用 Toolbar 隐藏动画，通过添加依赖、布局文件中添加 Toolbar、实现隐藏动画等步骤，让 Toolbar 在滚动时能够自动隐藏和显示。Material Design 提供了一套统一的设计语言和交互模式，可以帮助我们快速搭建一个符合规范的应用。希望本文能够对大家有所帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/65737994d2f5e1655dc96917

Material Design 实现 Android 应用 Toolbar 隐藏动画