那么Android5.0也同时给出了相应的解决方案,即推出MaterialDesign库,通过该库中的AppBarLayout控件,对Toolbar加以包装,从而实现顶部工具栏的动态变化效果。...对于大家关心的额外功能,则主要有以下几点: 1、支持响应主体页面的滑动行为,即在主体页面上移或者下拉时,AppBarLayout能够捕捉到主体页面的滚动操作; 2、AppBarLayout捕捉到滚动操作之后...RecyclerView是其中一个特工,它可用来替代ListView和GridView;替代ScrollView的则另有其人,它便是嵌套滚动视图NestedScrollView,在Android5.0之后的...1、AppBarLayout的滚动依赖于主体视图的滚动,与主体视图相对应的,可将AppBarLayout称作头部视图。既然一个页面分为头部和主体两部分,那么就存在谁先滚谁后滚的问题了。...2、AppBarLayout内部的高度也可能变化,比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout,有关可折叠工具栏布局的详细介绍参见《Android开发笔记(一百三十六)可折叠工具栏布局
用户界面之旅 七、在物理安卓设备上测试 AndroidStudio 应用 八、AndroidStudio 代码编辑器基础 九、安卓架构概述 十、安卓应用的剖析 十一、安卓视图绑定概述 十二、了解安卓应用和活动生命周期...十三、处理安卓活动状态变化 十四、安卓活动状态变化示例 十五、保存和恢复安卓活动的状态 十六、了解安卓视图、视图组和布局 十七、AndroidStudio 布局编辑器工具指南 十八、安卓约束布局指南...二十八、使用安卓手势检测器类检测常见手势 二十九、在安卓上实现自定义手势识别 三十、安卓片段介绍 三十一、在 AndroidStudio 使用片段——一个例子 三十二、现代安卓应用架构和 Jetpack...十八、安卓视图绑定概述 十九、了解安卓应用和活动生命周期 二十、处理安卓活动状态变化 二十一、安卓活动状态变化示例 二十二、保存和恢复安卓活动的状态 二十三、了解安卓视图、视图组和布局 二十四、AndroidStudio...虽然我们追求卓越,但我们并不要求您做到十全十美,因此请不要担心因为翻译上犯错——在大部分情况下,我们的服务器已经记录所有的翻译,因此您不必担心会因为您的失误遭到无法挽回的破坏。
先上个图,说明一下自定义行为所支持的画面: ? 从这张女孩照镜子的动画可以看到,当拖动左边女孩头像时,右边镜子里的头像也随之靠近或者远离,颇似现实生活中的镜像运动。...如果按照普通的实现方式,此种照镜子的动画效果,得给两个视图分别注册监听器,然后在A视图移动之际,同时触发B视图的移动行为。...也许读者对Behavior类还有些陌生,不过之前的几篇博文已经涉及到了部分知识,比如在博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》中,就提到给主页面的视图节点添加属性app...具体实现之时,则需做三处修改: 1、首先自定义一个图像控件,通过手势可以拖动该控件; 2、其次自定义一个Behavior,指定存在依赖关系的两种视图,在layoutDependsOn方法中规定两种视图的类型...,在onDependentViewChanged方法中定义重物视图配合人力拉曳时的运动行为; 3、在布局文件中放置定滑轮、人力视图、重物视图,并给重物视图指定layout_behavior属性,说明重物视图的协调动作
这个小库演示了如何将可折叠工具栏添加到您的应用程序中,并带有可移动和扩展的头像,类似于在Telegram Android应用中所看到的。...国外非常流行的一种设计~ 温馨提示:Collapsing Avatar Toolbar 的更多使用请直接看下方的代码例子片段,或查看官方文档。...expandedTextSize" > 3、 <android.support.design.widget.CoordinatorLayout ... > </android.support.design.widget.AppBarLayout
可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,...这里要明确一点,Toolbar本身是页面顶部的工具栏,其上没有本页面的其它控件了,如果Toolbar被拉下来了,那Toolbar上面的空白该显示什么?...上述属性在代码中的设置方法如下所示: setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。...既然二者原本不是一家,那么就得有新的属性用于区分它们内部的行为,新属性在CollapsingToolbarLayout的子视图节点上声明,说明如下: app:layout_collapseMode :...指定子视图(通常是Toolbar)的折叠模式。
然后继续通过 CollapsingToolbarLayout 进一步增强 Toolbar 的视觉效果。如果有人对可折叠的的 Toolbar 还不了解,那么请看下面的示例。 ?...Toolbar 先滑动,等到视图可见范围高度为 collapsed 指定高度时它会静止,等到 NestedScrollView 内容完全显示在 Toolbar 下方时它再一起滑动,它的动作是 3 段式的...大家可以参考下 ViewPager 是怎么滑动的,只不过 ViewPager 是水平方向上的,AppBarLayout 中的内容是垂直方向上的行为。...Collapsing title 可折叠的标题 我们新建一个 Activity,简单试验一下,Collapsing Title 是怎么样一个概念。...> 在布局文件中添加一个图标,然后监听 AppBarLayout 的滑动来改变自身的透明度。
其中在 res/layout 目录下的布局中包含了 BottomNavigationView,而在 res/layout-w720dp 目录下的布局中则包含了 NavigationRailView。...在程序运行过程中,我们可以通过 Kotlin 的安全调用操作符 (?.) 来根据当前的设备配置确定呈现给用户哪一个视图。...binding.slidingPaneLayout.open() } 正如上面的代码中调用 slidingPaneLayout.open() 那样,在窄屏幕设备上,滑入显示详情窗格已经成为了导航过程中的用户可见部分...这些独立的网格卡片是定义在 res/layout-w840dp 下的 备用布局,数据绑定处理信息如何与视图绑定,以及卡片如何响应点击,所以除了不同样式下的差异之外,不需要实现太多内容。...随着更多的平板和可折叠设备在用户中普及,请确保在这些不同尺寸和屏幕比例中测试您的应用,这样一些用户就不会觉得自己被 "冷落" 了。
所以,CollapsingToolbarLayout 的使用一定离不开 AppBarLayout 和 Toolbar,并且作为 AppBarLayout 的直接子视图使用。...关于CollapsingToolbarLayout的属性在官网上可以查到,这里我只介绍案例中我们常用的几个属性:title标题,布局展开时放大显示在图片底部,布局折叠时缩小显示在Toolbar左侧。...注意,没有设置这个属性时,默认使用Toolbar的标题;statusBarScrim顶部视图折叠状态下,状态栏的遮罩色。通常这样设置:app:statusBarScrim="?...当设置为1.0,滚动列表时图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为,可以参考上一篇文章,这里我介绍一下本例中几个新的注意点。...作为AppBarLayout的直接子控件,CollapsingToolbarLayout包裹Header部分的ImageView和Toolbar,并分别设置二者的折叠模式。
CoordinatorLayout是design包中的控件,作为外层控件可以协调子控件从而实现炫酷的效果等。...compile 'com.android.support:design:25.4.0' 在android studio中有一个ScrollingActivity的模板 <?...,然后是内容区和FloatingActionButton 这个AppBarLayout是有固定高度的,然后里面包着Toolbar,Toolbar外层是CollapsingToolbarLayout,是可折叠的...parallax :视差模式,在折叠的时候会有个视差折叠的效果。...只有在内容区可滑动的状态下会触发效果,所以内容区外层是NestedScrollView,app:layout_behavior="@string/appbar_scrolling_view_behavior
随着平板和可折叠设备的迅速发展,是时候停止将手机和平板分开去考虑了,而更应该提供面向一整个生态系统的应用,来提高其在市场中的影响力。...其中,较小型代表了竖屏模式下手机的典型模式,中等型代表了大部分平板电脑和更大的可折叠设备的尺寸,展开型则代表了平板电脑或更大的可折叠设备,或是桌面设备在横屏模式下的显示情况。...△ 更改之前的 Trackr 样式 上图是我们进行更改之前的 Trackr 样式,您会发现不管在什么设备或屏幕下,都会有一个单窗口任务列表以及用于导航到归档或设置页面的底部应用栏。...最后,在设置 NavRail 菜单栏的 ID 来匹配现有导航目的视图的 ID,再在 MainActivity 中为 NavRail 设置 NavController: <!...所有的界面都是通过在代码中描述而成,这样也就很容易在运行时做出关于界面样式的决策,而在传统的视图系统中,我们通过对不同屏幕配置进行编译,从而实现对视图的配置,这两者有着巨大的不同。
Activity 之间数据传递 多线程 Layout与Widget Android的页面视图由XML来声明,而所有页面的这些UI组件都由一个布局(Layout)来组织。...我们的Demo中用到的组件包括: AppBarLayout + Tab Layout 实现 图1中的Tab视图 Drawer Layout + Navigation View 实现图3中的左侧菜单 CoordinatorLayout...~ AppBarLayout + Tab Layout TabLayout可以说是一个非常好用的视图,你几乎在每一个主流的APP里面都可以看到。...DrawerLayout + NavigationView 图3中的左侧菜单,主流APP必备,也是只要几行代码就可以了。 ? 在NavigationView的使用上,有两个属性需要注意一下。...nav_header其实很简单用了一个来显示图片,以及一个来显示上面图里面的UserName。
本例中,TabLayout在界面滚动时,随着Toolbar的逐渐隐藏,将占据Toolbar的位置, 达到节省屏幕空间,界面动画效果的目的。...enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。...app:pressedTranslationZ :FAB动画效果,在它被按下的时候阴影就会增大。...-- SwipeRefreshLayout是伟大的Google在v4包中给出的下拉刷新组件。...整个Demo的源码我放在了GitHub上,谢谢star一下~ 在看源码过程中如果发现什么问题,请在留言,看到一定回复。
image 在可折叠设备上提供出色的用户体验,首要确保您的应用程序已准备好两件事: 其一,可在两个屏幕之间无缝切换; 其二,在多窗口模式下处于活动状态。 ? image 1....不要在活动的OnDestroy()中调用finish()或自行终止进程,否则将导致APP在设备折叠或展开时关闭。...image 当指定的属性(可折叠设备的折叠/展开时触发)发生变化时,MyActivity不会重启,而是会收到 onConfigurationChanged()的调用,在此方法中处理配置变更,更新视图布局...从 Android P (9.0) 开始,谷歌提供了名为Multi-resume的新功能,允许设备厂商在多窗口模式下保持所有可见应用处于活动状态,解决了分屏的多个应用仅有一个能保持活动状态的问题。...测试用例 下面的测试用例包括应用程序连续性和多活动窗口的场景,可作为应用测试用例的补充。 ? image
了解 CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器,对容器中的不同View设置layout_collapseMode折叠模式,来达到不同的折叠效果。...通常CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout的搭配使用折叠的效果目前已经很常见了,在网上有很多的例子和文章,小编整理了一下知识点。...注意两点:第一点,如果使用了其他值,必定要使用这个值才能起作用;第二点:如果在这个child View前面的任何其他Child View没有设置这个值,那么这个Child View的设置将失去作用 enterAlways...parallax:视差模式,在折叠的时候会有个视差折叠的效果。...在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier
API,而设计规范就是官方文档中的移动设计定则,并且在不断完善中,截止到今天为止google更新了20+章的内容。 ...高度包含了静态高度与组件高度,一般UI高度是个固定值,只有状态不一致可能上下移动,但是在变化过后都会自动恢复到自身的静态高度。下面的图表对比了多种元素的静止高度和动态高度偏移。 ?...五、元素参考阴影 下面的元素阴影参数应该当作参考阴影的标准。如果有遇到下列参考阴影的高度与组件中的阴影高度不同,必须要遵循以下参考阴影的高度。 ? ...在CoordinatorLayout中使用AppBarLayout,如果AppBarLayout的子View(如ToolBar、TabLayout)标记了app:layout_scrollFlags滚动事件...中创建的,在吊起新的activity或者从activity返回时,用来管理场景的退出和共享元素的退出。
这个效果是最近项目需求中的,然后看了下 知乎 B站的个人中心都没有下拉刷新,然后github上也没找到类似的(有的话 可能是我不会找吧)… 然后就默默开始搜索下拉刷新实现原理,然后就找到了上面链接那篇文章...把项目中的refreshlibray 库添加到项目中,或者直接复制里面的 java、anim、drawable–xxhdpi、layout这几个文件下的文件和values下的pull_refresh_colors...定义一个boolean类型的变量来判断是否可以刷新(是否拦截点击事件),默认为true,添加set方法,然后在isReadyForPullDown方法中返回这个变量,可以参考下载项目中的 WithBottomContentView.java...在createRefreshableView中添加你要刷新的区域布局。...扩展 相信大家项目中的刷新视图基本都是和项目icon有关的不会是这个默认的刷新试图,所以需要修改刷新试图的,直接修改refreshlibray中HeaderLoadingLayout及其布局pull_to_refresh_header
Fragment的出现,如微信的额主界面包含多个Fragment,使得微信功能更加简洁明了。...适用于页面较多的情况,每次切换会回收内存的。...图片来源官方: 生命周期 onAttach(): 一旦片段与其活动相关联就被调用; onCreate(): 片段被调用创建; onCreateView(): 创建并返回相关的视图结构; onActivityCreated...(): 表示活动已被创建完成了,这里是activity创建成功; onStart(): 片段对用户可见; onResume(): 片段与用户开始交互; onPause(): 片段与用户不再交互;...onStop(): 片段不再对用户可见; onDestroyView(): 销毁与其View相关资源; onDestroy(): 销毁一切片段; onDetach(): 片段与其活动不再相关联
碎片,它的出现是为了更好展示UI的设计,让程序更加得到充分的展示。Fragment的出现,如微信的额主界面包含多个Fragment,使得微信功能更加简洁明了。 ? Fragment组件 ?...Fragment加载 1.静态加载:添加Fragment到Activity布局中,以xml的形式。...适用于页面较多的情况,每次切换会回收内存的。...onAttach(): 一旦片段与其活动相关联就被调用; onCreate(): 片段被调用创建; onCreateView(): 创建并返回相关的视图结构; onActivityCreated(...): 表示活动已被创建完成了,这里是activity创建成功; onStart(): 片段对用户可见; onResume(): 片段与用户开始交互; onPause(): 片段与用户不再交互;
思路 先说说实现的思路吧,上面的效果大致可以分成两个部分: 1、Tab向上滚动到顶部时悬浮 Tab滚动后悬浮在顶部嘛~~ 这效果使用CoordinatorLayout + AppBarLayout就能轻松实现...额,应该可以勉强看懂后面的内容) 2、顶部悬浮以及“被顶走”的效果 只要在CoordinatorLayout外面套一层FrameLayout,然后把这个顶部的布局改在上面。...这样也导致下面的布局被盖住了一部分,因此在LinearLayout中加了与悬浮部分相同高度的空View。 布局是完成了,那个“被顶走”的效果怎么实现呢?...这时候只要在MainActivity中对AppBarLayout的滚动进行监听即可。...具体的解决方案 问题:如果你在想要刷新功能,在CoordinatorLayout外面套了一个SwipeRefreshLayout,一不小心就触发了刷新~~(自己体会) 解决方案:这个问题可以通过对AppBarLayout
而AppBarLayout又必须是CoordinatorLayout的子布局; 1.3 水果详情界面布局框架: CoordinatorLayout下分三部分:水果标题栏、水果详情栏...而AppBarLayout又必须是CoordinatorLayout的子布局。 本文来做一个额外的活动作为水果的详情展示界面,当点击水果列表卡片的时候就进入这个界面。...这里就实战一下,在activity_fruit.xml中加一个关于水果的表示评论作用的悬浮按钮。...我在水果详情界面的逻辑中,findViewbyid写错成了卡片水果列表界面的ImageView的id: ?...在 CoordinatorLayout(外层监听框架)、 AppBarLayout(水果详情界面标题栏外层)、 CollapsingToolbarLayout(水果详情界面标题栏)这种嵌套结构的布局中
领取专属 10元无门槛券
手把手带您无忧上云