比如:在CoordinatorLayout中使用AppBarLayout,如果AppBarLayout的子View(如ToolBar、TabLayout)标记了app:layout_scrollFlags...滚动事件,那么在CoordinatorLayout布局里其它标记了app:layout_behavior的子View(LinearLayout、RecyclerView、NestedScrollView...等)就能够响应(如ToolBar、TabLayout)控件被标记的滚动事件。...enterAlwaysCollapsed 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度 exitUntilCollapsed...,如果设置了ViewPager,那么ViewPagerAdapter中的getPageTitle()方法返回的就是Tab上的标题 ViewPager设置代码: ViewPager mViewPager
RecyclerView 上的任何滚动事件都将触发 AppBarLayout 或任何包含在其中的 view 的布局发生变化。...snap:使用这一选项将由其决定在 view 只有部分减时所执行的功能。如果滑动结束时 view 的高度减少的部分小于原始高度的 50%,那么它将回到最初的位置。...在一个使用了内部有 items 列表的 ViewPager 的 fragment 和一个父 activity 之间使用协调时,你想像这里描述的那样在ViewPager 上添加 app:layout_behavior...第三方滚动和视差效果库 除了使用上述的 CoordinatorLayout,还可以查看这些流行的第三方库来实现 ScrollView, ListView, ViewPager 和RecyclerView...然而,它似乎不影响滚动,如这篇博文所述。
遵循Material 风格,包含在 support Library中,结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的效果 CoordinatorLayout...结合ViewPager ? 结合ViewPager的视觉特差 ? ---- AppBarLayout 它是继承与LinearLayout的,默认 的 方向 是Vertical ?...必须作为CoordinatorLayout的直接子View,否则它的大部分功能将不会生效,如layout_scrollFlags等。...其实相对于前 一个例子,只是把 摆放RecyclerView 的位置替换成ViewPager而已,为了有页面导航器的效果,再使用 TabLayout而已,而TabLayout 在我们滑动的时候最终会停靠在...- 对于AppBarLayout,我们主要 讲解了这个属性app:layout_scrollFlags,设置不同 的属性我们可以在滚动的时候显示不同 的效果 - 对于CollapsingToolbarLayout
AppBarLayout的子布局有5种滚动标识(上面代码CollapsingToolbarLayout中配置的app:layout_scrollFlags属性): scroll:所有想滚动出屏幕的view...,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端...在NestedScrollView的名字中其实就可以看出他的作用了,Nested是嵌套的意思,而ToolBar基本需要嵌套使用。...RecyclerView的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变。...可以使用的其他flag有: enterAlways: 一旦向上滚动这个view就可见。
那么Android5.0也同时给出了相应的解决方案,即推出MaterialDesign库,通过该库中的AppBarLayout控件,对Toolbar加以包装,从而实现顶部工具栏的动态变化效果。...对于大家关心的额外功能,则主要有以下几点: 1、支持响应主体页面的滑动行为,即在主体页面上移或者下拉时,AppBarLayout能够捕捉到主体页面的滚动操作; 2、AppBarLayout捕捉到滚动操作之后...下面是AppBarLayout结合RecyclerView实现的工具栏向上滚动效果截图: ?...NestedScrollView多出来的功能,也就是跟AppBarLayout配合使用,以便触发Toolbar的滚动行为,你可以把它当作是兼容了Android5.0新特性的增强版ScrollView。...3、大家都知道ViewPager是左右滚动的翻页视图,用户通过手势把页面横向拉动一段距离后松开,系统会判断接下来是自动左滚还是自动右滚,总之最后用户看到的是一个完整的页面,而不是拉到一半的页面。
和RecyclerView结合实现下拉刷新,以及RecyclerView的数据适配器RecyclerView.Adapter的用法,还有RecyclerView中item的点击事件的实现方法; 卡片式CardView...-- 用来放Drawerlayout中的内容, 这里使用NavigationView来实现类似Google pLay中的侧滑栏效果, 必须在build.gradle中添加compile...将AppBarLayout放在CoordinatorLayout中,就可以实现滚动效果。...enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。...-- 使用RecyclerView需要在build.gradle中添加 compile 'com.android.support:recyclerview-v7
思路 先说说实现的思路吧,上面的效果大致可以分成两个部分: 1、Tab向上滚动到顶部时悬浮 Tab滚动后悬浮在顶部嘛~~ 这效果使用CoordinatorLayout + AppBarLayout就能轻松实现...具体的使用可以参考Android 详细分析AppBarLayout的五种ScrollFlags (CoordinatorLayout、AppBarLayout的详细用法我就不多说了) 然后,只要在...Java代码中为ViewPager添加几个列表Fragment就能看到以下的效果(注意:列表不可以是ListView,需要用RecyclerView) ?...这时候只要在MainActivity中对AppBarLayout的滚动进行监听即可。...Tips 问题:使用CoordinatorLayout时,滚动不流畅问题 解决方案:可以写个Behavior添加到AppBarLayout中。
我们将会在后续的文章来详细再介绍这些Layout 和 Widgets的使用,今天我们的主角不是他们。...我们的Demo中用到的组件包括: AppBarLayout + Tab Layout 实现 图1中的Tab视图 Drawer Layout + Navigation View 实现图3中的左侧菜单 CoordinatorLayout...我们用Support Library实现起来就非常的方便,下面是这几个组件的结构,ViewPager与AppBarLayout同级。 ?...这里不太想给大家展示太多关于UI层的代码,如果感兴趣的同学可以直接到我的GitHub里面去下载。我们主要看一下C#如何在ViewPager里面放视图同时与TabLayout关联起来。...DrawerLayout + NavigationView 图3中的左侧菜单,主流APP必备,也是只要几行代码就可以了。 ? 在NavigationView的使用上,有两个属性需要注意一下。
中,结合AppbarLayout, CollapsingToolbarLayout,Toolbar等可产生各种炫酷的效果。...AppBarLayout:是一个vertical的LinearLayout封装控件,其子View应通过setScrollFlags或者xmL中的app:layout_scrollFlags来设置提供他们的变化状态...AppBarLayout下方与之并列的滑动控件有比如RecyclerView,NestedScrollView(与AppBarLayout同属于CoordinatorLayout的子View),这些并列的...内部的子View一般都要加上属性:app:layout_collapseMode="",常用值是parallax(视差滚动),pin(固定)。...在此注意AppBarLayout如果设置了layout_scrollFlags="snap",但是Viewpager没有设置layout_behavior,View一样会自动隐藏,让人误以为child与
目前还只是推出了第一个预览版,我们可以直接引入来使用了: implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01' 我们先来看看有哪些功能和使用上的变化...); 熟悉RecyclerView的同学都知道,SnapHelper用于辅助RecyclerView在滚动结束时将Item对齐到某个位置。...和数据状态恢复功能的RecyclerView.Adapter,具体实现可以参看源码。...使用 通过android:orientation来指定滚动方向 viewpager2.widget.ViewPager2 android:id="@+id/viewpager2...小结 viewpager2利用recyclerview来实现viewpager的功能,无疑使使其可扩展性大大提升,代码也变得更优雅简洁,使用起来也更灵活。
RecyclerView 上面的 View 被滑动到界面之外,看不见,这时候的用户体验是比较差的 即结构如下面的时候 在Activity中的相关解决方法 于是我查找了相关的资料,在Activity中完美解决...或者ListView的,一般有一下几种实现方式 使用我们上述提高的ScrollView里面嵌套ViewPager和RecyclerView,这种实现方式需要自己解决View滑动事件的冲突,同时还有我在上述提高的在...Fragment中存在的问题 使用listView的addHeaderView来实现,或者是通过多种不同的item来实现 使用RecyclerView添加headerView来实现,或者复用多种不同的item...关于RecyclerView如何添加headerView可以参考鸿洋大神的这一篇博客 Android 优雅的为RecyclerView添加HeaderView和FooterView 使用SupportLibrary...题外话 在这篇博客的最后提高的实现轮播图+list列表的几种实现形式,刚开始是不想写的,后面因为ScrollView里面嵌套ViewPager和RecyclerView在fragment中RecyclerView
”基本实现两个功能: 作为顶层布局 调度协调子布局 CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。...的介绍 AppBarLayout 是一个竖直排列的线性布局,它实现了很多Material Design风格app bar的设计概念,换句话说就是滚动手势。...,它可以控制包含在CollapsingToolbarLayout中的控件在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier...TabLayout一般都是配合ViewPager一起来使用。
对于这种效果,上面是轮播图的,下面是RecyclerView或者ListView的,一般有一下几种实现方式 - 使用我们上述提高的ScrollView里面嵌套ViewPager和RecyclerView...,这种实现方式需要自己解决View滑动事件的冲突,同时还有我在上述提高的在Fragment中存在的问题 - 使用listView的addHeaderView来实现,或者是通过多种不同的item来实现...- 使用RecyclerView添加headerView来实现,或者复用多种不同的item来实现。...关于RecyclerView如何添加headerView可以参考鸿洋大神的这一篇博客 Android 优雅的为RecyclerView添加HeaderView和FooterView - 使用SupportLibrary...题外话 在这篇博客的最后提高的实现轮播图+list列表的几种实现形式,刚开始是不想写的,后面因为ScrollView里面嵌套ViewPager和RecyclerView在fragment中RecyclerView
AppBarLayout一般用于赋予Toolbar(不限于Toolbar)滚动行为,AppBarLayout是一个垂直的LinearLayout,实现了Material Design中app bar的scrolling...AppBarLayout的子View应该声明想要具有的“滚动行为”,这可以通过layout_scrollFlags属性或是setScrollFlags()方法来指定。...AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作,为了让AppBarLayout能够知道何时滚动其子View, 我们还应该在CoordinatorLayout...布局中提供一个可滚动View,如:RecyclerView 布局文件 使用,否则没效果 Toolbar完全展开时不遮挡滑动控件,消失效果变为折叠成最小高度,其他和scroll相同 ?
当我们引入RecyclerView的时候,恰好是压死骆驼的最后一根稻草,故不得不采用其他方案来代替RecyclerView 和 CollapsingToolbarLayout实现的折叠效果。...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。...,其他CollapsingToolbarLayout内的子view做相应的改变如(视差)或pin(不变)。...题外话:直接使用RecyclerView折叠动画不平滑问题 在stackoverflow上找到如下解决方案,大致是由于google官方留的Behavior坑。...题外话3 23.2.0中在CoordinatorLayout中使用Toolbar ,toolbar无法与顶部对齐,即顶部存在垂直间距。
从效果图,我们可以看到 在 open 状态下,我们向上滑动 ViewPager 里面的 RecyclerView 的 时候,RecyclerView 并不会向上移动(RecyclerView 的滑动事件交给...当 Tab 滑动到顶部的时候,我们向上滑动 ViewPager 里面的 RecyclerView 的时候,RecyclerView 可以正常向上滑动,即此时外部容器没有拦截滑动事件。...需要实现的效果为:在页面状态为 open 的时候,向上滑动 Header 的时候,整体向上偏移,ViewPager 里面的 RecyclerView 向上滑动的时候,消费其滑动事件,并整体向上移动。...---- Header 部分的实现 Header 部分实现的两个关键点在于 在页面状态为 open 的时候,ViewPager 里面的 RecyclerView 向上滑动的时候,消费其滑动事件,并整体向上移动...在第一个关键点的实现上,我们是通过自定义 Behavior 来处理 ViewPager 里面 RecyclerView 的移动的,那我们要怎样监听整个 Header 的滑动了。
接下来使用AppBarLayout两步解决前面的覆盖问题: 第一步将Toolbar嵌套到AppBarLayout中, 第二步给RecyclerView指定一个布局行为(app:layout_behavior...至此AppBarLayout已成功解决RecyclerView遮挡Toolbar的问题,但是这里还并没有体现AppBarLayout中应用的MaterialDesign设计理念, 其实,当RecyclerView...又会根据当前滚动的距离情况,做出消失或者重新出现的反应; 这其实也是MaterialDesign中的一项重要设计思想,因为当用户在向上滚动RecyclerView的时候,其注意力肯定是在RecyclerView...当用户需要操作Toolbar上的功能时,只需要轻微向下滚动,Toolbar就会重新出现。...当然了,像这种功能,如果是使用ActionBar的话,那就完全不可能实现了,TooIbar的出现为我们提供了更多的可能。
: 接下来,我们必须使用一个容器布局:AppBarLayout来让Toolbar响应滚动事件。...RecyclerView的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变。...AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性,就可以在RecyclerView滚动事件发生的时候被触发: .support.design.widget.AppBarLayout...可以使用的其他flag有: enterAlways: 一旦向上滚动这个view就可见。 ?...CoordinatorLayout的工作原理是搜索定义了CoordinatorLayout Behavior 的子view,不管是通过在xml中使用app:layout_behavior标签还是通过在代码中对
京东首页 这是京东的首页,忽略顶部和顶部,大致理解视图结构就是:最外层为多布局的RecyclerView,最后一个item是tabLayout+ViewPager,ViewPager的每个fragment...京东首页 可见,在向上滑动页面时,当tabLayout滑动到顶部时,外层RecyclerView停止滑动,此时tabLayout即为吸顶状态,接着会 滑动ViewPager中的内层RecyclerView...作者最后建议使用RecyclerView多布局。 但其实在真实应用中,可能 头部 和 列表 的数据来自不同的接口,当列表的数据请求失败时要展示缺省图,但头部还是会展示。...:此时还获取不到ViewPager内fragment的RecyclerView,需要在加载ViewPager后 fragment可见时 传入 } private RecyclerView...套viewPager, viewPager内的fragment中 也有RecyclerView,处理外层、内层 RecyclerView的嵌套滑动问题,类似淘宝、京东首页。
热门壁纸数据处理 八、ViewPager2显示数据 1. 布局使用ViewPager2 2. BaseQuickAdapter使用 3. PictureRepository 4....显示数据 九、源码 前言 在日常的开发中,最常用于展示数据的形式就是列表,你会看到各种各样的列表,比如图片列表、视频列表,联系人列表,而在RecyclerView出来之前列表的开发是使用ListView...,而现在绝大多数开发者都使用RecyclerVIew了,优势就不说了,都已经用了这么多年了,那么RecyclerView在MVVM中要怎么使用呢?...这个图片展示的效果就很不错,现在我们已经掌握了怎么在MVVM中使用RecyclerView。...首先在Constant中增加两个常量,用于控制热门壁纸的请求和使用方式。
领取专属 10元无门槛券
手把手带您无忧上云