首页
学习
活动
专区
圈层
工具
发布

听说谷歌Baba更新了 Material UI ...

Bottom Navigation BottomNavigationView创建底部导航栏,用户只需轻点一下即可轻松浏览和切换顶级内容视图。 ...当项目有3到5个顶层(底部)目的地导航到时,可以使用此模式。...使用也是很Easy,如下: 创建一个菜单资源 ,最多5个导航目标(BottomNavigationView不支持超过5个项目); 在内容下面放置BottomNavigationView; 将BottomNavigationView...持久性底部页面是从屏幕底部出现的视图,在主要内容上升高。他们可以垂直拖动以暴露他们的内容列表。 注意:如果要使用模态(对话框)的底页,请使用 BottomSheetDialogFragment。...如果已经在Activity使用CoordinatorLayout,添加底部表单很简单: 将任何视图添加为CoordinatorLayout的直接子视图。

3.8K20

自定义View:手撸一个带FAB凹槽的底部导航栏

如果你的FAB移动了,导航栏怎么跟着变化? 同事:没得怎么变化,反正需求没有说要加动画 我:那要是PM要你的导航栏凹陷深度依赖于FAB的位置大小,你要怎么处理? 同事:......那阁下又当如何应对?...(摆烂) emmmmm.....好了成功激起了我的好奇心,横竖现下手头上没啥要紧的活,那就自己手撸一个来玩玩hhhh!...当然了实际上不用那么麻烦一点点手动创建,贴心的AS直接有提供一键生成以上文件的快捷方式,相关依赖也会自动导入,只需新建Activity时选择Bottom Navigation Views Activity...假设按钮在垂直方向上的当前位移距离大小为d,当按钮向上运动时导航栏上的凹槽应该往中间收缩,在收缩过程中保持两旁小圆半径大小和30°夹角不变,这时另中间圆的圆心同步在垂直方向上移动-d,动态修改distance...cancel() }) } objectAnimation.start() } 代码逻辑很简单,onFabClick方法被触发时,按钮会在垂直方向上在给定的运动区间内做一次往返位移

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

    Android开发之漫漫长途 XIII——Fragment最佳实践

    该系列引用了《Android开发艺术探索》以及《深入理解Android 卷Ⅰ,Ⅱ,Ⅲ》中的相关知识,另外也借鉴了其他的优质博客,在此向各位大神表示感谢,膜拜!!!...Fragment的设计最初也许是为了大屏幕平板设备的需求,不过现在Fragment已经广泛运用到我们普通的手机设备上。下图是我们几乎在主流App中都能发现的一个功能。 ?...R.id.frame_content,new GoodsFragment(),GoodsFragment.class.getName()).commit(); 如上面所示代码块中,我们先进行了3次添加操作,之后的replace操作会移出前面添加的...fragment) : 隐藏一个存在的Fragment 注:①Fragment被hide/show,仅仅是隐藏/显示Fragment的视图,不会有任何生命周期方法的调用。...还有一些其他的方法这里就不一一列举了,有了上面所列出的方法,我们就能对Fragment有个很不错的优化了。

    1.4K20

    Android Studio 4.0+ 中新的 UI 层次结构调试工具

    选择所需的应用进程后,布局检查器会基于当前 UI 层次结构创建一个快照。如果您启用了 Live Updates 选项,那么当您在设备上操作界面时,快照会动态更新。...点击 rotation 按钮会在二维和三维视图之间进行切换。当处于旋转模式时,您可以旋转 UI 层次结构。旋转操作可以帮助您更直观地了解视图的组织结构。...您也可以选中一个视图,然后右键点击它后,窗口仅显示它的子视图。 同样,您可以仅显示一个所选视图的父视图。 右侧的窗格会显示所选视图的所有已声明的属性和继承的属性。...这里我们有一个简单的示例应用,它包含一个 fragment,其中有一些静态文本和一个图片。如果您在阅读文章时想同步进行操作,可以先按照下面步骤操作创建工程。...当您运行应用的时候,您会看到一个可爱的 android,但是里面少了一些东西: 底部的导航标签。看一下布局文件,我们可以看到底部的导航视图是存在的,但是屏幕却没有显示它。

    3.5K10

    Android Studio 4.0+ 中新的 UI 层次结构调试工具

    如果您启用了 Live Updates 选项,那么当您在设备上操作界面时,快照会动态更新。 该版本的布局检查器延续了之前版本的功能并且更加多样化。...点击 rotation 按钮会在二维和三维视图之间进行切换。当处于旋转模式时,您可以旋转 UI 层次结构。旋转操作可以帮助您更直观地了解视图的组织结构。...您也可以选中一个视图,然后右键点击它后,窗口仅显示它的子视图。 同样,您可以仅显示一个所选视图的父视图。 右侧的窗格会显示所选视图的所有已声明的属性和继承的属性。...这里我们有一个简单的示例应用,它包含一个 fragment,其中有一些静态文本和一个图片。如果您在阅读文章时想同步进行操作,可以先按照下面步骤操作创建工程。...看一下布局文件,我们可以看到底部的导航视图是存在的,但是屏幕却没有显示它。

    2.8K20

    玩转 CSS3 3D 变换:打造炫酷立体网页效果

    而在3D场景中,除了X轴和Y轴之外,还增加了一个维度,即Z轴。Z轴代表的是深度,垂直于屏幕的方向。具体来说,Z轴朝向屏幕的方向为正,远离屏幕的方向为负。...当使用绝对定位样式移动元素时,坐标系的 X 轴和 Y 轴会以设置了相对定位的祖先元素的中点为原点。 需要注意的是,在调整 Z 轴的位置时,用户的视角也会随之发生变化。...当 scale3d() 中的 X 轴和 Y 轴的缩放比例都为 1 时,即 scale3d(1, 1, sz),其效果等同于 scaleZ(sz)。...默认缩放比例为 1,当值大于 1 时,元素放大;当值小于 1 且大于 0.01 时,元素缩小。...scaleZ(z) 是一个难点,它指的是 Z 轴方向上的纵深(视距),并不会在 Z 轴方向上加厚元素。这个效果通常需要在父元素中设置 perspective,然后观察子元素位移距离的变化。

    57610

    提高效率 |ArcGIS Pro 中所有快捷键一网打尽

    Ctrl+L 当布局为活动视图时,锁定或解锁在内容窗格中选择的项目。 Ctrl+Shift+L 当布局为活动视图时,请在内容窗格中锁定或解锁该级别上的所有项目。...J 沿向下靠近视图的方向下移。 在 2D 中,这类似于持续放大。在 3D 中,照相机会垂直向下移动。 向上翻页键 向上移动一个屏幕大小。 在 2D 中,向前平移一个屏幕宽度。...在 3D 中,当视图沿指针所指示的远离视图中心的方向平移时,将保留照相机的方位角和高度角。Shift+Q降低漫游速度。 Ctrl+Q提高漫游速度。 方向键向左、向右、向上或向下移动视图。...在 3D 中,照相机会垂直向下移动。向上翻页键向上移动一个屏幕大小。在 2D 中,向前平移一个屏幕宽度。 在 3D 中,照相机在保持照相机角度和高度不变的同时会向前移动一个屏幕宽度。...模式 用于模型的键盘快捷键 键盘快捷键 操作 Ctrl+N 当模型视图处于活动状态时,创建一个新模型。 Ctrl+S 保存活动模型。 Ctrl+Shift+S 使用其他名称和位置保存活动模型。

    7.6K20

    Win10 快捷键大全(史上最全)「建议收藏」

    Alt + 空格键 为活动窗口打开快捷菜单 Alt + 向左键 后退 Alt + 向右键 前进 Alt + Page Up 向上移动一个屏幕 Alt + Page Down 向下移动一个屏幕 Ctrl...Ctrl + 向上键 将光标移动到上一个段落的起始处 Ctrl + Alt + Tab 使用箭头键在所有打开的应用之间切换 Ctrl + Alt + Shift + 箭头键 当分组或磁贴在“开始”菜单中获得焦点时...向左键 将选择内容或活动形状向左移动一个像素 向下键 将选择内容或活动形状向下移动一个像素 向上键 将选择内容或活动形状向上移动一个像素 Shift + F10 显示上下文菜单 “照片”键盘快捷方式...将光标向右移动一个字 Ctrl + 向上键 将光标移动到上一行 Ctrl + 向下键 将光标移动到下一行 Ctrl + Home 移动到文档的开头 Ctrl + End 移动到文档的末尾 Ctrl +...Page Up 向上移动一个页面 Ctrl + Page Down 向下移动一个页面 Ctrl + Delete 删除下一个字 Alt + F4 关闭“写字板” Shift + F10 显示上下文菜单

    22.8K31

    【愚公系列】2023年12月 HarmonyOS教学课程 039-ArkUI事件(单一手势)

    使用两个手指在屏幕上同时顺时针或逆时针旋转,可实现旋转图片、屏幕方向切换等功能 拖拽手势 长按住一个物体后,移动手指进行拖拽,可实现图标排序、文件移动等功能 双指滑动手势 使用两个手指在屏幕上同时滑动,...通过拖动手势,用户可以在屏幕上拖动某个对象,例如移动一个图像、滚动一个列表或调整一个视图的位置。 拖动手势通常包括以下几个基本元素: 起始点(起始位置):用户触摸屏幕的初始位置。...拖动手势可以用于许多应用场景,例如: 拖动和移动元素:用户可以在屏幕上拖动图像、视图或其他元素,以实现移动、重新排列或调整它们的位置。...它涉及使用两个或更多的手指同时向内或向外移动,以缩小或放大屏幕上的内容。当手指向内移动时,被捏合的物体(如图片、网页等)将会被缩小;当手指向外移动时,被捏合的物体将会被放大。...用户可以在屏幕上滑动手指,当手指的移动方向和距离达到一定的条件时,系统会识别为滑动手势,并根据具体需求执行相应的操作。

    30610

    windows10切换快捷键_Word快捷键大全

    Alt + 空格键 为活动窗口打开快捷菜单 Alt + 向左键 后退 Alt + 向右键 前进 Alt + Page Up 向上移动一个屏幕 Alt + Page Down 向下移动一个屏幕 Ctrl...Ctrl + 向上键 将光标移动到上一个段落的起始处 Ctrl + Alt + Tab 使用箭头键在所有打开的应用之间切换 Ctrl + Alt + Shift + 箭头键 当分组或磁贴在“开始”菜单中获得焦点时...Win + Home 最小化除活动桌面窗口以外的所有窗口(在第二道笔划时还原所有窗口) Win + Shift + 向上键 将桌面窗口拉伸到屏幕的顶部和底部 Win + Shift + 向下键 在垂直方向上还原...Ctrl + 向下键 转到第一个子项(仅当应用提供结构导航时) Caps Lock + N 移动到主陆标 扫描模式键盘命令 快捷键 功能 向上键和向下键 移动到应用或网页中的下一行或上一行文本 向右键和向左键...激活主要操作 用一根手指点击三次或按住,然后用另一根手指双击屏幕上的任意位置 激活辅助操作 用一根手指按住,然后用另外两根手指点击屏幕上的任意位置 开始拖动或其他按键选项 用一根手指向左或向右轻拂 移动到下一个或上一个项目

    8.3K10

    Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

    导航抽屉表可以从屏幕左侧出现 (1),或者在与 bottom app bar (2)同时使用时从屏幕底部打开。 范围小于62.5% ?...行为 移动端打开(纵向) 与其他 modal bottom sheets 一样, bottom navigation drawer 的初始垂直位置基于其内容和屏幕高度,但最初不能在高于屏幕高度的50%以上打开...调整 bottom navigation drawer 的打开位置,以便在屏幕底部剪切最后一个视图中的列表项。 这可以通知用户有更多项目要查看。...移动端打开(横向) 在移动端的横向方向上,较高的 bottom navigation drawers 会自动打开到全屏模式。 ? ?...当最初打开到屏幕高度的50%时,在显示其他项目之前,必须将 drawer 拖到屏幕高度。 在滚动时,drawer 的标题变成了一个高的 top app bar,并具有很好的可供性。 ?

    4.9K40

    实践 | Google IO 应用是如何适配大尺寸屏幕 UI 的?

    来根据当前的设备配置确定呈现给用户哪一个视图。...我们采用了 SlidingPaneLayout,它为上述问题提供了一个直观的解决方案。双窗格会一直存在,但根据屏幕的尺寸,第二窗格可能不会显示在可视范围当中。...这个回调会监听滑动窗格的移动以及关注各个窗格导航目的页面的变化,因此它能够评估下一次按下返回键时应该如何处理。...可能有些反直觉的是,当平板电脑横屏时属于窄尺寸模式,而当其竖屏使用时属于宽尺寸模式。...然而,这并不总是能在特定屏幕尺寸下为用户带来最佳的体验。当 UI 元素拉伸过度、相距过远或是过于密集时,往往难以传达信息,触控元素也变得难以辨识,并导致应用的可用性受到影响。

    2.7K20

    Material Design — 菜单(Menus)

    单个菜单项状态 某些app状态可能会导致只有一个菜单项的情景菜单。 例如,当使网页上的文本高亮时,Android仅显示“复制”菜单项,因为用户无法“剪切”或“粘贴”文本。 ?...一个例子是在横向上查看手机上的菜单。 ? 可以内部滚动的菜单 级联菜单(仅限pc) 级联菜单可根据菜单与屏幕垂直和水平边缘的接近程度放置菜单。 ?...菜单项选择 选择一个选项提交选项并关闭菜单。 取消选择 触摸菜单外部或按下系统“后退”按钮,取消操作并关闭菜单。 ? 简单菜单 ·打开时,简单菜单会尝试将当前选定的菜单项目与列表项目垂直对齐。...向上展开的简单菜单 ·不要在简单菜单弹出的第一个选项上放列表中的非已选项(如下图)。 ? ·但在靠近屏幕边缘时,简单菜单会重新定位其垂直对齐方式,以便所有菜单项都完全可见。 ?...·菜单宽度取决于字符串长度,在移动设备上定义为56dp单位的倍数。 ·简单菜单始终在屏幕的左侧和右侧保持16dp的留白(手机)或24dp留白(平板)。 ?

    7.3K100

    两个 viewports 的故事-第二部分

    手机屏幕远小于桌面屏幕,最大宽度也就 400px 甚至更小(有些手机据称有更大的宽度,那是骗人的,或者至少给我们的是无用的信息)。...缩放 很明显,两种视图都是用 CSS 像素测算。当视觉视图通过缩放改变时(如果是放大,屏幕上的 CSS 像素会变少),布局视图的尺寸不会变。...很多浏览器仍然需要增加对视觉视图尺寸的支持。还没有浏览器具有其他保存该尺寸的属性值。所以我猜想 window.innerWidth/Height 是一个标准属性,尽管支持性不太好。...大多数浏览器会通过缩小来在屏幕上显示整个布局视图,如下图的效果 ? 所有的用户会立即放大查看,但是大多数浏览器会保持元素的宽度不变,这使得文本很难阅读。 ?...现在你可能会设置 html {width: 320px} 。 元素收缩了,其他元素的宽度是 320px 的 100%。

    2.2K70

    htop(1) command

    基本导航和视图控制 Tab, Shift-Tab 选择显示的下一个/上一个屏幕标签。可以在设置屏幕(F2)中启用显示屏幕标签名称。 Up, Alt-k 在进程列表中选择(高亮)上一个进程。...PgUp, PgDn 向上或向下滚动进程列表一个窗口。 Home 滚动到进程列表顶部并选择第一个进程。 End 滚动到进程列表底部并选择最后一个进程。...排序和视图选项 I 反转排序顺序:如果排序顺序是递增的,切换为递减,反之亦然。 特殊视图和功能 +, -, * 在树视图模式中,展开或折叠子树。当子树被折叠时,进程名称左侧显示一个"+"号。...F “跟随”进程:如果排序顺序导致当前选中的进程在列表中移动,使选择条跟随它。这对于监控进程很有用:这样,你可以保持进程始终显示在屏幕上。使用移动键时,“跟随”效果会失效。...Ctrl-L 刷新:重绘屏幕并重新计算值。 其他功能 数字:PID搜索:输入进程ID,选择高亮将移动到该进程。 5.示例 (1)基本使用。 打开终端,输入 htop,即可启动 htop 程序。

    86810

    利用BottomNavigationView实现底部标签栏

    不过为了定制页面的详细内容,开发者仍需修改相关代码,譬如将标签文字从英文改成中文,将频道上方的描述说明从英文改成中文,给频道页面添加图像视图等其他控件等等,故而还得梳理标签栏框架的实现方式。...首先查看标签页面的布局文件,它的关键代码如下所示:     BottomNavigationView        ...BottomNavigationView(底部导航视图),另一个是位于其上占据剩余屏幕的碎片fragment。...        android:title="@string/title_notifications" /> 上面的菜单定义文件以menu为根节点,内部容纳三个item节点,分别对应屏幕底部的三个标签...这些默认的碎片代码到底有何不同,打开其中一个HomeFragment.java研究研究,它的关键代码如下所示:     public View onCreateView(@NonNull LayoutInflater

    2.5K30
    领券