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

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

Navigation drawer ---- 用法 Navigation drawer 提供对目的地和 app 功能的访问,如切换帐户。 它们可以永久屏幕上显示,也可以通过导航菜单图标进行控制。...为了点击 bottom app bar 的菜单图标后提高可达性,它们屏幕底部打开而不是侧面打开。 ---- 分解 Navigation drawers 包含嵌入 sheet 内的 list。...Sheet Navigation drawer 的内容包含在侧面或底部 sheet 。...侧面打开的 navigation drawer 被放置屏幕的左侧以用于从左到右的阅读顺序,放置屏幕的右侧以用于从右到左的阅读顺序。 ?...导航抽屉表可以屏幕左侧出现 (1),或者与 bottom app bar (2)同时使用时屏幕底部打开。 范围小于62.5% ?

3.8K40

基础篇章:关于 React Native 之 DrawerLayoutAndroid 组件的讲解

Android 的 DrawerLayout 就是一个抽屉导航组件,所以这个组件的功能当然也是一样的。...我们的这个抽屉导航视图一开始是看不见的,就像抽屉一样,你不拉开抽屉你看不到东西,所以导航视图可以drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定...抽屉可以有3种状态: dle(空闲),表示现在导航条上没有任何正在进行的交互。 dragging(拖拽),表示用户正在与导航条进行交互。...settling(停靠),表示用户刚刚结束与导航条的交互,导航条正在结束打开或者关闭的动画。...renderNavigationView 该方法用于渲染一个可以屏幕一边拖入的导航视图 statusBarBackgroundColor color 使抽屉导航覆盖整个屏幕,并绘制状态栏的背景,使其能够覆盖到状态栏

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

    【React Native 安卓开发】----侧边栏的实现DrawerLayoutAndroid以及第三方框架react-native-side-menu的使用【第六篇】

    导航视图一开始屏幕上并不可见,不过可以drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定。...drawerPosition enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) 指定抽屉可以屏幕的哪一边滑入...drawerWidth number 指定抽屉的宽度,也就是屏幕边缘拖进的视图的宽度。...dragging(拖拽),表示用户正在与导航条进行交互。 settling(停靠),表示用户刚刚结束与导航条的交互,导航条正在结束打开或者关闭的动画。...renderNavigationView function 此方法用于渲染一个可以屏幕一边拖入的导航视图。 样例 ?

    6.7K40

    导航组件概览 | MAD Skills

    所以当用户点击某界面元素并需要触发导航的时候,您应该调用导航 API 使用其中一个操作来导航到图中的一个目的地。 操作还可以被用来定义传入目的地的参数,以及目的地目的地进入退出的转场动画。...取而代之的是 DrawerLayout 可以触发导航的菜单选项: ?...这一次,导航是由抽屉式导航栏中的菜单项触发的 当用户点击 DrawerLayout 中的菜单项时,应用会导航至和那些菜单项关联的目的地。...这个视图目前左边屏幕外,它是一个 NavigationDrawer 并且其菜单选项被用来目的地之间导航。该视图现在是不可见的,我们需要点击 ActionBar 菜单按钮来将它显示到屏幕上。...应用展示了 NavigationView (抽屉式导航栏) 覆盖 activity 内容上方 接下来是 NavigationView,它是一个左边划入的抽屉式导航栏。

    1.7K30

    【软件开发规范七】《Android UI设计规范》

    空间 ​编辑 Material Design引入了z轴的概念,z轴垂直屏幕,用来表现元素的层叠关系。...** easing ** ​编辑 动画要贴近真实世界,就要重视 easing。物理世界的运动和变化都是有加速和减速过程的,忽然开始、忽然停止的匀速动画显得机械而不真实。...同一个列表,主、副操作区的内容与位置要保持一致。 ​编辑 同一个列表,滑动手势操作保持一致。 ​...(Navigation drawer) ​编辑 侧边抽屉左侧滑出,占据整个屏幕高度,遵循普通列表的布局规则。...手机端的侧边抽屉距离屏幕右侧56dp。 ​编辑 侧边抽屉支持滚动。如果内容过长,设置和帮助反馈可以固定在底部。抽屉收起时,会保留之前的滚动位置。 ​

    5K20

    终极指南!超全面的UI动效基本规则总结

    △ 移动端设备的屏幕尺寸影响动画的持续时长 网页动效的处理方式也不一样。由于我们习惯浏览器中直接打开网页,考虑到浏览器性能和大家的使用习惯,用户对于浏览器动效变化速率的预期还是比较快的。...请务必记住,无论是什么平台上,动效的持续时长绝不是单纯取决屏幕尺寸和运动距离,还取决平台特征、元素大小、功能设定等等。较小的元素或者较小的变化,相应的动效应该更快一点。...缓动减速曲线 当元素屏幕外运动到屏幕内的时候,动效应该遵循这类曲线的运动特征。全速进入屏幕开始,速度降低,直到完全停止。 ?...△ 对称和非对称运动的差异 当元素屏幕的一个位置移动到另外一个位置的时候,最好使用这种标准的缓动曲线,这个过程,尽量不要让动画效果引人注意,不要使用戏剧化的效果。 ?...△ 卡片元素屏幕上运动的时候,不对称的缓动曲线 当元素屏幕上消失的时候,采用了相同的不对称缓动曲线,用户同样可以通过滑动回到之前的位置。这个环节使用了抽屉式导航控件。 ?

    1.6K20

    【C++】飞机大战项目记录

    1.4 游戏界面与互动: 设计一个直观的用户界面,进入游戏可以见到排行榜与开始游戏。开始游戏后,屏幕显示当前得分、生命值。 敌机被击中或击毁时有相应的动画和音效,增强游戏体验。...1.5 游戏逻辑: 敌机屏幕顶部随机位置出现,向下移动。 玩家需要避免敌机的攻击,同时尽可能多地击落敌机。 2 开始打造项目 有了大致的游戏设计思路,现在我们可以来逐步实现飞机大战的各个模块。...英雄飞机正常飞行状态有两种,模拟飞行喷射火焰前进,以及爆炸销毁的图片组。 菜单图片与背景图片 2.2 设计精灵对象 精灵对象是游戏开发中一个常见的概念,通常用于表示屏幕上的各种动态元素。...scene*, ExMessage* msg); //指示该场景是否结束 bool(*isQuit)(struct scene*); }; 初始化我们对英雄飞机,敌机,游戏背景进行初始化(通过各自的初始化函数...RECT rectStartGame, rectEndGame:开始游戏和结束游戏按钮的矩形区域。

    22110

    AutoJs6 – v6.2.0 – 安卓 JavaScript 自动化工具 (Auto.js 二次开发)

    修复 主页抽屉权限开关在提示消息对话框消失后可能出现状态未同步的问题 修复 Root 权限修改主页抽屉权限开关失败时未继续弹出 ADB 工具对话框的问题 修复 Root 权限显示指针位置初次使用时提示无权限的问题...修复 图标选择页面的图标元素排版异常 修复 文本编辑器启动时可能因夜间模式设置导致闪屏的问题 (试修) 修复 文本编辑器设置字体大小时可用最大值受限的问题 修复 部分安卓系统脚本运行结束时日志无法统计运行时长的问题...修复 使用悬浮窗菜单关闭悬浮窗后重启应用时悬浮窗依然开启的问题 修复 布局层次分析时长按列表项可能导致弹出菜单溢出下方屏幕的问题 修复 安卓 7.x 系统夜间模式关闭时导航栏按钮难以辨识的问题...修复 http.post 等方法可能出现的请求未关闭异常 修复 colors.toString 方法 Alpha 通道为 0 时其通道信息结果丢失的问题 优化 重定向 Auto.js 4....异常消息增加多语言支持 优化 主页抽屉权限开关仅在开启时弹出提示消息 优化 主页抽屉布局紧贴状态栏下方避免顶部颜色条的低兼容性 优化 检查更新 / 下载更新 / 更新提示功能兼容安卓 7.x

    4.5K20

    Android开发笔记(一百二十)两种侧滑布局

    一百零一)滑出式菜单,我们提到水平布局时的LinearLayout无法自动左右拉伸,必须借助于手势事件才能拉出左侧隐藏的布局,现在SlidingPaneLayout便是为了解决LinearLayout...只要我们布局文件的SlidingPaneLayout节点下定义两个子布局,那么页面默认会把第一个子布局作为左侧隐藏面板,一旦用户的手势左向右滑动,左侧面板就被拉了出来。...--onPanelOpened : 左侧面板已打开。 --onPanelSlide : 左侧面滑动。 openPane : 打开左侧面板。 closePane : 关闭左侧面板。...,它的用法更加类似滑出式菜单的开源框架SlidingMenu,有关SlidingMenu的说明参见《Android开发笔记(一百零一)滑出式菜单》。...左侧面板与右侧面板的区别在于,左侧面布局文件的layout_gravity属性为left,而右侧面布局文件的layout_gravity属性为right。

    2K30

    Anroid Wear OS 手表应用开发 - UI

    操作抽屉栏 当需要对当前页面进行一些操作的时候,但页面里又没有空间再放按钮了怎么办?既然可以顶部下拉出导航栏,要不在底部上拉出一个操作栏?...: 露出部分默认会显示操作栏第一项的图标,可以布局添加 app:showOverflowInPeek="true",让它显示竖直三个点的省略图标。...这样我们就可以 layout_bottom_drawer 设置自己想要的布局了,其他用法都和上面是一样的。...确认动画 当处理完某个业务之后,我们通常需要给用户一个处理成功或失败的提示, Wear OS 上,我们可以用一个 Activity 来展示确认动画。...: // 使列表上的第一项和最后一个项屏幕上垂直居中对齐 wearable_recycler_view.isEdgeItemsCenteringEnabled = true // 使用 WearableLinearLayoutManager

    2.5K30

    UI设计之动画虚拟到现实

    列表转换到项目 这是另一个例子:左侧选项显示列表或菜单转换到特定项目屏幕的基本方式,而右侧选项的流程更加动态。 打开侧边菜单 概念动画会让人觉得更加生动且富有生命力,比如打开侧面菜单等基本操作。...Finance App动画创建了饼图到应用颜色标记的列表的时尚过渡 ? Music News App动画在从类别屏幕到列表的过渡中使用形状和线条 ?...Home Budget app的UI动画概念增加了打开汉堡包菜单的动态 ? Business Card 的UI概念模仿配置文件头像拉出卡的有趣 ?...Calendar app的动画概念设置日历屏幕到计划屏幕的优雅过渡 ?...还有一个动画侧面菜单的交互增添乐趣并支持视觉层次结构 UI动画概念的主要好处 事实上,概念是所有行业或者创新行业创新和研究创新的开始

    1K60

    react-navigation,刷新你的导航一、属性介绍二、案例

    2017年1月,新开源的react-navigation库备受瞩目。它有类似原生版性能的体验效果,可能会成为未来RN导航组件的主力军。...(2)TabNavigator:类似底部导航栏,用来同一屏幕下切换不同界面 (3)DrawerNavigator:侧滑菜单导航栏,用于轻松设置带抽屉导航的屏幕 ?...直接切换 modal:iOS独有的使屏幕底部拖出 headerMode:返回上级页面时的动画效果 float:iOS的默认效果 screen:滑动过程,整个页面都会返回 none:无动画 cardStyle...iOS默认底部,安卓默认顶部 swipeEnabled:是否允许标签之间进行滑动 animationEnabled:是否更改标签时显示动画 lazy:是否app打开的时候将底部的标签栏全部加载...定义抽屉导航 HomeScreen与MineScree是导入外界的两个界面,将它们定义到DrawerNavigator抽屉导航,将组件的属性也一起设置好。

    19.6K90

    2014-11-8Android学习------Android抽屉效果的实现案例--------动画Animation学习篇

    VERTICAL : HORIZONTAL;//方向,根据布局文件获得的位置,得出应该是垂直方向 setOrientation(mOrientation);//然后让这个布局文件设置为该方向..., 这里有两个Id,他们分别对应了两个组件,我们需要去看看这个id是怎么定义: 首先是ids.xml定义: <?.../details/40861929 fromXDelta 为动画起始时 X坐标上的位置 toXDelta 为动画结束时 X坐标上的位置 fromYDelta 为动画起始时 Y坐标上的位置...toYDelta 为动画结束时 Y坐标上的位置 动画起始坐标到结束坐标,也就是我们的很多代码都是计算动画的坐标的。...== VISIBLE;//屏幕当前可看的话,返回true,否则返回false,也就是进入有抽屉效果的界面上,我们才可以进行抽屉的效果展示 if (!

    1.5K20

    从零开始的Android:常见的UI设计模式

    从这里开始,您的用户应该能够执行快速动作并继续前进,或者进一步深入到您的应用以完善他们想要完成的工作。 根据您的应用程序的目标,为该屏幕选择用户界面设计模式。...根据Android的材料设计指南,选项卡也可以存在于屏幕底部,如Google+应用程序所示。 导航抽屉 导航抽屉是一个视图,可以应用程序的侧面滑出,以便向用户显示选项列表。...至少,该工具栏包含该部分或应用程序的标题,但是工具栏设计模式还有助于将操作按钮直接放置工具栏或溢出菜单,以允许用户应用程序的该部分执行任务。...Google Keep应用程序可以找到一个示例,该应用程序使您可以更改便笺的颜色,向该便笺添加其他人以及溢出菜单存在的许多其他操作。...最近,谷歌已开始各种其他类型的设备(包括电视和智能手表)上使用Android。 这就要求采用新的设计模式,以充分利用每种尺寸。

    2.7K20

    『React Navigation 3x系列教程』createDrawerNavigator开发指南

    、headerLeft等; DrawerNavigatorConfig drawerWidth: 设置侧边菜单的宽度; drawerPosition: 设置侧边菜单的位置,支持’left’、 ‘right...有关详细信息,请参阅下文; contentOptions: 配置抽屉导航器内容,见下文; useNativeAnimations: 是否启用Native动画,默认启用; drawerBackgroundColor...: 侧边菜单的背景; initialRouteName: 初始化哪个界面为根界面,如果不配置,默认使用RouteConfigs的第一个页面当做根界面; order: drawer排序,默认使用配置路由的顺序...这也可以通过顶级路由器上使用screenProps.drawerLockMode 动态更新。... ) 大家在学习使用React Navigation3x过程遇到任何问题都可以

    7.1K10

    开发App抽屉功能,彻底掌握了吗?

    程序IT圈 只提供有用的编程技术,关注即可习得新技能 平时开发,带有抽屉效果的App,应该还是挺多,今天就来看看这个效果是如何实现的,我们用DrawerLayout控件来实现!...官方中文简介大概如下: DrawerLayout作为窗口内容的顶层容器,允许窗口的一个或两个垂直边缘拉出交互式“抽屉”视图。...抽屉定位和布局使用android:layout_gravity 子视图对应的属性进行控制,对应于您希望抽屉哪个侧面出现:左侧或右侧(或支持布局方向的平台版本上的开始/结束)。...请注意,您只能窗口的每个垂直边缘的一个抽屉视图。如果您的布局在窗口的每个垂直边缘配置多个抽屉视图,则会在运行时抛出异常。...res/layout ,新建一个toolbar.xml文件 <?xml version="1.0" encoding="utf-8"?

    39220

    最新Camtasia 2022免费版电脑录屏工具

    录制屏幕、导入 PowerPoint 演示文稿或添加已有的视频片段。 Camtasia 上手快。您不需要大笔预算或花哨的视频编辑技能。模板开始,或者只是录制您的屏幕并添加一些效果。... Audiate 直接将编辑过的视频发送到 Camtasia Timeline 自动同步自动移动 Camtasia 时间轴上的对象以匹配在 Audiate 中所做的编辑 自动拼接功能将编辑后的视频媒体自动连接到单个虚拟媒体...添加了最近的项目英雄缩略图和元数据 主视图中添加了试用和帐户状态散热器 添加了增强的学习选项卡体验 新的和改进的跨平台 Canvas 交互引擎。...点击录制按钮后,屏幕右下方会自动弹出录制前需要设置的硬件选项,是否全屏录制以及调整摄像头和麦克风。点击红色REC按钮(或者按F9),321倒计时结束后,开始屏幕录制。...剪辑视频 Camtasia软件提供了强大的屏幕录像、视频的剪辑和编辑、视频菜单制作、视频剧场和视频播放功能等。

    1.6K40

    Android官方的侧滑控件DrawerLayout的示例代码

    上网一查,原来这个控件是官方给我们提供的一个侧滑菜单控件。既然谷歌已经提供了一个侧滑控件,我们又何必去用一个三方的SlidingMenu控件来实现相同的效果。...官方中文简介大概如下: DrawerLayout作为窗口内容的顶层容器,允许窗口的一个或两个垂直边缘拉出交互式“抽屉”视图。...抽屉定位和布局使用android:layout_gravity 子视图对应的属性进行控制,对应于您希望抽屉哪个侧面出现:左侧或右侧(或支持布局方向的平台版本上的开始/结束)。...请注意,您只能窗口的每个垂直边缘的一个抽屉视图。如果您的布局在窗口的每个垂直边缘配置多个抽屉视图,则会在运行时抛出异常。...res/layout ,新建一个toolbar.xml文件 <?xml version="1.0" encoding="utf-8"?

    1.3K31

    Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

    用法 每个屏幕只推荐一个悬浮响应式按钮来表示最常用的操作。 行为 默认情况下,悬浮响应式按钮屏幕上以动画形式展开。...一致地使用圆形图标以app间强制最重要的操作的一致性。 ? 不要给悬浮响应式按钮多余的维度效果。 ? ---- 行为(此部分见原网站) 默认情况下,悬浮响应式按钮屏幕上以动画形式展开。...工具栏的操作需关联 Speed dial 按动悬浮响应式按钮可以甩出相关动作。 菜单被唤起后,该按钮应保持屏幕上。 同一地点点击应激活最常用的操作或关闭打开的菜单。 ?...不要在浮动操作按钮操作中放置溢出菜单最初的屏幕应该最多只有两次点击就能到达预期的目的地。 ? 将溢出操作置于工具栏的溢出菜单,而不是悬浮响应式按钮。 ?...悬浮响应式按钮变形时,以有逻辑的方式开始结束位置之间转换。 例如,不要通过其他材料。 变形动画应该是可逆的并且可以将新的材料片转换回浮动动作按钮。 ?

    5.8K90
    领券