文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

深入浅出 NavigationUI | MAD Skills

这是第二个关于导航 (Navigation) 的 MAD Skills 系列，如果您想回顾过去发布的内容，请参考下面链接查看: 导航组件概览 导航到对话框 在应用中导航时使用 SafeArgs 使用深层链接导航...所以我准备增加一个追踪咖啡的功能。我需要在应用中增加一些页面，所以有必要使用抽屉式导航栏或者底部标签栏来辅助用户导航。但是我们该如何使用这些 UI 组件来集成导航功能呢？...= binding.toolbar 要在默认的操作栏 (Action Bar) 中添加导航功能，我在这里使用了 setupActionBarWithNavController() 函数。...抽屉式导航栏 虽然看上去不错，但是如果您设备的屏幕尺寸较大，那么底部标签栏恐怕无法提供最佳的用户体验。...要解决这个问题，我会使用另外一个布局文件，它带有 w960dp 限定符，表明它适用于屏幕更大、更宽的设备。

3K30

Human Interface Guidelines —— 工具栏（Toolbars）

Toolbar Toolbar出现在app屏幕的底部，并包含用于执行与当前视图或其中的内容相关操作的按钮。  Toolbar是半透明的，可能具有背景色，并且当人们不太可能需要它们时，它们通常隐藏。...例如，在Safari中，当您开始滚动页面时，工具栏会隐藏，因为您可能正在阅读。 您可以通过点击屏幕底部再次显示。 当键盘出现在屏幕上时，toolbar也会隐藏。...·避免在toolbar中使用分段控件（segmented control） 分段控件允许人们切换上下文，而工具栏是特定用于当前屏幕的。如果您需要提供切换上下文的方式，请考虑使用tab bar。...TIP 理解toolbar和tab bar之间的区别很重要，因为这两种类型的栏都出现在应用程序屏幕的底部。 ...Toolbar包含用于执行与当前上下文相关的操作的按钮，例如创建项目，删除项目，添加注释或拍摄照片。

1.2K100
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    iPhoneX 适配实践

     4、不要刻意遮挡和和引导屏幕的关键位置，比如用纯黑色的navigationbar和toolbar遮住上下区域，或者用闪亮的背景强调底部指示器区域。...上图为官方标准的黑色背景，注意不是纯黑色的，还能分辨传感器区域  三、SafeArea安全区域 安全区域是指在屏幕顶部和底部区域之间能正常显示内容的区域。...解决方案：系统的UIToolBar会自动扩展背景颜色到底部，可以让Custombar继承UIToolBar，或者直接放置一个ToolBar的在底部当做背景也是可以的。注意高度不能超过48，否则失效。...3、TableView布局 如果底部区域不存在可交互的固定组件，那么tableView需要延伸到屏幕底部。...4、横屏交互适配 主要涉及到视频播放的边缘交互按钮。 内容 内容只需放置在SafeArea之内。同样底部如果没有固定可交互组件也要延伸到屏幕底部。

    3.8K41

    Kivy 中的多个窗口

    在 Kivy 中，可以使用不同的屏幕（Screen）来实现多个窗口的功能。屏幕是 Kivy 中的基本布局元素之一，它可以包含其他控件，如按钮、标签、输入框等。...在 Kivy 中，我们可以使用 BoxLayout 或 GridLayout 等布局管理器来创建主屏幕。2.2 创建其他屏幕接下来，我们需要创建其他屏幕，这些屏幕可以包含不同的内容。...在 Kivy 中，我们可以使用 ScreenManager 来管理多个屏幕。...2.3 切换屏幕当用户单击主屏幕上的导航元素时，我们需要切换到相应的屏幕。在 Kivy 中，我们可以使用 ScreenManager.switch_to() 方法来切换屏幕。...然而我们在标准应用开发中，推荐使用ScreenManager和Popup来处理不同的内容和临时窗口，这通常足以满足大多数应用场景的需求。

    21810

    手机QQ空间iPhone X适配总结

    另一个就是底部的Home Indicator，用以取代原来的Home物理按键，高度为34pt。 除此之外，屏幕不再是方形的，而是圆角矩形，使用的图标也是@3x，和现在的plus机型一样。...而全屏化主要修改的是启动页，如果启动页使用storyboard或者xib文件，那么全屏化无需添加任何操作，同时也推荐使用该方式，但是如果之前使用的images.xassets放置启动页，那么需要把原来的...状态栏到底还要不要隐藏 在完成全屏化后我们得到的界面如下图所示。 [image.png] 由上图可知，状态栏展示内容其实非常少，而且不完整。...，当我们在全屏界面隐藏了状态栏之后，statusBarFrame获取到的size为0，可能会出现控件布局错乱，因此最稳妥的方法还是判断是否iPhone X返回一个常数，如下所示。...需要注意的坑 关于TabBar高度，在VC的viewWillAppear中获取到的是默认原始高度49，而到了viewDidAppear时获取到的高度为83，这就导致了在popVC时可能底部tabbar发生一个从下到上的跳动

    1.8K30

    Android实现长图截取、拼接和添加水印

    本文的讨论是基于手机在没有root情形。 早期版本的Android是没有提供截屏功能的，到4.0时代后才自带了音量Down+电源键截屏的功能。...当然这个方法截图是无法截取时间电量的状态栏信息的。 需求来了 截取WebView中显示的所有内容，这个功能就不能用以上提到的方式，否则只能截图屏幕大小的图片。 首先看下截图预览 ?...（不包括时间电量状态栏）和底部的bottomBar的截图，并且需要在截图中添加水印 这就需要用到一开始提到View的截图方法了，分别截取了这几个图片后，拼接组成一个新的长图。...添加水印的方法是先把文本绘制成图片，然后水印图绘制到新的长图中。...底部bar * @param contentView 内容View * @param watermark 是否添加水印 * @param callback 回调，返回截图地址 */public

    2.3K10

    UINavigationController 导航控制器概念属性方法

    NavigationItem包含多个UIBarButtonItem NavigationController管理着ToolBar，通过navigationController.toolbar方式调用 控制器管理的东西...,nonatomic,readonly) UIToolbar *toolbar; 8、获取导航中的返回手势对象（iOS7之后，在导航中右划会进行pop操作，设置这个的enable可以控制设置手势是否失效...toolbarClass:(nullable Class)toolbarClass; （2）使用系统默认的导航栏和工具栏，创建一个导航控制器同时设置一个根视图控制器 - (instancetype)initWithRootViewController...UIViewController *)viewController animated:(BOOL)animated; 这个方法是为了iOS方法的命名统一，在导航中，其作用和push一样 - (void)...继承该父类的控制器调用此方法都可以隐藏push来的控制器底部的TabBar - (void)pushViewController:(UIViewController *)viewController animated

    2.2K60

    Kivy 5种常用图形界面布局初探

    在 Web 开发的前端 CSS 中，最常见的有栅格布局、绝对布局和相对布局。 在 Python 的 PyQt5 中，州的先生比较常使用的时网格布局、垂直布局和水平布局。...而 Kivy 也提供了不少的布局方式，供我们在使用 Kivy 开发跨平台的图形界面程序时使用。 ?...，实例化之后，调用add_widget()方法将小部件添加进入即可。...下面，我们就通过一些实例来了解 Kivy 的几种常用图形界面布局。 浮动布局 在浮动布局中，小部件基本上不受限制，浮动在布局中。我们通过设置小部件的大小和位置，来自由地控制布局内的小部件。 ?...固定布局 AnchorLayout固定布局用于固定布局层内小部件的位置，可以将小部件固定在左侧、右侧、顶部、底部和中央。

    3.7K10

    Kivy 图形界面开发初体验

    使用 kv 构建界面 Kivy 提供了一种简单且可扩展的 GUI 设计语言用来专门设计对 Kivy 的图形界面进行设计。...在本程序中，我们一共有 3 个地方使用了 Kivy 的设计语言，它们分别是： •时钟屏幕：clockscreen.kv•秒表屏幕：stopwatchscreen.kv•主界面：main.kv 在时钟屏幕中...在秒表屏幕中，我们按照如下方式定义构建了一个界面： ? 最后在主界面中，引入这两个屏幕，通过布局管理器，将其放置在了主界面中： ?...编写主程序代码 在通过 Kivy 的kv设计语言构建好了程序界面之后，我们来编写主程序的 Python 代码。...其通过kv设计语言，很大程序上把图形程序的界面和交互分离开来，使得程序的开发比较清晰。 如果需要使用 Kivy 开发出精美且功能强大的图形界面，还是得深入熟悉和了解 Kivy 的各类组件。

    8.6K20

    Human Interface Guidelines —— Tab Bars

    Tab Bars Tab Bars出现在app屏幕的底部，并提供在app不同部分之间快速切换的能力。...Tab Bars是半透明的，可以具有背景色调，在所有屏幕方向上保持相同的高度，并且在显示键盘时隐藏。 Tab Bars可能包含任意数量的tabs，但可见tabs的数量因装置大小和方向而异。...·当其功能不可用时，不要删除或禁用tab 如果tab在某些情况下可用，但在其他情况下不可用，则您的app界面会变得不稳定并且不可预知。 确保始终启用所有tabs，并解释tab内容不可用的原因。...TIP：理解 tab bar 和 toolbar 之间的区别很重要，因为这两种类型都出现在app屏幕的底部。 ...tab bar 可让用户在app的不同部分之间快速切换，例如时钟应用中的闹钟，秒表和计时器tab。Toolbar 包含用于执行与当前上下文相关的操作的按钮，如创建项目，删除项目，添加注释或拍摄照片。

    1.4K150

    使用vantUI下拉框（弹窗）的一些bug

    有3个问题： 当组件再接近屏幕底部的时候，下拉框的高度不会相应的变高，也就是说下拉框在什么位置点开的就在这个地方的下面展开，如果空间不足，非常影响使用。...尝试过去计算元素距离可视区域底部的距离，当到达某个距离的时候再去做一个弹起的效果，无奈太菜了，没有实现。...还有一个问题就是，当下拉框点开了之后，再拖动组件以外的地方，下拉框不会跟随屏幕移动，组件已经拉到上面了，下拉框还是停留在底部。这个好像也是vant的特点吧。。。...formData.pmTemperature" :options="options" /> 尝试二：select标签 问题：下拉选项的内容太多了...，所以点开下拉框的时候会非常长，以至于底部的选项就看不见也拉不上来了。

    3.5K20

    Android - 仿网易云音乐歌单详情页

    ： 实现思路： 1、Activity设置自定义Shared Element切换动画 2、透明状态栏（透明Toolbar,使背景图上移） 3、Toolbar底部增加和背景一样的高斯模糊图，并上移图片（为了使背景图的底部作为...其中内容根布局不要设置android:fitsSystemWindows="true",这样会额外添加一个状态栏。...3、Toolbar的背景图 仔细分析后发现网易云音乐的Toolbar的背景其实显示的是高斯模糊图的底部，所以这里基本套路是Toolbar是透明的，后面背景图取的是高斯模糊图的底部一部分。 ?...背景图 监听图片显示，在显示之后将其设置为透明色，然后在滑动的时候渐变。...这里值得注意的是在设置图片时不要设置加载中的图片，不然初始化时达不到透明的效果。

    1.4K10

    通过Kivy将Python文件打包成apk

    ,让我在配置无门时找到了方向; —镜像文件及GitHub链接传送门在底部,欢迎拍砖 二.安装操作 将Py文件打包成apk文件,江湖上暂有如下3个方法: 1.通过Buildozer;(在linux...环境下实现,集成式框架比较容易实现 2.通过python for android,(这种可以在windows下实现，但需要安装和配置许多内容,较为繁琐) 3.通过Kivy Launcher...上打包(需要用到谷歌市场,但想在我大天朝嘛….建议你选择别的) kivy打包的Buildozer有两种工具，分别是p4a和buildozer，kivydev64使用p4a，kivydev使用buildozer...所以推荐使用p4a，也就是kivydev64，这个打包环境也是第一个建立在64位ubuntu的环境。 1....进入到/home/kivydev//test是测试目录,该目录下的py2apk是py27打包,py3apk是py35打包,这两个版本的差别只在于不同版本的py配置文件,在该目录下的py文件,必须使用main.py

    3.5K20

    CC++ Qt ToolBar 菜单栏组件应用

    ToolBar工具栏在所有窗体应用程序中都广泛被使用，使用ToolBar可以很好的规范菜单功能分类，用户可根据菜单栏来选择不同的功能，Qt中默认自带ToolBar组件，当我们以默认方式创建窗体时，ToolBar...顶部工具栏ToolBar组件的定义有多种方式,我们可以直接通过代码生成,也可以使用图形界面UI拖拽实现,但使用代码时间则更加灵活一些,ToolBar组件可以表现出多种形态.首先来看一个简单的生成案例,如下代码中我们通过属性...，该菜单栏中可以通过SetIcon(QIcon("://image/1.ico"));指定图标，也可以使用setShortcut(Qt::CTRL | Qt::Key_C);为其指定特殊的快捷键。...); // 设置默认停靠范围(停靠在底部) toolBar->setFloatable(false); // 设置是否浮动为假 toolBar->setMovable...bar->setVisible(false);属性将其隐藏起来，对外只展示出一个ToolBar控件栏位，ToolBar控件栏中只保留ICO图标与底部文字描述，这样能显得更加清爽一些。

    1.2K20

    CC++ Qt ToolBar 菜单栏组件应用

    ToolBar工具栏在所有窗体应用程序中都广泛被使用，使用ToolBar可以很好的规范菜单功能分类，用户可根据菜单栏来选择不同的功能，Qt中默认自带ToolBar组件，当我们以默认方式创建窗体时，ToolBar...顶部工具栏ToolBar组件的定义有多种方式,我们可以直接通过代码生成,也可以使用图形界面UI拖拽实现,但使用代码时间则更加灵活一些,ToolBar组件可以表现出多种形态....，该菜单栏中可以通过SetIcon(QIcon("://image/1.ico"));指定图标，也可以使用setShortcut(Qt::CTRL | Qt::Key_C);为其指定特殊的快捷键。...); // 设置默认停靠范围(停靠在底部) toolBar->setFloatable(false); // 设置是否浮动为假 toolBar->setMovable...bar->setVisible(false);属性将其隐藏起来，对外只展示出一个ToolBar控件栏位，ToolBar控件栏中只保留ICO图标与底部文字描述，这样能显得更加清爽一些。

    1.6K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券