首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Material Design 实战 之第四弹 —— 卡片布局

其中, scroll 表示当RecyclerView向上滚动时,Toolbar会跟着一起向上滚动并实现隐藏; enterAlways 表示当RecyclerView向下滚动时...,Toolbar会跟着一起向下滚动并重新显示; snap 表示当Toolbar还没有完全隐藏或显示时,会根据当前滚动的距离,自动选择是隐藏还是显示。...其中, scroll表示当RecyclerView向上滚动时,Toolbar会跟着一起向上滚动并实现隐藏; enterAlways表示当RecyclerView向下滚动时,Toolbar会跟着一起向下滚动并重新显示...运行程序可见, 随着我们 向上滚动RecyclerView会Toolbar消失掉; 向下滚动RecyclerView,Toolbar又会重新出现; 滚动到Toolbar的一半时松开手指,Toolbar...又会根据当前滚动的距离情况,做出消失或者重新出现的反应; 这其实也是MaterialDesign中的一项重要设计思想,因为当用户在向上滚动RecyclerView的时候,其注意力肯定是在RecyclerView

2.1K10

嵌套滑动通用解决方案--NestedScrollingParent2

京东首页 可见,在向上滑动页面时,当tabLayout滑动到顶部时,外层RecyclerView停止滑动,此时tabLayout即为吸顶状态,接着会 滑动ViewPager中的内层RecyclerView...这是可行的,但是在tabLayout滑动到顶部后,必须抬起手指,重新滑动,内层RecyclerView才能继续滑动。这是为啥呢?...时先滑动根布局,使得头部隐藏或显示,然后再交给RecyclerView滑动。...,大于想要滚动的距离,内层自行处理 }else { //内层已滚动的距离,小于想要滚动的距离,那么内层消费一部分,到顶后,剩的外层滑动...然后根据tabLayout的位置以及滑动的方向,决定是滑动外层RecyclerView还是滑内层,以及滑动多少。

3.8K31
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android开发笔记(一百三十五)应用栏布局AppBarLayout

    同理,拉动AppBarLayout也有类似情况,当松开手指后,AppBarLayout得判断要不要继续向上收缩,或是继续向下展开。...如果仅仅声明scroll,没有声明其它标志,则滚动效果如下图所示: ? 2、enterAlways : 头部与主体先一起滚动,头部滚到位后,主体继续向上或者向下滚。...具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。然后头部固定不动,主体继续向上滚动。 向下滚动:头部固定不动,主体先向下滚动,一直滚到主体全部拉出。然后头部向下展开。...具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。然后头部与主体先一起滚动,头部滚到位后,主体继续向上。 向下滚动:头部与主体先一起滚动,一直滚到头部折叠的最小高度。...然后主体向下滚动,滚到位后头部继续向下展开。 5、snap : 在用户手指松开时,系统自行判断,接下来是全部向上滚到顶,还是全部向下展开。

    2K40

    项目需求讨论- 自定义滚轮(第二波新实现)

    大家好,在前段时间我写过用ScrollView实现了自定义滚轮,但是在循环的效果不是特别好。(这次文章底部附上了Demo。O(∩_∩)O~) 项目需求讨论-自定义滚轮 ?...那现在就是我们要让他滚动到一定距离,自动调整自己的位置,来正好显示某个Item项,而不会出现某个Item在界面上显示一半。...---- 滚动后调整距离让RecyclerView 滚到特定的position位置: 我简单介绍,就只分二种情况来谈下(正好滑到一个标准的距离,让Item正好完全显示这种情况我就去除了): 顶部的Item...但是结果是不会滚动,原来这个方法当我们的Position + 1已经出现在屏幕上了。不管是不是第一个,不管处于屏幕的哪个位置,这个RecyclerView就不会滚动。我忍不住又一句 WHF!!。...无非是二种情况(假设一个ItemHeight为100): 已经有80滚动在外面了。我就通过ScrollBy 再向上过给它滚动20到外面。 已经有20滚动在外面了。

    1.1K20

    Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout

    不过,Android在实现展开效果的时候,并非直接让Toolbar展开或收缩,而是另外提供了CollapsingToolbarLayout,通过该布局包裹Toolbar,从而控制标题栏的展开和收缩行为。...2、enterAlways : 头部与主体先一起滚动,头部滚到位后,主体继续向上或者向下滚。 同时声明scroll和enterAlways,滚动效果如下图所示: ?...具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。然后头部固定不动,主体继续向上滚动。 向下滚动:头部固定不动,主体先向下滚动,一直滚到主体全部拉出。然后头部向下展开。...具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。然后头部与主体先一起滚动,头部滚到位后,主体继续向上。 向下滚动:头部与主体先一起滚动,一直滚到头部折叠的最小高度。...5、snap : 在用户手指松开时,系统自行判断,接下来是全部向上滚到顶,还是全部向下展开。 同时声明scroll和snap,滚动效果如下图所示: ?

    3.3K30

    仿电商商品分类的思路实现

    ,左边的列表item对应的type并没有显示在界面的话,我们还需要左边的列表进行一个滚动到对应的item的位置上,知道思路了,然后我们开始敲代码 布局代码实现 1、 主布局是两个列表,这两个列表我通过LineaLayout...判断处理: ①、如果左边列表的第一个item的position大于右边列表滚动的position的话,我们需要左边的列表进行向上滚动处理,这个处理很简单,只需要让左边的列表scrollToPositionWithOffset...到右边列表的position, ②、如果左边列表的最后一个item的position小于右边列表滚动的position的话,我们需要左边的列表进行向下滚动处理,这个处理跟上面一样,拿到右边的position...,或左边第一个item是不是大于右边滑动的位置 */ if (leftManager.findFirstVisibleItemPosition...* 判断右边是否滑动到最后一个item,是的话,也将左边移动到最后一个item * canScrollVertically(1)表示是否能向上滚动

    1.5K20

    淘宝首页Bug!嵌套滑动及NestedScroll

    Android NestedScrolling机制完全解析 带你玩转嵌套滑动 一、项目实例--电商首页 1、嵌套滑动的问题点 看懂了以上文章后,现在来分享一下项目中的问题。...可以清楚看到: 京东:滑动很顺畅,没有停滞的情况,tab到顶部后就 紧接着 滑动内部商品列表了。整个过程手指是连续拖动的,没有抬起。 淘宝:在tab滑到顶部后,手指继续拖动,但商品流是不能滑动的。...所以,根据我们的问题,在向上滑动内部RecyclerView时,如果tab没到顶就让parent消费事件,且滑动外部RecyclerView;到顶了,就滑内部RecyclerView。...相对的, 向下滑动内部RecyclerView时,如果还能滑就滑内部RecyclerView;如果已经滑到顶部就让parent去滑动外部RecyclerView。...主要关注调用scrollBy时滚动的是哪个列表,滚动了多少。

    1.5K20

    【Android】手把手教你上滑解锁的效果

    Scroller类中有computeScroll方法,它能实现流畅滚动的原因是,它将初始位置和目标滑动位置之间的距离分成N份依次调用scrollTo方法,通过postInvalidate在每次调用scrollTo...阻尼滑动效果 从图中可以看到鼠标原来的位置在“更多精彩”图标的顶部,随着向上拖动,鼠标开始偏离图标顶部,就好像一根橡皮筋,拉得越开,需要用更大的力,阻尼滑动就给我们这样的感觉。...锁屏状态禁止向下滑动 通过重写onTouchListener方法,记录ACTION_DOWN的位置,然后记录ACTION_MOVE的位置,如果判断它有向下滑动的倾向,则在ACTION_MOVE里,将其复位...float curY = event.getY(); // 获取移动的y轴距离 float deltaY = curY - mDownY; // 阻止视图在原来位置时向下滚动...问题与改进 问题出现 基于上述的扩展,在RecyclerView的item里的控件添加点击事件后,发现推荐页无法按预期显示隐藏:无论滑动多短的距离甚至是向上滑动,只要是在屏幕下方滑动,推荐页总是会自己显示出来

    2.7K20

    写给初学者的Jetpack Compose教程,Lazy Layout

    比如上述例子中使用的LazyColumn,它就是用于在垂直方向上滚动的可复用列表。而LazyRow则是用于在水平方向上滚动的可复用列表。...rememberLazyListState 我们在使用RecyclerView编写滚动列表的时候,除了实现最基础的滚动功能之外,通常还会让程序随着列表的滚动进行一些额外事件的响应。...因此最好的设计方案就是,当用户向下滚动列表时,我们就认为用户不再需要和Fab按钮交互,此时将按钮进行隐藏。 下面具体看一下如何在Compose中实现这种效果。...由于嵌套的滚动列表方向并不一致,因此这种情况是完全合法的,运行效果如下: 再来看第二种合理的嵌套滚动,即使内层和外层的列表滚动方向一致,只要内层列表在滚动方向上的尺寸是固定的,那么Compose对此仍然是支持的...,用错了直接就会崩溃,不信你可以试一试。

    65210

    Material Design — App bars: bottomApp bars: bottom

    滚动 滚动时, bottom app bar 可以出现或消失: 向下滚动隐藏 bottom app bar, 如果有FAB,则它会脱离 bar 并保留在屏幕上。...向上滚动显示 bottom app bar,如果有FAB,则重新附着 FAB。 Bottom app bar 可以改变其边缘的形状,例如凹口以容纳FAB。...---- 位置 导航 Bottom app bar 可显示 navigation menu icon 以打开 bottom navigation drawer,但该 bar 本身不包含任何导航操作(例如向上导航至主屏幕或一个关闭图标...以下项目受益于特定的展示位置: ·将一个 navigation menu control 放置在 bottom app bar(为了可达性) ·放置一个 overflow menu control 作为尾部操作...·将操作(如搜索)置于整个 app 的一致位置 ·在 top app bar 中放置破坏性操作,例如“删除” ?

    2.4K80

    自定义 Behavior,实现嵌套滑动、平滑切换周月视图的日历

    一种是通过建立依赖关系,一种是通过 RecyclerView 或 NextedScrollView 的嵌套滑动机制,后面都会讲到。...= 0; } onNestedPreScroll 这个方法是在准备滚动之前调用的,它带有滚动偏移量 dy。...滚动时,日历也向上滚动,最多到当前选中日期那一行,滚动范围和当前选中日期有关。...列表的滚动范围则是固定的,最多向上移动 5 倍的日历行高,也就是从 0 到 -calendarLineHeight 5。...惯性滑动 上面效果可以看出一个问题,当滑动到一半的时候松手,应该要恢复到完整视图的位置。这里包含了,快速滑动后惯性滑动到指定位置的效果,和没有快速滑动时,往就近的指定位置滑动这两种效果。

    3.4K10

    Floating Action Button-Android M新控件

    CoordinatorLayout帮助我们协调它所包含的子view之间的交互,这一点在我们后面讲如何根据滚动的变化让按钮动画隐藏与显示的时候有用。...实际上只需要指定一个布局文件,就可以看到效果了,只不过是这时候的FAB是固定在屏幕指定位置的,而无法随之滚动,不着急,下面会介绍如何设置成可滚动的FAB 属性介绍 FAB 默认使用应用主题中设置的浮起色作为按键背景...ScrollAwareFABBehavior(Context context, AttributeSet attrs) { super(); } /** * 处理垂直方向上的滚动事件...向下移动 FAB消失,向上移动时,FAB出现。 ---- embedding(嵌入)-floatingactionbutton-in-header 效果图 ?...关联起来,这样按钮就会随着list的向下滚动而隐藏,向上滚动而重现: ListView listView = (ListView) findViewById(android.R.id.list); FloatingActionButton

    1.5K40

    自定义 behavior - 完美仿 QQ 浏览器首页,美团商家详情页

    open 状态下,我们向上滑动 ViewPager 里面的 RecyclerView 的 时候,RecyclerView 并不会向上移动(RecyclerView 的滑动事件交给 外部的容器处理,被被全部消费掉了...当 Tab 滑动到顶部的时候,我们向上滑动 ViewPager 里面的 RecyclerView 的时候,RecyclerView 可以正常向上滑动,即此时外部容器没有拦截滑动事件。...部分向上滑动, RecyclerView 向上滑动。...当我们向下滑动的时候,header 并不会随着滑动,只会滑动 content 部分的 recyclerView 第三部分 search 部分:当我们向上滑动的时候,Search 部分会随着滑动,最终停留在固定的位置...这一次写这一篇博客,是因为在项目中要做类似的效果。刚开始,真的没什么思路。但清楚得记得两年前写过类似的文章,具体实现原理早已忘光。我查看了两年前的博客,整理了一下思路,将代码搬到项目中,发现了一些坑。

    1.3K40

    【Android应用开发】RecycleView API 翻译 (文档翻译)

    Recycle (view): 该View之前曾用于显示指定适配器位置的数据,那么这个View可能会被放置在一个缓存中,以便可以在之后被复用去显示同样类型的数据.上述操作可以跳过布局文件的初始化加载或创建...你可以依赖这些位置, 这些位置与用户当前在屏幕上看到的位置是一致的.例如, 如果你在屏幕上有一个项目列表, 用户要求使用第五个项目元素, 你可以使用这些方法, 因为这些方法对应的位置就是用户看到的位置....或 位置 变化的 监听器, 该方法用于移除这些次要的监听器. int computeHorizontalScrollExtent() 在水平范围中, 计算水平滚动条的水平范围...() 计算 横向滚动条 在水平方向上的滚动范围. int computeVerticalScrollExtent()...在垂直范围内, 计算垂直滚动条翻越的范围. int computeVerticalScrollOffset() 在垂直方向范围中, 计算垂直方向上的 垂直滚动条

    1.4K40

    Android:让你明明白白的使用RecyclerView——SnapHelper详解

    简介 RecyclerView在24.2.0版本中新增了SnapHelper这个辅助类,用于辅助RecyclerView在滚动结束时将Item对齐到某个位置。...在onFling()方法中判断当前方向上的速率是否足够做滚动操作,如果速率足够大就调用snapFromFling()方法实现滚动相关的逻辑。...在snapFromFling()方法中会创建一个SmoothScroller,并且根据速率计算出滚动停止时的位置,将该位置设置给SmoothScroller并启动滚动。...可以看到该效果是一个类似Gallery的横向列表滑动控件,很明显可以用RecyclerView来实现,而滚动后的ItemView是对齐RecyclerView的左边缘位置,这种对齐效果当仍不让就使用了SnapHelper...该方法的作用就是在寻找需要滚动到哪个位置的,不在这里还能在哪里?!

    6.2K40

    恢复 RecyclerView 的滚动位置

    您可能在开发过程中遇到过这种情况,在 Activity/Fragment 被重新创建后,RecyclerView 丢失了它之前保有的滚动位置信息。...通常这种情况发生的原因是由于异步加载 Adapter 数据,且数据在 RecyclerView 需要进行布局的时候尚未加载完成,导致 RecyclerView 无法恢复到之前的滚动位置。...恢复至原有滚动位置 有好几种方法可以用来恢复 RecyclerView 至正确的滚动位置,您可能已经在实际项目中用到了这些方法。...其中最好的一种方法是将数据提前缓存在内存、ViewModel 或 Repository 中,然后确保在第一次布局传入之前,将缓存的数据设置到 Adapter 中去。...如果根据您的项目实际情况无法采用这种方法,那也可以使用其他的方法,只是要么比较复杂 (比如避免在 RecyclerView 中设置 Adapter,但这样又有可能导致像 header 等 item 的显示问题

    1.5K10

    MaterialDesign之FloatingActionButton

    相信很多小伙伴在实际开发中都有这样的需求,一个列表滚动到某一位置,然后有一个按钮,回到顶部?很常见的一个效果,在以前我们一般都使用一个图片,放到那里。...关于FloatingActionButton在项目中的使用,基本上就有以下这么多东西,这些都是我能想到的。...监听滑动控件的滚动事件(我就是这么实现的,因为当你把design设置成25.1.0的时候,相应的过渡动画会出现很多的问题,所以这里建议这么去弄)这里的代码很简单,就是监听了一个滚动的方向和控件的显示状态...+ dy); if (dy > 0 && mFab.getVisibility() == View.VISIBLE) { //向下滑动...= View.VISIBLE) { //向上滑动,并且控件为飞显示 mFab.show();

    71130
    领券