image 在可折叠设备上提供出色的用户体验,首要确保您的应用程序已准备好两件事: 其一,可在两个屏幕之间无缝切换; 其二,在多窗口模式下处于活动状态。 ? image 1....当Activity重启时,恢复之前的状态很重要。...不要在活动的OnDestroy()中调用finish()或自行终止进程,否则将导致APP在设备折叠或展开时关闭。...image 当指定的属性(可折叠设备的折叠/展开时触发)发生变化时,MyActivity不会重启,而是会收到 onConfigurationChanged()的调用,在此方法中处理配置变更,更新视图布局...image 在多窗口模式下运行您的应用程序 通过点击其他应用将焦点从第一个应用移动到另一个应用 检查应用程序是否仍处于resumed状态 当您的应用意外丢失资源(例如相机)时,检查应用是否有任何意外行为
展开您的视频播放体验 可折叠设备向用户们提供了使用他们的手机做更多事情的可能性,包括*桌面模式**等创新,也就是当手机平放时,铰链处于水平位置,同时折叠屏幕处于部分打开的状态。...这是一个简单的媒体播放器案例,它会自动调节尺寸以避免让折叠处出现在画面中间,并且调整播放控制组件的位置,从屏幕完全展开时嵌入画面中,变为当屏幕部分折叠时显示为单独的面板。...MotionLayout 结合了父类的灵活性,同时又具备在视图从一种姿态过渡到另一种时展示流畅动画的能力。...这样一来该控件会在屏幕完全展开时被隐藏,而当屏幕部分折叠时又出现在底部。 请注意第 28 行的 layout_constraintGuide_end 属性。它就是当您移动参考线时需要改变的值。...当设备完全展开时,整个屏幕都会被用于显示主 PlayerView。 最后的问题: 当设备折叠时,您应该将 ReactiveGuide 移动到哪里?
一 ExpandableListView基本介绍 ExpandableListView是Android中的一个可扩展列表视图,它继承自ListView,并提供了支持展开和折叠的功能。...二 ExpandableListView使用方法 在 XML 布局文件中添加 ExpandableListView: <ExpandableListView android:id="@+id/...isGroupExpanded(int groupPosition):检查指定位置(groupPosition)的分组项是否处于展开状态。...常用属性: groupIndicator:用于指示分组项的展开和折叠状态的图标。可以通过设置不同的资源文件或自定义的 Drawable 来改变分组指示器的样式。...四 总结 ExpandableListView提供了一种方便的方式来展示具有层次结构的列表数据,并允许用户通过展开和折叠操作来浏览更多内容。它通常用于菜单、分类列表、可折叠的评论或帖子等场景。
如果在设计视图中查看这个布局,我们能看到布局所展示的工具栏处于展开的状态: ?...表示工具栏的完全展开状态,而另一个表示工具栏处于完全闭合状态就足以。...:展开状态和折叠状态。...在展开和折叠状态下, RecyclerView 列表的上边缘是处于不同位置的,因为它被约束到了 ID 为 toolbar_image 的 ImageView 图片下边缘,而这个过渡动画的实现正是由于控制着这个位置变量的值...在折叠状态下它会垂直居中,而在展开状态下它会对齐在底部,因此 TextView 会更多的相对于 ImageView 的大小尺寸来进行相关设定。
我们先来进行第一项优化,使用 NavRail 而非底部应用栏,首先我们要考虑的是导航模型,所幸我们不会更改很多具体的视图,仅仅只会更改导航方式,因为 NavRail 会一直存在于整个视图体系中,可以通过它导航到任何其他视图...△ 可折叠手机上布局转换 为了正确处理如何将列表和详情窗口折叠成单窗口层次结构,当在较小的屏幕上时,我们需要知道用户最后与哪个窗口交互,为此,我们实现了一个简单的自定义修饰符来记录最后一次交互,并以此决定...在 JetNews 中我们首先获取窗口大小类的信息,在较小和中等型宽度显示单窗口,而在展开型宽度显示列表/详情布局。...但这次更改是针对屏幕尺寸做的决策,我们是不是可以让单个组件自身根据页面而拥有不同尺寸呢?例如我们有一张卡片,当在列表中因为空间的限制只展示标题和副标题,而有更多空间时,则调整为显示图像。...通过这些 API,能够获取到该设备是否且何时触发了铰链或折叠等功能,以及当前设备处于何种姿态。Compose 可以轻松观察这些 API 赋予的状态,从而轻松对界面进行转换。
在内容视图中,组合框和列表框都被表示为一组UI项,其中可以选择一个或多个项。 在内容视图中,一个始终处于打开状态,而另一个可以展开和折叠的事实是无关紧要的,因为它旨在显示呈现给用户的数据或内容。...所有元素共有的属性(请参阅下表) AutomationElement AutomationElementIdentifiers 停靠窗口的位置 DockPattern DockPatternIdentifiers 可展开和折叠的元素的状态...ExpandCollapsePattern IExpandCollapseProvider 用于可展开或折叠的控件。 例如,应用程序中的菜单项,如 “文件” 菜单。...ScrollPattern IScrollProvider 用于可滚动的控件。 例如,一个控件其所具有的滚动条在控件的可视区域中存在的信息超过了可被显示的信息时,便处于活动状态。...当桌面上有新 UI 项变得可见、隐藏或删除时,结果便发生更改。 全局桌面更改 当与客户端相关的的全局操作发生时引发,例如当焦点从一个元素转换到另一个元素、或窗口关闭时。
exitUntilCollapsed:当你定义了一个minHeight,此布局将在滚动到达这个最小高度的时候折叠。 snap:当一个滚动事件结束,如果视图是部分可见的,那么它将被滚动到收缩或展开。...例如,如果视图只有底部25%显示,它将折叠。相反,如果它的底部75%可见,那么它将完全展开。...CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色,通过app:statusBarScrim设置折叠时状态栏的颜色。...当CollapsingToolbarLayout的子布局设置了parallax模式时,我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子,值为:0~...当然,Behavior无法独立完成工作,必须与实际调用的CoordinatorLayout子视图相绑定。具体有三种方式:通过代码绑定、在XML中绑定或者通过注释实现自动绑定。
关于CollapsingToolbarLayout的属性在官网上可以查到,这里我只介绍案例中我们常用的几个属性:title标题,布局展开时放大显示在图片底部,布局折叠时缩小显示在Toolbar左侧。...注意,没有设置这个属性时,默认使用Toolbar的标题;statusBarScrim顶部视图折叠状态下,状态栏的遮罩色。通常这样设置:app:statusBarScrim="?...addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);(支持API19及以上版本,位于setContentView语句前面)一起使用,使顶部视图展开时图片能够延伸到状态栏位置显示...当设置为1.0,滚动列表时图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为,可以参考上一篇文章,这里我介绍一下本例中几个新的注意点。...;前面介绍CollapsingToolbarLayout属性时介绍到了statusBarScrim的使用,其实也可以通过android:fitsSystemWindows和values-v21中style
" /> android.support.design.widget.CoordinatorLayout> 嵌套滚动视图NestedScrollView 虽说通过AppBarLayout可实现Toolbar...RecyclerView是其中一个特工,它可用来替代ListView和GridView;替代ScrollView的则另有其人,它便是嵌套滚动视图NestedScrollView,在Android5.0之后的...NestedScrollView继承自FrameLayout,其用法与ScrollView相似,如都必须且只能带一个直接子视图,都是允许视图上下滚动等等。...同理,拉动AppBarLayout也有类似情况,当松开手指后,AppBarLayout得判断要不要继续向上收缩,或是继续向下展开。...然后主体向下滚动,滚到位后头部继续向下展开。 5、snap : 在用户手指松开时,系统自行判断,接下来是全部向上滚到顶,还是全部向下展开。
简介 先上个小米日历的图,让大家知道要做一个什么效果: [strip] 这是小米日历的效果,在用户操作列表的时候,将日历折叠成周视图,扩大列表的显示区域,同时也不影响日历部分的功能使用,有趣且实用。...原本想用原生的 CalendarView,但是 CalendarView 不支持周视图,可自定义程度也不高。 在 GitHub 搜了一下,决定使用 MaterialCalendarView。...用 CoordinatorLayout 作为根布局,就可以协调它子控件之间的联动效果,至于如何联动,是由它的内部类 Behavior 实现的。...在布局中,对子控件配置 app:layout_behavior 属性,实现对应的联动效果。所以这里我们需要自定义日历和列表的两个 Behavior。 Behavior 有两种实现联动的方式。...惯性滑动 上面效果可以看出一个问题,当滑动到一半的时候松手,应该要恢复到完整视图的位置。这里包含了,快速滑动后惯性滑动到指定位置的效果,和没有快速滑动时,往就近的指定位置滑动这两种效果。
可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,...上述属性在代码中的设置方法如下所示: setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。...既然二者原本不是一家,那么就得有新的属性用于区分它们内部的行为,新属性在CollapsingToolbarLayout的子视图节点上声明,说明如下: app:layout_collapseMode :...app:layout_collapseParallaxMultiplier : 指定视差模式时的折叠距离系数,取值在0.0到1.0之间。...下面是标题栏在折叠时显示渐变图片的效果图: ?
这一做法在小屏上或许行得通,当屏幕尺寸较大时就会出现明显的问题。网格系统则将您的布局划分为一系列栏,从而帮助您在规范网格中设计更具表现力的布局。...第一种是列表/详情,或列表网格视图的简单组合,同时在开始展示内容的屏幕起始侧,设置/不设置导航容器。 △ 列表/详情布局 支持面板可用于人们需要集中精力的体验中,例如文档。...因此,每个页面都应足够灵活,而且应当能够在尺寸过渡期间保持状态不变,这个时候规范布局就能发挥重要作用。针对每个页面,您可以思考一下,当屏幕尺寸变大时,可以添加什么内容。...,当折叠导致内容视图被割裂时,我们应该及时更新布局参数。...在如此多样化的硬件生态系统中,您可能很难拥有各种形状和尺寸的设备,如今 Android SDK 为可折叠设备提供了模拟器图像,这些模拟器允许您随时将折叠状态更改为铰链的角度。
当项目有3到5个顶层(底部)目的地导航到时,可以使用此模式。...那下面按照步骤操作一次: Step 1:在布局中添加BottomNavigationView: android.material.bottomnavigation.BottomNavigationView...持久性底部页面是从屏幕底部出现的视图,在主要内容上升高。他们可以垂直拖动以暴露他们的内容列表。 注意:如果要使用模态(对话框)的底页,请使用 BottomSheetDialogFragment。...如果已经在Activity使用CoordinatorLayout,添加底部表单很简单: 将任何视图添加为CoordinatorLayout的直接子视图。...app:behavior_peekHeight:折叠状态的窥视高度。 app:behavior_skipCollapsed:如果底部表单可隐藏,并且设置为true,则表单不会处于折叠状态。
本系列教程中,我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为:一个折叠工具栏动画( a Collapsing Toolbar )。...因此我们得到的是一个非常平滑的过渡动画,从工具栏开始发生折叠一直到工具栏完全达到折合状态为止。这也很好的解释了我们所看到的在 MotionLayout 中对动画行为的实现。...为了实现这个目标,我们首先需要在展开状态 ConstraintSet 的定义中删除自定义属性 imageAlpha 字段: android:id="@+id/expanded...目前来说,发生的情况是:图片的透明度在过渡动画还没有达到 60% 之前是不会发生变化的(也就是至少超过一半的折叠状态下不发生变化),接下来会慢慢开始淡出,直到工具栏达到 90% 折叠时完全透明。 ?...你只需要记得在最终发布版本中要关闭这个功能——我建议定义一个布尔值资源,在布局中使用,然后你就可以在发布版本时总能设置它为 false 就可以了。 好吧,这次就到这里。
更多动态视图MoreNewsView 经常看朋友圈的动态,有的动态内容较多就只展示前面一段,如果用户想看完整的再点击展开,这样整个页面的动态列表比较均衡,不会出现个别动态占用大片屏幕的情况。...动态列表直接使用ListView,动态内容就得自己写个控件了,自定义控件的难点在于如何把握动态下拉和收起的动画。...ExpandableListView常用方法 Android自带的ExpandableListView可以直接用于嵌套列表,点击一个组,展开该组下的子列表;再点击这个组,收起该组下的子列表。...FoldingLayout ExpandableListView对于一般场景的折叠式列表已经够用了,可是它的UI风格略显呆板,如果我们想来个显示特效,比如加上折叠展开的动画,那最好还是自己写个折叠式列表控件...onFoldingState : 折叠状态变化时触发。 onEndFold : 结束折叠时触发。
ViewGroup,实现效果类似于RelativeLayout,若要指定子视图在整个页面中的位置,有以下几个办法: 1、使用layout_gravity属性,指定子视图在CoordinatorLayout...3、使用app:layout_behavior属性,指定子视图相对于其它视图的行为,当对方的位置发生变化时,本视图的位置也要随之相应变化。...,即使别的视图在布局文件中位于FloatingActionButton后面; 2、在隐藏、显示按钮上时会播放动画;其中隐藏操作是调用hide方法,显示操作是调用show方法; 3、FloatingActionButton...BottomSheetBehavior在代码中使用的方法如下所示: from : 从指定视图获取底部弹窗行为。 getState : 获取该行为的状态。 setState : 设置该行为的状态。...取值STATE_EXPANDED表示完全展开;取值STATE_COLLAPSED表示折叠;取值STATE_HIDDEN表示隐藏。
可以将片段视为 Activity 的模块化组成部分,它具有自己的生命周期,能接收自己的输入事件,并且可以在 Activity 运行时添加或移除片段(这有点像可以在不同 Activity 中重复使用的“子...不过,当 Activity 正在运行(处于已恢复生命周期状态)时,可以独立操纵每个片段,如添加或移除片段。...在此情况下,需在列表布局中创建包含 RecyclerView 的片段。..." android:layout_width="match_parent" android:layout_height="match_parent"> android...宿主 Activity 已停止,或片段已从 Activity 中移除,但已添加到返回栈。已停止的片段仍处于活动状态(系统会保留所有状态和成员信息)。
在手机开发的时候,可以进行导航、显示相应的标题等,使开发者不至于在应用程序中迷路。5.0使用Actionbar来实现,很多公司都会对该类进行定制,使用起来更加灵活。...="#9f9f9f"> 2.设计菜单xml文件 步骤: 在res上右击,选择“new/andorid Resource Directory”,在弹出的对话框中...通话(电话) 通信录 设置 3.可扩展列表视图 一般用于数据的展开和折叠这种场景,即可以单独展开的列表视图。 ExpandableListView,是ListView的子类。...* @param groupPosition 为组位置 * @param isExpanded 是否折叠或伸缩状态 * @param convertView...重用已经的视图对象 * @param parent 返回视图所衣服的视图组。
在折叠的时候 状态栏的背景颜色 10。...enterAlways - 实现quick return效果, 当向下移动时,立即显示View(比如Toolbar)。...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。...--layout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar...parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier
,如果会议详情窗格尚未处于最顶端时,将其滑入并遮挡在列表上方。...当您在搜索时,可以选择不同的标签来过滤需要显示的搜索结果,我们也会把当前生效的过滤标签显示在以下两个位置之一: 窄模式时位于搜索文本框下方,宽模式时位于搜索文本框的后面。...△ 平板横屏时的搜索应用栏 (窄模式) △ 平板竖屏时的搜索应用栏 (宽模式) 此前,我们通过在搜索 Fragment 的视图层次中的应用栏部分使用 标签,并提供两种不同版本的布局来实现此功能...在窄屏幕设备上,您会看到一列项目,它们会在点击时展开或折叠。在宽尺寸屏幕上,这些列表项会转换为一格一格的卡片,卡片上直接显示了详细的内容。 △ 左图: 窄屏幕显示 Codelabs。...这些独立的网格卡片是定义在 res/layout-w840dp 下的 备用布局,数据绑定处理信息如何与视图绑定,以及卡片如何响应点击,所以除了不同样式下的差异之外,不需要实现太多内容。
领取专属 10元无门槛券
手把手带您无忧上云