Toolbar滑动效果实现总结

最新推荐文章于 2018-12-20 18:00:37 发布
最新推荐文章于 2018-12-20 18:00:37 发布
阅读量931 收藏 1
点赞数 1
分类专栏： android开发 文章标签： UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nishitouzhuma/article/details/51584841
版权


如上面效果:顶部的带Avengers标题的Toolbar ,在下面RecyclerView下滑的过程中显示,如果将下面的RecyclerView上滑,Toolbar又自动隐藏.
实现上面的效果布局如下:
<android.support.design.widget.CoordinatorLayout
    xmlns:tools=" http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        >
        <android.support.v7.widget.Toolbar
            android:id="@+id/activity_avengers_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:elevation="8dp"
            android:minHeight="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="Avengers"
            />
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/activity_avengers_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
</android.support.design.widget.CoordinatorLayout>
这里主要涉及到3个控件:CoordinatorLayout,AppBarLayout,和RecyclerView
CoordinatorLayout是一个增强型的FrameLayout。
它的作用有两个作用  
                             1.作为一个布局的跟布局  
                             2.为子视图之间相互协调手势效果的一个布局
我们来看看CoordinatorLayout是怎么来协调这两个子视图手势操作的。
1.为了达到上面效果图的手势动画效果，我们必须做如下设置，通过app:layout_scrollFlags=”scroll|enterAlways” 属性来确定哪个组件是可滑动的
设置的layout_scrollFlags有如下几种选项：
  • scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
  • enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。
  • enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
  • exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。
我们上面的布局中 给Toolbar设置了app:layout_scrollFlags属性，因此，Toolbar是可以滚动出屏幕，且向下滚动有可以出现。
2.为了使得Toolbar可以滑动，我们必须还得有个条件，就是CoordinatorLayout布局下包裹一个可以滑动的布局，比如 RecyclerView，NestedScrollView(经过测试，ListView，ScrollView不支持)具有滑动效果的组件。
并且给这些组件设置如下属性来告诉CoordinatorLayout，该组件是带有滑动行为的组件，然后CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>
总结： 为了使得Toolbar有滑动效果，必须做到如下三点：
  1. CoordinatorLayout必须作为整个布局的父布局容器。
  2. CoordinatorLayout包裹一个可以滑动的布局
  3. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
  4. 给你的可滑动的组件，也就是RecyclerView 或者 NestedScrollView 设置如下属性：
          app:layout_behavior="@string/appbar_scrolling_view_behavior"


如上面效果:顶部的带Avengers标题的Toolbar ,在下面RecyclerView下滑的过程中显示,如果将下面的RecyclerView上滑,Toolbar又自动隐藏.
实现上面的效果布局如下:
<android.support.design.widget.CoordinatorLayout
    xmlns:tools=" http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        >
        <android.support.v7.widget.Toolbar
            android:id="@+id/activity_avengers_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:elevation="8dp"
            android:minHeight="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="Avengers"
            />
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/activity_avengers_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
</android.support.design.widget.CoordinatorLayout>
这里主要涉及到3个控件:CoordinatorLayout,AppBarLayout,和RecyclerView
CoordinatorLayout是一个增强型的FrameLayout。
它的作用有两个作用  
                             1.作为一个布局的跟布局  
                             2.为子视图之间相互协调手势效果的一个布局
我们来看看CoordinatorLayout是怎么来协调这两个子视图手势操作的。
1.为了达到上面效果图的手势动画效果，我们必须做如下设置，通过app:layout_scrollFlags=”scroll|enterAlways” 属性来确定哪个组件是可滑动的
设置的layout_scrollFlags有如下几种选项：
  • scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
  • enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。
  • enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
  • exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。
我们上面的布局中 给Toolbar设置了app:layout_scrollFlags属性，因此，Toolbar是可以滚动出屏幕，且向下滚动有可以出现。
2.为了使得Toolbar可以滑动，我们必须还得有个条件，就是CoordinatorLayout布局下包裹一个可以滑动的布局，比如 RecyclerView，NestedScrollView(经过测试，ListView，ScrollView不支持)具有滑动效果的组件。
并且给这些组件设置如下属性来告诉CoordinatorLayout，该组件是带有滑动行为的组件，然后CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>
总结： 为了使得Toolbar有滑动效果，必须做到如下三点：
  1. CoordinatorLayout必须作为整个布局的父布局容器。
  2. CoordinatorLayout包裹一个可以滑动的布局
  3. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
  4. 给你的可滑动的组件，也就是RecyclerView 或者 NestedScrollView 设置如下属性：
          app:layout_behavior="@string/appbar_scrolling_view_behavior"


一叶扁舟江上游
关注
专栏目录
Android基础学习总结（七）——简单实现新闻选项卡滑动效果(CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager大合成）
.
01-29 1万+
引言 曾经看到网易、头条新闻就想自己实现一下效果，结果花费了不少时间，基础不牢，地动山摇，现在一步步深入学习Android后发现实现一下也不难，现在就简单记录下自己的实现思路和方法，供自己以后参考。 实现思路 首先能看到的应该是三个部分Toolbar+TabLayout+ViewPager,再细分下去，ViewPager包含了一个Recyclerview，里面有很多itemview来显示
Android透明到白色滑动渐变,Android中Toolbar随着ScrollView滑动透明度渐变效果实现...
weixin_39927378的博客
05-26 138
Android中Toolbar随着ScrollView滑动透明度渐变效果实现一.思路：监听ScrollView的滑动事件 不断的修改Toolbar的透明度二.注意1.ScrollView 6.0以前没有scrollView.setOnScrollChangeListener(l)方法 所以要自定义ScrollView 在onScrollChanged()中监听2.ScrollView 6.0(2...
toolBar的两种实现方式
wsllxf的专栏
05-07 414
刚接触SWT/JFace的东西,有些看过了还是记下来的好,toolBar的实现通常有两种方式：1、使用ToolBar和ToolItem；2、使用ToolBarManager 、ActionContributionItem、Action组合；??先介绍第一种方式：使用ToolBar和ToolItempackage menu.test;impor
extjs grid添加滚动条
crazyxingjc的专栏
06-28 1万+
var userGrid = new Ext.grid.GridPanel({ frame:true, loadMask:true, tbar:toolbar, store:userStore, stripeRows:true, viewConfig:{ autoFill:true //forceFit:true }, 。。。。。。 }）； new Ext.
ToolBar上添加滚动条和下拉框
12-07
在ToolBar上实现添加滚动条和下拉框，并且实现了两者的关联。
Android高级UI开发（十八）监听列表的滑动从而隐藏或显示Toolbar与Fab浮动按钮
gaoxiaoweiandy的专栏
12-20 3262
周末好，今天我们来讲一个动画效果的实现，当上滑列表时让Toolbar（工具栏）与FAB浮动按钮（实质还是一个按钮）隐藏，当下滑时又显示回来。实现这个动画有两种方法，今天我们先讲第一种最常规的做法，其实第二种方法才是正道，它更符合Google Material Design的规范，敬请期待下一篇Android高级进阶（十九），但是我们今天还是要执意讲解第一种方法的目的就是为正道铺路...
Toolbar基本使用及Toolbar+ListView实现滑动变色
07-29
总结：通过上述步骤，我们不仅可以了解Toolbar的基本使用，如设置标题、图标以及自定义样式，还可以实现一个高级功能——结合ListView实现滑动变色效果。这种效果可以提升用户的交互体验，让应用看起来更加生动和...
Android Support Library 标题栏(Toolbar)滚动效果实现方法
08-31
总结来说，通过`CoordinatorLayout`、`AppBarLayout`、`Toolbar`以及正确的`layout_scrollFlags`和`layout_behavior`属性设置，我们可以实现Android Support Library中的标题栏滚动效果。这种效果不仅增强了用户体验...
用CoordinatorLayout 实现 toolbar 隐藏效果
04-07
总结来说，`CoordinatorLayout`和`AppBarLayout`是Android开发中实现复杂布局和交互效果的重要工具，它们提供了丰富的定制选项和动画效果，使得`Toolbar`的隐藏效果得以轻松实现，提升了应用的用户体验。通过熟练...
android仿淘宝，滑动渐变效果实现
03-07
3. **渐变效果实现**：有了滑动距离，我们就可以更新需要渐变的元素的属性。对于透明度渐变，可以使用`alpha`属性，通过设置`view.setAlpha(value)`来改变透明度，`value`范围为0（完全透明）到1（完全不透明）。...
工具条（Ext.Toolbar）
方逸涛的专栏
09-21 1万+
工具条（Ext.Toolbar） 当在工具条中同时出现Menu和Element时，会导致Menu失灵。 1、Ext.Toolbar的常用方法： addButton() addElement() addField() addFill() addSeparator() addText() add() 2、普通工具条 Js代码 Ext.onReady(function(){
ExtJs 4.x 学习小记：Ext.TabPanel滚动条及分页栏不在页面最底端的处理
bdmh的专栏
04-03 6488
场景： 动态增加Ext.TabPanel页签，页签的url指向一个jsp文件，该jsp文件中引用js文件创建GridPanel及分页栏，jsp文件中还包含一个div元素，作为Grid的父容器。 运行后，发现两个问题 1、表格尺寸超过页面大小时，不显示滚动条 2、分页栏始终紧随Grid，而不在页面最下方 处理方法： 首先让jsp文件中的div元素充满body 动态增加Ext.Ta
Ext.toolbar.Toolbar工具栏
weixin_34417200的博客
04-13 210
1、Ext.toolbar.Toolbar主要配置项  Ext.toolbar.Toolbar配置 配置项参数类型说明 enableOverflow Boolean 设置为true则自动为工具栏添加一个下拉按钮，用于显示超过工具栏范围的按钮 vertical Boolean 设置为true则显示一个垂直的工具栏，默认为false  工具栏常用元素 ...
android滑动toolbar 很炫的标题栏
热门推荐
阳龙的移动互联天地
03-24 11万+
作为一名程序员，要不断的学习新的技术。不断汲取新的知识。 CoordinatorLayout 坐标局AppBarLayout 用于替换早起的actionbar CollapsingToolbarLayout 可折叠的toolbar Toolbar 标题栏通过以上组件 写一个简单的可折叠的标题栏 先看三张图片 通过这个三张图可以看出来，标题栏的大小会随着recyclerview 的滑动伸
Android 监听手指滑动，Toolbar颜色渐变
会飞的小驴粪蛋
09-22 1499
Step 1：布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-...
WebView 实现 NestedScrollingChild
Hanks软件库
09-02 3307
承接上文 NestedScrollingParent 实现复杂交互效果 ，在 NestedScroll 这一套流程中，NestedScrollingChild 不用考虑怎么去通知父布局如何滚动，只需要负责自己的事情：产生滚动事件，并将事件共享出去，产生 fling 事件，共享 fling 。NestedScrollingParent 简称 NP NestedScrollingChild 简称 NC
Android下拉上滑显示与隐藏Toolbar另一种实现
【博客地址迁移到】：https://zhengxiaoyong.com
08-26 1万+
关于介绍就不说了，不使用嵌套滑动情况下，另一种实现，当然还可以用design包下的CoordinatorLayout.Behavior。比较简单直接添代码：继承RecyclerView.OnScrollListener重写onScrolled方法，同时定义两个抽象方法供我们处理隐藏和显示事件public abstract class RecyclerViewScrollListener extend
CoordinatorLayout配合AppBarLayout,Toolbar和TabLayout的使用,滑动隐藏标题头
小矮人的博客
01-05 1945
CoordinatorLayout配合AppBarLayout,Toolbar和TabLayout的使用,滑动隐藏标题头 xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/
Android App框架搭建：toolbar与container实现导航
通过设置`ActionBarDrawerToggle`，可以在Activity之间实现导航栏的展开和折叠，比如在抽屉式导航中常见的下拉菜单效果。 3. 项目跳转容器（container.xml）： `container.xml`是项目中管理Fragment跳转的关键组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值