AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

安卓应用栏的滚动效果

2017-10-18 1667
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文讲的是安卓应用栏的滚动效果，我想把自己的经验分享给大家，其实理解和使用滚动的高度，弹性空白的大小调整，以及固定特定的元素可以很简单。
本文讲的是安卓应用栏的滚动效果，

应用栏包含四个主要部分。它们在滚动效果中扮演中重要角色，分别是：

  • 状态栏

  • 工具栏

  • 标签栏／搜索栏

  • 弹性空白

一个有状态栏、导航栏、标签／搜索栏以及弹性空白的例子。图片来自 material.io

应用栏滚动效果丰富了页面内容的显示方式。

我想把自己的经验分享给大家，其实理解和使用滚动的高度，弹性空白的大小调整，以及固定特定的元素可以很简单。

应用栏有以下几种滚动的效果，

  1. 标准的工具栏滚动

  2. 标签滚动

  3. 弹性空白滚动

  4. 填充了图片的弹性空白滚动

  5. 弹性空白中重叠的内容滚动

如果你想直接看代码，这里是 GitHub 的仓库链接。

基本设置

在我们开始深入了解各种类型的滚动效果前，我们需要清楚基本设置和实现，

我们需要使用设计支持库来实现 应用栏 的滚动效果。这个库提供了很多原质化设计的部件。

在应用的 build.gradle 里添加：

dependencies {  
    compile 'com.android.support:design:X.X.X'
}

使需要此功能的 Activity 类继承 android.support.v7.app.AppCompatActivity。

public class MainActivity extends AppCompatActivity {

在 layout 的 xml 文件中，我们要把 CoordinatorLayout 放在最外层。在 AppBarLayout 里添加 工具栏，并在CoordinatorLayout 里添加 AppBarLayout。

CoordinatorLayout 为其附属视图（例如 FloatingButtons,ModalSheets 和 SnackBar）提供合适的滚动以及原质动画。

<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:orientation="vertical">

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary">

<android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"/>

</android.support.design.widget.AppBarLayout>

...

</android.support.design.widget.CoordinatorLayout>

就这样，我们完成了基本的实现。接下来我们需要了解一些决定了滚动效果的标志属性。

标准的工具栏滚动效果

  • 随着内容往下翻 滚动出屏幕 并且当用户往回翻时重新出现。

－ 当内容向下滚动时，工具栏 停留在顶部

带有工具栏的应用栏和内容一起滚动或出现。

为了达到这个目的，除了基本的代码实现，我们还需要：

在 Toolbar 添加 app:layout_scrollFlags

<android.support.v7.widget.Toolbar  
    ...
    app:layout_scrollFlags="scroll|enterAlways|snap"/>

scroll －随着内容一起滚动。

enterAlways －当内容拉到最上面，应用栏会马上出现。

snap －当 应用栏 在内容滚动停止时只显示出一半，这个属性会让 应用栏 根据工具栏的滚动部分的大小全部隐藏或者全部显示。

一旦 app:layout_scrollFlags 被添加进 应用栏，内容视图（NestedScrollView 或者 RecyclerView）就需要app:layout_behavior 标签。

<android.support.v4.widget.NestedScrollView  
    ...
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

这两个标签以及基本设置就足以让带有工具栏的应用栏滚动起来了。我们可以尝试不同的 app:layout_scrollFlags. 属性值来看看不同的效果。

下面是对属性的安卓文档解释。

标签栏的滚动效果

  • 当 工具栏滚动消失后，标签栏停留在顶部

  • 整个 工具栏停留在顶部，当用户反向滚动时，标签栏重现，并且当充分的反向滚动后，工具栏也重现。

  • 工具栏和标签栏随着内容的滚动消失。当用户反向滚动时，标签栏重现，并且当充分的反向滚动后，工具栏也重现。

有标签栏的应用栏的不同滚动效果。

要达到这种效果，我们需要在 AppBarLayout 中添加 TabLayout，并且为 TabLayout 提供 layout_scrollFlags 属性。只需要修改 layout_scrollFlags 的属性值就足够让我们玩转上面例子里的滚动效果了。

<android.support.design.widget.AppBarLayout  
    ...>
    <android.support.v7.widget.Toolbar
        .../>
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways|snap"/>
</android.support.design.widget.AppBarLayout>

弹性空白的滚动效果

  • 弹性空白收缩到只剩下工具栏。在导航栏中标题收缩至 20sp。当用户滚动至顶端，弹性空白和标题又拉长到原来的位置。

  • 整个应用栏随着滚动消失。当用户回滚，工具栏重新出现并固定在顶部。当用户回滚到底时，弹性空白和标题又拉长到原来的位置。

可以滚动的弹性空白

为了得到应用栏的弹性空白，我们需要在 CollapsingToolbarLayout 里嵌套 ToolBar 标签。这意味着 CoordinatorLayout在最上层， 然后 AppBarLayout, CollapsingToolbarLayout, ToolbarLayout 按照顺序摆放在里面。

我们要为 AppBarLayout 添加高度并且为 CollapsingToolbarLayout 指定 app:layout_scrollFlags 属性值。

同时，我们把 app:layout_collapseMode=”pin” 添加进 Toolbar 里。

<android.support.design.widget.AppBarLayout  
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.v7.widget.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>

exitUntilCollapsed －这个属性会让弹性空白滚动下来，当它随着内容滚动回到原来的位置。

加载了图片的弹性空白滚动效果

  • 与上面弹性空白的效果类似。当滚动图片时，图片在被推上去的过程中会有小动画 并且颜色变成应用的主色调。

  • 当回滚的时候， 基色褪去， 图片拉下来时有一个小动画。

图片的视差滚动

下面的改动与弹性空白的实现非常相似。

  • ImageView 要加进 CollapsingToolbarlayout。

  • AppBarLayout 里图片高度固定为 200dp。

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary">
    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Title">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_collapseMode="parallax"/>
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        app:layout_collapseMode="pin"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ToolBarStyle" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

弹性空白中重叠内容的滚动效果

  • 在这样的滚动效果中，有弹性空白的应用栏会被放置在页面内容的下面。一旦内容开始滚动，应用栏会滚动得比内容快直到它不再与页面视图内容重叠。一旦页面内容滚动到顶部，应用栏会从页面内容的上方出来并且平滑地在下层滚动。

  • 整个应用栏可以随着页面内容滚动至消失在屏幕上，并且在回滚的时候重现。

  • 这个效果中没有标签的位置。

与内容重叠的弹性空白的滚动效果

在 NestedScrollView 或者 RecyclerView 中使用 app:behaviour_overlapTop 就可以达到这种效果。我们还要定义CollapsingToolbarLayout 的高度。

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary">
    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="172dp"
        app:contentScrim="?attr/colorPrimary"
        app:titleEnabled="false"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Title">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        app:layout_collapseMode="pin"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ToolBarStyle" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:behavior_overlapTop="100dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    ...
</android.support.v4.widget.NestedScrollView>

同样地，我们可以通过 JAVA 代码动态指定 scrollFlags 属性值。

希望这篇文章可以帮你们实现应用栏的滚动效果。

这篇文章原来发表在我的博客。

示例应用的代码可以通过 GitHub 下载。

如果你喜欢这篇文章，请在 Medium 和 Twitter 上关注我。你也可以在 LinkedIn 上找到我。



原文发布时间为：2017年2月3日

本文来自云栖社区合作伙伴掘金，了解相关信息可以关注掘金网站。
文章标签：
Android开发
关键词：
Android应用
玄学酱
目录
相关文章
土木林森
|
2月前
|
开发框架 前端开发 Android开发
Flutter 与原生模块（Android 和 iOS）之间的通信机制，包括方法调用、事件传递等，分析了通信的必要性、主要方式、数据传递、性能优化及错误处理，并通过实际案例展示了其应用效果，展望了未来的发展趋势
本文深入探讨了 Flutter 与原生模块（Android 和 iOS）之间的通信机制，包括方法调用、事件传递等，分析了通信的必要性、主要方式、数据传递、性能优化及错误处理，并通过实际案例展示了其应用效果，展望了未来的发展趋势。这对于实现高效的跨平台移动应用开发具有重要指导意义。
土木林森
221 4
ShaFaChuang-36210
|
4月前
|
IDE Java 开发工具
深入探索安卓应用开发：从环境搭建到第一个"Hello, World!"应用
本文将引导读者完成安卓应用开发的初步入门，包括安装必要的开发工具、配置开发环境、创建第一个简单的安卓项目，以及解释其背后的一些基本概念。通过一步步的指导和解释，本文旨在为安卓开发新手提供一个清晰、易懂的起点，帮助读者顺利地迈出安卓开发的第一步。
ShaFaChuang-36210
238 65
肥猪肥猪-17824
|
4月前
|
存储 Java Android开发
探索安卓应用开发：构建你的第一个"Hello World"应用
【9月更文挑战第24天】在本文中，我们将踏上一段激动人心的旅程，深入安卓应用开发的奥秘。通过一个简单而经典的“Hello World”项目，我们将解锁安卓应用开发的基础概念和步骤。无论你是编程新手还是希望扩展技能的老手，这篇文章都将为你提供一次实操体验。从搭建开发环境到运行你的应用，每一步都清晰易懂，确保你能顺利地迈出安卓开发的第一步。让我们开始吧，探索如何将一行简单的代码转变为一个功能齐全的安卓应用！
肥猪肥猪-17824
53 2
请看我回答~
|
1月前
|
JSON Java API
探索安卓开发：打造你的首个天气应用
在这篇技术指南中，我们将一起潜入安卓开发的海洋，学习如何从零开始构建一个简单的天气应用。通过这个实践项目，你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者，这篇文章都将为你提供一个清晰的路线图和实用的代码示例，帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程，打造属于你自己的第一个安卓应用吧！
请看我回答~
62 14
肥猪肥猪-17824
|
1月前
|
Java Linux 数据库
探索安卓开发：打造你的第一款应用
在数字时代的浪潮中，每个人都有机会成为创意的实现者。本文将带你走进安卓开发的奇妙世界，通过浅显易懂的语言和实际代码示例，引导你从零开始构建自己的第一款安卓应用。无论你是编程新手还是希望拓展技术的开发者，这篇文章都将为你打开一扇门，让你的创意和技术一起飞扬。
肥猪肥猪-17824
63 13
游客qf4jmczx4xu2y
|
1月前
|
搜索推荐 前端开发 测试技术
打造个性化安卓应用：从设计到开发的全面指南
在这个数字时代，拥有一个定制的移动应用不仅是一种趋势，更是个人或企业品牌的重要延伸。本文将引导你通过一系列简单易懂的步骤，从构思你的应用理念开始，直至实现一个功能齐全的安卓应用。无论你是编程新手还是希望拓展技能的开发者，这篇文章都将为你提供必要的工具和知识，帮助你将创意转化为现实。
游客qf4jmczx4xu2y
49 2
mrq4nk6ni2neg
|
1月前
|
Java Android开发 开发者
探索安卓开发：构建你的第一个“Hello World”应用
在安卓开发的浩瀚海洋中，每个新手都渴望扬帆起航。本文将作为你的指南针，引领你通过创建一个简单的“Hello World”应用，迈出安卓开发的第一步。我们将一起搭建开发环境、了解基本概念，并编写第一行代码。就像印度圣雄甘地所说：“你必须成为你希望在世界上看到的改变。”让我们一起开始这段旅程，成为我们想要见到的开发者吧！
mrq4nk6ni2neg
38 0
我不是游客20240119
|
2月前
|
JSON Java Android开发
探索安卓开发之旅：打造你的第一个天气应用
【10月更文挑战第30天】在这个数字时代，掌握移动应用开发技能无疑是进入IT行业的敲门砖。本文将引导你开启安卓开发的奇妙之旅，通过构建一个简易的天气应用来实践你的编程技能。无论你是初学者还是有一定经验的开发者，这篇文章都将成为你宝贵的学习资源。我们将一步步地深入到安卓开发的世界中，从搭建开发环境到实现核心功能，每个环节都充满了发现和创造的乐趣。让我们开始吧，一起在代码的海洋中航行！
我不是游客20240119
46 2
请看我回答~
|
2月前
|
存储 搜索推荐 Java
打造个性化安卓应用：从设计到实现
【10月更文挑战第30天】在数字化时代，拥有一个个性化的安卓应用不仅能够提升用户体验，还能加强品牌识别度。本文将引导您了解如何从零开始设计和实现一个安卓应用，涵盖用户界面设计、功能开发和性能优化等关键环节。我们将以一个简单的记事本应用为例，展示如何通过Android Studio工具和Java语言实现基本功能，同时确保应用流畅运行。无论您是初学者还是希望提升现有技能的开发者，这篇文章都将为您提供宝贵的见解和实用的技巧。
请看我回答~
47 1
肥猪肥猪-17824
|
2月前
|
搜索推荐 开发工具 Android开发
打造个性化Android应用：从设计到实现的旅程
【10月更文挑战第26天】在这个数字时代，拥有一个能够脱颖而出的移动应用是成功的关键。本文将引导您了解如何从概念化阶段出发，通过设计、开发直至发布，一步步构建一个既美观又实用的Android应用。我们将探讨用户体验(UX)设计的重要性，介绍Android开发的核心组件，并通过实际案例展示如何克服开发中的挑战。无论您是初学者还是有经验的开发者，这篇文章都将为您提供宝贵的见解和实用的技巧，帮助您在竞争激烈的应用市场中脱颖而出。
肥猪肥猪-17824
49 4