如何使用透明导航栏和工具栏正确地设置推送视图控制器的动画？

透明导航栏和工具栏是一种常见的UI设计技巧，可以使应用界面更加美观和用户友好。在设置推送视图控制器的动画时，可以按照以下步骤进行操作：

首先，确保你的应用使用了导航控制器（UINavigationController）来管理视图控制器的导航。导航控制器提供了导航栏和工具栏的管理功能。
设置透明导航栏：在推送视图控制器之前，你可以通过以下代码来设置导航栏的透明度：

navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.isTranslucent = true

这样设置后，导航栏将变为透明，可以显示出底部的视图内容。

设置透明工具栏：如果你的应用使用了工具栏，你可以通过以下代码来设置工具栏的透明度：

navigationController?.toolbar.setBackgroundImage(UIImage(), forToolbarPosition: .any, barMetrics: .default)
navigationController?.toolbar.setShadowImage(UIImage(), forToolbarPosition: .any)
navigationController?.toolbar.isTranslucent = true

这样设置后，工具栏将变为透明。

推送视图控制器：在需要推送新的视图控制器时，可以使用以下代码进行推送：

let viewController = YourViewController()
navigationController?.pushViewController(viewController, animated: true)

这样设置后，新的视图控制器将以动画的形式推送到导航栈中。

需要注意的是，以上代码只是设置透明导航栏和工具栏的一种方式，你可以根据实际需求进行调整和修改。

关于透明导航栏和工具栏的应用场景，通常用于需要展示背景图片或者底部内容的界面，例如图片浏览器、全屏视频播放器等。

推荐的腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，这里无法给出具体链接。但腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等，你可以通过搜索腾讯云官方网站或者咨询腾讯云的客服获取更多相关信息。

相关·内容

iOS 9人机界面指南(四)：UI元素（上） - 腾讯ISUX

举个例子，不要在同一个应用中使用不透明导航栏和半透明工具栏。在屏幕处于同一方向时，最好不要改变不同屏上导航栏的背景图片、颜色和透明度。确保你自定义的返回按钮的外观与操作仍然像一个返回按钮。...工具栏：是半透明的在iPhone上，工具栏始终位于屏幕底部，而在iPad上则有可能出现在顶部当键盘被唤起、用户使用了手势、或者当前视图变为竖屏的情况下，工具栏可以隐藏。...想要了解如何设计自定义图标，请参考本文第五章栏按钮图标(Bar Button Icons)部分。工具栏和导航栏图标的颜色可以通过tintColor属性来设定。...重要跟所有标准按钮和图标相同，应当根据文档中说明的图标含义，而不是只凭图标外观来使用这些工具栏图标和导航栏图标。...导航栏，工具栏，和标签栏可以操作当前app视图中的对象的各种控件或对象（默认情况下，浮出层中的表格视图，导航栏和工具栏的背景都是透明的，这样会让浮出层的毛玻璃效果展示出来）在横屏的情况下，动作列表总是出现在浮出层里

10.1K5 1

Cocoa编程中视图控制器与视图类详解

UIViewController实例负责设置视图的外观和它显示的子视图。 UINavigationController类 1. 导航控制器使用内置动画在视图之间切换； 2....使用pushViewController: animated:可推入一个新的控制器，从而增加新的项到导航栈。(记住：导航栏控制器不添加一个视图进去，这个导航栏是没有意义的！)...可使用popToRootViewControllerAnimated:BOOL直接弹出到根视图控制器。 6. 设置导航栏的按钮并不是去设置导航栏本身。...视图控制器剖析视图控制器有一个导航项，一个工具栏子项集以及一个tabbarItem项与其关联。 3....:animated:设置工具栏子项 • – setEditing:animated:设置编辑状态 5.

5K5 0

UI篇－UINavigationController之易忘补充

设置导航栏的背景图片（多见于导航背景颜色是渐变颜色，使用一张图片）但是这张图片设置好以后，所有的控件的Y坐标都会下移64，也就是说，这张图片会占用屏幕的64pt 高度的屏幕，而且无法被普通试图覆盖使用...在入口类中全局设置就可以达到统一导航栏颜色的效果。 ...：action：设置视图的触发事件 tintColor 设置tintColor可以影响添加在导航条上的系统样式的按钮的颜色 title：标题 titleView ：标题视图 leftBarButtonItem...每个视图控制器都有一个navigationItem属性，navigationItem中设置的做按钮、右按钮、标题等，会随着控制器的显示，也显示到navigationBar上我们来看一下这些名词是什么意思...，通过设置 self.navigationController.toolbarHidden = NO来显示工具栏，工具栏中的内容可以通过viewController的toolbarItems来设置，显示的顺序和设置的

2.1K2 0

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

*barHideOnSwipeGestureRecognizer; 10、屏幕滑动的时候是否隐藏导航栏，常用于tableView，上滑隐藏导航栏，下滑显示，带动画效果 @property (nonatomic...（1）通过一个自定义的导航栏和工具栏创建导航控制器 - (instancetype)initWithNavigationBarClass:(nullable Class)navigationBarClass...toolbarClass:(nullable Class)toolbarClass; （2）使用系统默认的导航栏和工具栏，创建一个导航控制器同时设置一个根视图控制器 - (instancetype)initWithRootViewController...:(UIViewController *)rootViewController; 2、设置管理的视图控制器 - (void)setViewControllers:(NSArray<UIViewController...navigationControllerPreferredInterfaceOrientationForPresentation:(UINavigationController *)navigationController; （5）下面两个方法可以设置导航的转场动画

2.1K6 0

iOS开发UINavigation系列四——导航控制器UINavigationController

和UIToolBar，UINavigationController是将这些控件和UIViewController紧密的结合了起来，使用导航，我们的应用程序层次会更加分明，对controller的管理也更加方便.../通过一个自定义的导航栏和工具栏创建导航控制器 - (instancetype)initWithNavigationBarClass:(nullable Class)navigationBarClass... toolbarClass:(nullable Class)toolbarClass; //使用系统默认的导航栏和工具栏，通过一个根视图创建导航控制器 - (instancetype)initWithRootViewController...:(UIViewController *)rootViewController; 通过以下方法对视图控制器进行管理操作： //设置管理的视图控制器 - (void)setViewControllers:...; //屏幕滑动的时候隐藏导航栏，常用于tableView,上滑隐藏导航栏，下滑显示，带动画效果 @property (nonatomic, readwrite, assign) BOOL hidesBarsOnSwipe

1.8K2 0

Android开发笔记（一百四十四）高仿支付宝的头部伸缩动画

这个内容视图可以是RecyclerView，也可以是NestedScrollView； 2、AppBarLayout嵌套CollapsingToolbarLayout，这是为了定义导航栏下面需要展开和收缩的部分视图...这个渐变动画其实可分为两段： 1、导航栏从展开状态向上收缩时，头部的各控件要慢慢向背景色过渡，也就是淡入效果； 2、导航栏向上收缩到一半，顶部的工具栏要换成收缩状态下的工具栏布局，并且随着导航栏继续向上收缩...看起来还比较复杂，如果只对某个控件做渐变动画还好，可是导航栏上的控件有好几个，而且并不固定常常会增加和修改。倘若要对导航栏上的各控件逐一动画过去，不但费力气，而且后期也不好维护。...为了解决这个问题，我们可以采取类似遮罩的做法，即一开始先给导航栏罩上一层透明的视图，此时导航栏的画面就完全显示；然后随着导航栏的移动距离，计算当前位置下的遮罩透明度，比如该遮罩变得越来越不透明，看起来导航栏就像蒙上了一层面纱...反过来，也可以一开始给导航栏罩上一层不透明的视图，此时导航栏的控件是看不见的，然后随着距离的变化，遮罩变得越来越不透明，导航栏也会跟着变得越来越清晰了。

1.2K1 0

最新iOS设计规范三｜3大界面要素：栏(Bars)

视图（Views）包含用户在APP中看到的基本内容，例如：文本、图片、动画以及交互元素。视图可以具有滚动、插入、删除和排列等交互行为。控件（Controls）控件，是用于触发操作并传达信息的。...导航栏是半透明的，也可以添加背景色，并且必要时可以设置为隐藏。 ? 某些情况下可暂时隐藏导航栏，以提供更沉浸的体验。例如，当人们查看全屏照片时，“照片”会隐藏导航栏和其他界面元素。...iPad上的拆分视图是一个例外，更多的是通过在这两种视图中使用无边框样式来保持主视图和辅助视图之间的一致性。导航栏控件避免在导航栏上挤满太多控件。...你可以同时提供自定义的蒙版图像，以便系统在转场过渡时使用此蒙版为按钮标题设置动画效果。不要包括多段面包屑路径。后退按钮始终执行单个操作：返回上一屏幕。...六、工具栏（Tool Bars） 工具栏出现在页面的底部，其中包含执行与当前视图或内容相关操作的按钮。工具栏是半透明的，也可以添加背景颜色，并在用户不需要它们时应该隐藏起来。

9.8K1 0

iOS 9人机界面指南（一）上篇：UI设计基础 - 腾讯ISUX

视图的所有类型有：控件（比如按钮和滑块）、内容视图（比如集合视图和表格视图），以及临时视图（如警告提示和动作菜单）。要在应用中管理一组或者一系列的视图，通常需要使用视图控制器。...它能协调视图的内容显示，实现与用户交互的功能并能在不同屏幕内容之间切换。比如，“设置”使用了一个导航控制器来展示其视图层级。...这里有一个关于视图与视图控制器如何结合并呈现iOS应用的UI的例子，如图。 ? 尽管开发者认为真正起到作用的是视图和视图控制器，但一般用户感知到的iOS应用是不同屏幕内容的集合。...举个例子，当垂直尺寸从压缩变为常规时，导航栏和工具栏会自动变高。当你靠尺寸类别来驱动布局变化时，你的应用在任何显示环境时都能显示得很好。...分段控件让用户在一屏内就可以查到不同分类的内容，而不需要切换到其他屏幕。 工具栏（Toolbar）。尽管工具栏和导航栏或标签栏相似，但是工具栏不具导航作用。

1.8K4 1

Flutter质感设计之底部导航

BottomNavigationBar即底部导航栏控件。显示在应用底部的质感设计控件，用于在少量视图中切换。...底部导航栏包含多个以标签、图标或两者搭配的形式显示在项目底部的项目，提供了应用程序的顶级视图之间的快速导航。对于较大的屏幕，侧面导航可能更好。...类CustomIcon创建一个容器控件，作为一个自定义的图标使用。同时使用质感设计的弹出菜单控件切换底部导航栏的行为和样式。...view in _navigationViews) // 每次动画控制器的值更改时调用侦听器 view.controller.addListener(_rebuild); // 底部导航栏当前选择的动画控制器的值为...：存储底部导航栏的当前选择 currentIndex: _currentIndex, // 底部导航栏的布局和行为：存储底部导航栏的布局和行为 type: _type, // 当点击项目时调用的回调 onTap

3K2 1

使用 Material Design 组件实现 Material 动效

例如示例的一个列表展开成为了详情页、FAB 变形为工具栏，或 chip 扩展为了浮动的卡片。...使用容器变换，实现视图间的动画切换，可帮助增强它们之间的联系，并维持一个用户的导航上下文。...如果没有设置退出时的过渡，我们的邮件列表会被立刻删除并从视图中消失。如果我们在这个时候运行代码，从详情页导航返回到邮件列表页，则返回过渡不会执行。...在每一个过渡配对中，forward 必须被设置为相同的值，以便正确地协调这对动画。如需了解更多关于共享轴方向性的详细信息，请查阅动效文档。...您可以在自己项目有趣的地方来使用淡入淡出模式，比如: 底部导航栏的切换、列表项的交换，或替换一个工具栏菜单。一往无前！本文简要介绍了 Android 的 Material 动效系统。

1.9K2 0

iOS开发常用之网络

GooeyTabbar - 皮筋式弹性缩放工具栏示例及演示。...JZNavigationExtension - 多功能导航控制器，可以透明返回栏。...FoldingTabBar.iOS - 可折叠标签栏和标签栏控制器。...LTNavigationBar - LTNavigationBar为导航栏添加动态着色效果，可自定义其背景色.Demo包含：1。变换背景色; 2。滚动视图，导航栏和状态栏重叠。...一个用于统一管理导航栏转场以及当推或者弹出的时候使动画效果更加顺滑的通用库，并且同时支持竖屏和横屏。

23.6K1 0

iOS好用的第三方侧边栏控件——MMDrawerController

，其支持左侧抽屉和右侧抽屉，可以很好的支持导航控制器，并且支持开发者对手势和动画进行自定义。...二、MMDrawerController的使用及相关设置 MMDrawerController的使用十分简单，只需将中心视图控制器和左边栏视图控制器传入初始化方法即可完成MMDrawerController...点击导航栏时可以关闭侧边栏 MMCloseDrawerGestureModeTapNavigationBar = 1 << 4, //点击中心视图控制器视图时可以关闭侧边栏...，并且在侧边栏出现过程中，这个回调block会被不停刷新调用，开发者可以直接在其中对要过渡的属性进行设置，例如透明度的渐变动画，示例如下： //进行自定义动画 [rootController setDrawerVisualStateBlock...2.同时展示左边栏与又边栏。 3.无法设置显示一个最小的抽屉宽度。 4.不能支持UITabBarController容器。 5.不能在中心视图控制器之上呈现侧边栏视图。

2.8K2 0

iOS 11 更大的导航（官方翻译版）

导航栏是半透明的，可能具有背景色调，并且可以配置为在屏幕上键入屏幕时隐藏，发生手势或视图调整大小。 ? 考虑在显示全屏内容时暂时隐藏导航栏。当您想关注内容时，导航栏可能会分散注意力。...暂时隐藏酒吧，提供更身临其境的体验。查看全屏照片时，照片会隐藏导航栏和其他界面元素。如果您实现这种行为，让用户使用简单的手势（如轻按）来还原导航栏。...有关开发人员的指导，请参阅UINavigationBar。提示不需要导航时使用工具栏，或者想要多个控件来管理内容。请参阅工具栏。导航栏标题考虑在导航栏中显示当前视图的标题。...导航栏控件避免拥挤导管栏的控制太多。通常，导航栏不应包含视图的当前标题，后退按钮和管理视图内容的一个控件。如果您在导航栏中使用分段控件，则该栏不应包含标题或除分段控件之外的任何控件。...如果用自定义图像替换系统提供的返回按钮人字纹，也可以提供自定义遮罩图像。iOS在使用此遮罩时，可以在转换期间为按钮标题设置动画。不要包含多段面包屑路径。

2.9K3 0

iOS头部渐变的表格视图设计原

iOS头部渐变的表格视图设计今天再来给大家带来一个开发中常用到的视图控制器，在很多应用中，可能都会遇到这样的一个需求：表视图控制器最上方有一个头图控件，当表格视图滑动在顶部时，导航栏透明...，当表格视图逐渐向下滑动时，导航栏渐渐出现，并且在滑动期间，头图会展示相关的渐变动画效果。...All rights reserved. /* * 这个视图控制器创建出带缩放头图效果的视图控制器 * tip： * 1.这个视图控制器如果是被导航push出来的则内部会使用假导航进行渐隐模拟... * 2.这个视图控制器如果是被present出来的则不会出现假导航栏 * 3.这个视图控制器中自带一个TableView 设置TableView的头图不会影响原动画效果 *...present出来，我在这个控件的实现时做了兼容，实际上无论有无导航，控件内部都没有使用系统的导航栏，而是模拟实现了一个自定义的导航栏来与系统的导航无缝衔接。

1.2K2 0

iOS导航栏切换界面时隐藏和显示

：实现：要实现这个简单的有无导航栏过渡其实很简单，直接在 viewWillAppear 和 viewWillDisappear 方法中对导航栏进行显示和隐藏就可以了，为了到达比较平滑的效果，建议对是否动画的参数选择...这个方法是直接隐藏了整个导航栏，所以如果要保存导航栏的一些返回按钮以及其他自定义的按钮，就需要自己在界面上去模拟添加，如果不想这么麻烦，也可以不隐藏导航栏，而是将导航栏的背景视图设为透明的： [...，我们还需要将透明的导航栏背景还原回来，这个还没有找到好的办法。...结上面的方法可以在只有导航栏控制器时比较好的操作，虽然不能做到像QQ那么好，但也能用，但如果有Tabbar存在，就会有问题。那如何做到QQ那样的效果呢？...这里有一篇文章实现了：传送门：导航栏的平滑显示和隐藏 - 个人页的自我修养（1），不过作者使用swift实现的，用到了extension，其实也就是OC下的category，之后我再研究一下OC下的实现好了

3.8K3 0

Ios常用第三方框架（二）

该项目通过三种形式展示页面之间的切换，比如导航栏上的多个tab切换、页面左右两端箭头指示切换，以及使用分段控件。...GooeyTabbar - 皮筋式弹性缩放工具栏示例及演示。...JZNavigationExtension - 多功能导航控制器，可以透明返回栏。 NavTopImage.swift - NavigationController动态缩放titleView。...ZWSlideViewController - ZWSlideViewController多页滑动视图控制器（类似新闻类门户APP）,可以用最简单的继承方法使用，也可以不用继承，只用菜单或主视图页面，可实现丰富的定制...TYPagerController - 简单，支持定制，页面控制器,可以滚动内容和标题栏,包含多种style。

7.6K6 0

【iOS开发-22】navigationBar导航栏，navigationItem建立：获取导航栏中的基本文本和button以及各种跳跃

（3）还有一个重要的知识是对navigationItem的设置，这个属性和navigationController是平级的，所以直接能够用self.navigationItem使用。...当然可用的有设置导航条标题的方法setTitle，当然你也能够直接把文字换成一个视图。...//视图的x和y无效。...,所谓跳转，事实上就是往导航控制器栈中PUSH或者POP一个视图控制器，这样在最上面的视图控制器就变了，这样视图也跟着变了，由于仅仅显示在栈顶得那个视图控制器的视图 //所以(1)控制所谓的跳转...事实上是导航控制器在控制，在里面的元素都能够通过navigationController属性获取到它们所在的导航控制器 //所以(2)获取到导航控制器之后，使用Push的那个方法，往栈里面放一个视图控制器

2.2K1 0

iOS 9人机界面指南（一）下篇：UI设计基础 - 腾讯ISUX

这个比率值可以通过在线对比度计算器或者根据WCAG2.0标准中提供的公式自己计算获得。你应用中理想的颜色对比度应该是4.5:1或更高。当你使用自定义的栏颜色时，着重考虑半透明的栏和应用内容。...导航控制栏的文本使用相同的字号，而内容文本的样式则使用大尺寸的设置（值为17点）。文本总是使用常规或者中重，一般不适用轻或者加粗。通常情况下，应用中整体应该使用单一字体。...1.11.2 小图标（Small Icons） iOS提供了一系列小的icon，用以代表各种常见任务与操作，它们常用在标签栏（Tab Bar）、工具栏（Toolbars）与导航栏（Navigation...请注意，你有时候也可以用文字来代替工具栏和导航栏的图标。...就像iOS的日历里面，工具栏上便是使用”今天”,”日历”和”收件箱”来代替图标进行表意的。 ? 想要决定在工具栏和导航栏中到底是用图标还是文字，可以优先考虑一屏中最多会同时出现多少个图标。

1.7K2 1

iOS开发UINavigation系列三——工具栏UIToolBar

iOS开发UINavigation系列三——工具栏UIToolBar iOS中除了UINavinationBar之外，还有工具栏UIToolBar可以供我们使用，工具栏和导航栏十分类似，...只是功能更加简单，工具栏中也有UIBarButtonItem按钮，在前两篇博客中，对导航栏和导航项都进行的讨论，地址如下： UINavigationBar：http://my.oschina.net/u...，与之相对，工具栏一般会出现在视图的的底部，上面可以填充一些按钮，提供给用户一些操作。...下面是UIToolBar中的一些方法，其中大部分在UINavigationBar中都有涉及，这里只做简单的介绍： //工具栏的风格，和导航栏类似，有黑白两种 @property(nonatomic) UIBarStyle... barStyle; //设置工具栏上按钮数组 @property(nullable,nonatomic,copy) NSArray *items; //设置工具栏是否透明

5511 0

iOS系统中导航栏的转场解决方案与最佳实践

ViewController 视图里的第一个子控件是 UIScrollView 类型的视图。 ViewController 是 navigation 或者 tab 类型控制器的子视图控制器。...而在开发期施加约束，则意味着我们要提供一套完整的解决方案让各个业务方遵守。这一节我们会以美团内部的解决方案为例，讲解如何实现一个流畅的导航栏跳转过程和相关使用方法。...，在视图控制器的 viewDidLoad 或者 viewWillAppear: 方法里去设置导航栏样式。...等到页面 B 调用 viewDidAppear: 的时候，转场库会将假的导航栏样式设置到真的导航栏中，并将假的导航栏从视图层级中移除，最终将真的导航栏显示出来。...透明样式导航栏的正确设置方法如果需要一个透明效果的导航栏，可以使用如下代码实现： [self.navigationController.navigationBar setBackgroundImage

2.3K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云