01 底部Tab导航 描述： 当产品的整个体验流中是以几个常用功能模块（一般不超过5个）贯穿的，意味着用户需要在多个标签入口之间来回切换；为了保证切换的效率，将贯穿产品整个体验的流的模块平铺在Tab Bar...缺点： 用户不易发现，使用次功能需要二次点击，给用户在切换功能带来了操作成本； 可见性太差，用户还没能把汉堡菜单按钮和侧边栏联系起来，所以，侧边栏的渗透率很低； 不直观、不适用于主导航、如遇频繁操作的功能...一般位于产品顶部，通过点击呼出导航菜单； 通常用来筛选同一信息模块下不同类别的信息，或者快速启动某些常用的功能模块，而不需要频繁的页面跳转 ； Android中对应的控件为spinner控件，但该控件用于同一类别下不同视图之间的切换...iOS中下拉菜单为自定义控件，可以实现不同类别之间的切换； 下拉导航还有一种变式，就是下来菜单中展示两级甚至多级，一般在电商产品中比较常见，因为品类和筛选条件众多。 ?...优点： 菜单与界面的连贯性比抽屉式要好，容易让用户感知当前位置； 缺点： 位于屏幕上方，相对隐蔽且不能结合手势操作，不适合于频繁的切换功能使用； 考虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容
谷歌官方推出了一种侧滑菜单的实现方式（抽屉效果），即 DrawerLayout，这个类是在Support Library里的，需要加上android-support-v4.jar这个包。...抽屉菜单的宽度应该不超过320dp，这样用户可以在菜单打开的时候看到部分内容界面。...--可以在程序中根据抽屉菜单 切换Fragment--> <FrameLayout android:id="@+id/fragment_layout" android...ListView，下面会讲配合 Android M推出的NavigationView 遇到的问题 1、在点击DrawerLayout中的空白处的时候，底部的content会获得事件。...与DrawerLayout一起使用可以实现通用的侧滑菜单，布局如下 <?xml version="1.0" encoding="utf-8"?
实际上，只有这样才能保证 父限制与子限制不冲突 UnconstrainedBox 该组件不会对子组件产生任何限制，它允许子组件按照本身大小绘制，一般情况下，我们很少使用此组件，但在 去除 多重限制的时候也许会有帮助...Text 被放大后，占用的空间依然是红色的部分，所以第二个 Text 就会挨着红色的部分，最终就会出现重合 由于矩阵变换只会作用在绘制阶段，所以在某些场景下，在 UI 需要变化是，可以通过矩阵变换来达到视觉上的...打开抽屉的方法在 ScaffoldState 中，通过 Scaffold.of() 可以获取腹肌最近的 Scaffold 组件的 State 对象 ToolBar 下面，在 AppBar 中通过 Bottom...由于 Tab 菜单和 Tab 页面的切换需要通过，我们需要通过 TabController 去监听 Tab菜单的切换，然后在去切换 Tab 页面， 代码如： _tabController.addListener...， 在上面的例子中，TabBar 和 TabBarView 的 controller 都是同一个，正是如此， TabBar 和 TabBarView 正是通过一个 controller 来实现菜单切换和滑动状态同步的
Navigation drawer ---- 用法 Navigation drawer 提供对目的地和 app 功能的访问，如切换帐户。 它们可以永久在屏幕上显示，也可以通过导航菜单图标进行控制。...·有组织的 Navigation drawer 根据用户的重要性对目的地进行排序，首先常用的放置在最前面，再将与之相关的放在一起。...如果优先考虑进行帐户切换，则可以将帐户切换器放置在导航抽屉的 header 区域 ?...Dismissible standard drawers 可用于内容优先（如照片库）的布局或用户不太可能经常切换目的地的 app，且应该使用可见的 navigation menu icon 来打开和关闭抽屉...Permanently visible standard drawers 允许在不相关的目的地之间快速旋转。 此时需要一个 menu icon 进行控制，因为这种 drawers 不能被用户关闭。
（2）TabNavigator：类似底部导航栏，用来在同一屏幕下切换不同界面 （3）DrawerNavigator：侧滑菜单导航栏，用于轻松设置带抽屉导航的屏幕 ?...iOS默认在底部，安卓默认在顶部 swipeEnabled:是否允许在标签之间进行滑动 animationEnabled:是否在更改标签时显示动画 lazy:是否在app打开的时候将底部的标签栏全部加载...路径 - 提供routeName到路径配置的映射，它覆盖routeConfigs中设置的路径。 backBehavior - 后退按钮是否会切换到初始路由？...2.2 TabNavigator案例 react-navigation组件除了可以用做页面间的跳转，当然也可以用做tab界面之间的切换。 导入react-navigation的子组件。...定义抽屉导航 HomeScreen与MineScree是导入外界的两个界面，将它们定义到DrawerNavigator中。在抽屉导航中，将组件的属性也一起设置好。
在本文中，我们将为大家讲解另外一个用例，即类似操作栏 (Action Bar)、底部标签栏或者抽屉型导航栏之类的 UI 组件如何在应用中实现导航功能。...我需要在应用中增加一些页面，所以有必要使用抽屉式导航栏或者底部标签栏来辅助用户导航。但是我们该如何使用这些 UI 组件来集成导航功能呢？通过点击监听器手动触发导航动作吗？ 不需要！无需任何监听器。...选项菜单 应用的选项菜单现在尚未发挥作用。...为了使代码保持整洁、各个元素之间更加清晰，我们会在新的方法中实现相关操作，并且在 onCreate() 中调用该方法。...△ 在屏幕较宽的设备上运行 Donut Tracker 请注意，当我切换页面的时候返回按钮会自动显示在左上角。
操作 (action) 定义了可能的导航，但其不指定导航发生的时间，该逻辑存在于您的代码中。...取而代之的是在 DrawerLayout 中可以触发导航的菜单选项: ?...另一个我想特别指出的是 NavigationView: ? 这个视图目前在左边屏幕外，它是一个 NavigationDrawer 并且其菜单选项被用来在目的地之间导航。...导航部件 我们已经在层级结构中查看了几个 UI 组件，以及它们彼此之间是如何关联的，接下来我想介绍一下几个重要部件，导航组件正是利用它们来在目的地之间实现导航。...NavController NavController 是一个被导航组件使用的内部部件，其在幕后起着决定性的作用。
Android 中的 DrawerLayout 就是一个抽屉导航组件，所以这个组件的功能当然也是一样的。...我们的这个抽屉导航视图一开始是看不见的，就像抽屉一样，你不拉开抽屉你看不到东西，所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定...func 每当导航视图（抽屉）产生交互相互作用的时候调用此回调函数 onDrawerStateChanged func 每当抽屉的状态变化时调用此回调函数。...抽屉可以有3种状态： dle（空闲），表示现在导航条上没有任何正在进行的交互。 dragging（拖拽中），表示用户正在与导航条进行交互。...renderNavigationView 该方法用于渲染一个可以从屏幕一边拖入的导航视图 statusBarBackgroundColor color 使抽屉导航覆盖整个屏幕，并绘制状态栏的背景，使其能够在覆盖到状态栏
另外，本文还将提供原生应用设计示例，以帮助你更好的理解本文所写的内容。 导航模式的差异 在界面之间切换是移动应用中的常见操作。...在Android应用中被大家熟知的导航模式是抽屉和标签形式的组合。 抽屉导航其实是一个菜单，通过点击汉堡图标，然后从左侧或右侧滑出。...左侧就是抽屉导航；右侧是标签栏 在Material Design中还有一个组件叫做底部导航。这个组件对于安卓原生应用来说也非常重要。底部的菜单项很容易点击和操作。...但是安卓规范其实不建议同时使用底部导航和标签，因为它可能会在导航时引起混乱。 底部导航(Material Design) 在Apple的人机交互规范中，没有类似抽屉菜单的标准导航控件。...两者之间存在一些客观差异，例如Android中有全局导航栏而在iOS中却没有，以及两者在视觉上的差异。 Apple认为，常用导航入口应该尽可能的外置，一些用户不常用的功能才需要被放进汉堡菜单中。
2、顶部标签导航 顶部导航在ios app中一般用作二级导航，在andriod app中这种导航模式一般用作一级导航，但自从谷歌推出”抽屉式导航“以后，顶部标签导航一般就用作二级导航，当内容分类较多的时候一般采用顶部标签导航设计模式...抽屉式导航是指将一些不常用的功能隐藏在当前页面，当需要用到的时候点击入口或者侧滑即可像抽屉一样展开，上面也说了，这种适合不需要经常切换的次要功能，比如设置、关于、会员等，快手和QQ是采用这种导航形式。...四、下拉式导航 和抽屉式导航类似，下拉式导航也是隐藏次要入口的一种形式，一般位于产品顶部，点击呼出导航菜单，导航的菜单以浮层的形式位于界面上层，通过点击导航菜单以外的区域使其收起，下拉式导航的面积一般较小...比如下图的拍拍贷和美团。 ? 五、宫格导航 宫格导航主要将入口全部集中在主页面中，各个入口之间相互独立，没有太多的交集，无法跳转互通。 ?...六、列表导航 列表导航是现有app中一种主要的信息承载模式，列表导航和宫格导航类似，属于二级导航，只不过有时候列表导航太长，不利于用户操作的时候才会采用宫格导航，通常不会展示任何实质功能。 ?
基础知识 默认 TarBar Tabbar[1] 在 app.json 中配置，作用范围为 TabBar 页，常驻页面最底部，占据页面高度 50px，有 iPhone x 全面屏适配。...在自定义 tabBar 模式下 为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。...1 : -1} /> 动画调研 抽屉动画演示 在移动端 UI 中汉堡包菜单配合抽屉式弹出动画是很常见的交互动效之一。...（具体效果情况请看上面的视频） Tab 页切换有两种实现思路： 分为多个有页面实体的 Tab 页 在页面切换后，需要重新产生 TabBar 组件实例 切换动画不够理想，但页面逻辑完全独立 在一个实体页面内...在抽屉式动画中，抽屉菜单和页面容器的动画参数是核心，可以有一点回弹效果 .menu-main { transition: 0.35s cubic-bezier(.75,.26,.02,1.01)
github地址：https://github.com/shuaijia/MaterialDesignProject 简介 DrawerLayout是Support Library包中实现了侧滑菜单效果的控件...； DrawerLayout分为侧边菜单和主内容两个部分，侧边菜单可以根据手势或点击控制展开与隐藏，主内容区可随菜单点击而切换（自己实现）； DrawerLayout 提供 当界面弹出的时候，主要内容区会自动背景变黑...，当点击内容区的时候，抽屉布局会消失 在屏幕边缘手势滑动 会拉出抽屉布局 注意：当按后退键的时候，如果抽屉布局正在显示，则需要关闭抽屉布局 效果 ?...注意：在侧滑菜单区必须设置 android:layout_gravity 这个属性，只要布局中设置了android:layout_gravity，它就是侧滑菜单，当然，它可以是任一View或ViewGroup...点击事件穿透问题 DrawerLayout界面点击事件穿透问题，即点击Drawerlayout上面的区域，会发现该位置DrawerLayout覆盖掉的区域的控件可以被点击 解决方法：在抽屉完全打开时设置
随意拖出一个组件，这里我们以Mockplus中的按钮组件为例。 ? 2.拖出弹出菜单组件，将按钮右上角的链接点与菜单组件相连。 ? 3.双击弹出菜单以编辑菜单位置及内容。 ?...三、抽屉 抽屉是一个常用的容器型组件，其特点为高度封装、高度可调节性、高度可容纳性，换句话说，您无需自行设计抽屉的细节，只需简单设置几下即可的到一个以多种方式滑出。 ?...在将按钮的链接点与抽屉连接后，双击抽屉图标即可添加组件。 ? 四、图片轮播 图片轮播组件支持数张图片的乱转展示，同样操作简单。先将图片轮播组件拖入工作区内，双击添加图片即可。 ?...但是它一般不会单独使用，你可以使用它和菜单栏、列表、选项卡等具有多选性质的组件来配合，共同完成内容切换。 ?...在编辑模式中拖入需要加入滚动区的组件，鼠标点击“+”来扩展滚动区大小，点击“-”来收缩滚动区大小，如果你同时按下Ctrl键，可加速扩展或收缩。 ?
ViewPager 二、抽屉菜单 三、行政区搜索 四、行政区展示 ① 省市级联 ② 返回上一级 五、地址转坐标 六、切换地图中心 七、查看天气 八、加载弹窗 九、源码 前言 在上一篇文章中完成了高德地图的使用及地图天气的显示...修改一下标题 然后就是修改HomeActivity中的initView方法中的代码，如下图所示： 下面运行一下： 二、抽屉菜单 之前在主页面的HomeActivity中使用过抽屉菜单，现在需要在...(GravityCompat.END)); 这里点击按钮是显示这个抽屉页面，这里设置是从屏幕右侧打开，如果不设置则默认是从左侧打开，因为我们在布局中设置抽屉的位置在右侧。...代码仍然在onActivityCreated方法中，如下所示： //抽屉菜单监听 binding.drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener...，如下图所示： 这说明我们已经拿到了全国的省级行政区了，那么我们给展示到抽屉菜单中。
、headerLeft等； DrawerNavigatorConfig drawerWidth: 设置侧边菜单的宽度； drawerPosition: 设置侧边菜单的位置，支持’left’、 ‘right...: 侧边菜单的背景； initialRouteName: 初始化哪个界面为根界面，如果不配置，默认使用RouteConfigs中的第一个页面当做根界面； order: drawer排序，默认使用配置路由的顺序...可以从props中获取； 打开侧边栏：navigation.openDrawer();； 关闭侧边栏：navigation.closeDrawer();； 切换侧边栏：navigation.toggleDrawer... ) 大家在学习使用React Navigation3x过程中遇到任何问题都可以在...React Navigation3x的视频教程中寻找答案哈。
我们想在这篇文章中和大家分享一下，团队在整个开发过程中克服了哪些挑战，转用手势导航的理由是什么，以及所作的一些妥协。...在过去的三年里，移动设备领域历经几轮导航变革，各式各样的手势导航模式层出不穷 (手势的历史最早可以追溯到 2009 年!)。...应用抽屉和其它侧滑操作 经过多番权衡与谨慎考量，我们最终决定将侧滑设为返回操作，但是在此过程中，尤其是在降低手势对应用的影响方面，我们作出了许多艰难的取舍。...比如说，我们发现 3% 到 7% 的用户 (具体比例因应用而异) 通过侧滑手势打开应用导航抽屉，其余用户则选择点击汉堡形菜单按钮来弹出抽屉。...在定性研究中，我们发现经过最初 1 到 3 天的磨合期，用户逐渐熟悉操作后，便可以顺利区分这两种手势。而且一旦适应后，大多数用户反而不想切换回三键导航 (尽管设备依旧提供这个选项)。
他会在一张张卡片上写下一个又一个故事片段，然后就像搭积木一样，将这些片段整合到一起成为一个完整的故事。 我并不从开头写起，一章接一章地写到结尾。...SnippetsLab的终极目的就是将你容易遗忘在电脑角落中的各种代码片段收集在一起，构建成你个人的巨大的代码片段库。...Snippetslab的菜单栏助手有点像印象笔记的菜单栏助手的感觉，但在功能上更为强大，可以说在很多情况下这个菜单栏助手可以完全代替程序主体来使用。...创建片段 从菜单栏中创建新的片段。 Snippetslab在设置里可以选择从dock隐去，这样我们平时就只能看见菜单栏上的图标。...您可以使用所有标准markdown语法，并将不同种类的语言混合在一个代码片段中。在单击之间切换编辑/预览模式。 ?
实际上，Google 官方的应用也有不遵照规范的地方，不能太拘泥于条条框框。...2.3 动画 Material Design 重视动画效果，它反复强调一点：动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。...** 图片上的文字 ** 编辑 图片上的文字，需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间，浅色的遮罩透明度在40%-60%之间。 ...单个瓦片不支持滑动手势，也不鼓励使用拖放操作。 网格中的单元格间距是2dp或8dp。 列表（Lists） 编辑 列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。...编辑 单选按钮（Radio button） 编辑 复选框（Checkbox） 编辑 开关（Switch） Tabs 编辑 在一个 app 中，tabs 使在不同的视图和功能间探索和切换以及浏览不同类别的数据集合起来变得简单
Snippets 是你在 Source 面板中创建的脚本。这些脚本可以获取到页面的 JavaScript 上下文，你可以在任意页面运行它们。代码片段就是书签bookmarklets的替代品。...图片 Sources > Snippets 面板展示你保存的片段列表，下面截图的例子是空列表。 图片 创建 snippets 你可以通过在 Snippets 面板中创建片段。...输入片段的名字并按回车保存。 图片 从命令菜单创建一个片段 在 DevTools 内聚焦你的光标。...图片 如果你不喜欢程序自定义片段的名称，请查看下面重命名 snippets 小节。 编辑 snippets 打开 Snippets 面板 在 Snippets 面板中，点击你想要编辑的片段。...图片 从命令菜单运行一个片段 在 DevTools 内聚焦你的光标。 按下 Control+O (Windows/Linux) 或者 Command+O (Mac) 去打开命令菜单。 输入 !
//其它属性见源码注释 }) 如果给Scaffold添加了抽屉菜单，默认情况下Scaffold会自动将AppBar的leading设置为菜单按钮（如上面截图所示），点击它便可打开抽屉菜单。...（抽屉菜单） Scaffold的drawer和endDrawer属性可以分别接受一个Widget来作为页面的左、右抽屉菜单。...如果开发者提供了抽屉菜单，那么当用户手指从屏幕左（或右）侧向里滑动时便可打开抽屉菜单。...本节开始部分的示例中实现了一个左抽屉菜单MyDrawer，它的源码如下： class MyDrawer extends StatelessWidget { const MyDrawer({...抽屉菜单页由顶部和底部组成，顶部由用户头像和昵称组成，底部是一个菜单列表，用ListView实现 FloatingActionButton FloatingActionButton是Material设计规范中的一种特殊
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
