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

iOS透明导航栏的平滑过渡(进阶版)引实现过程结

引 如我在传送门:iOS导航栏切换界面时隐藏和显示中所说,现在很多App的个人中心模块都是不保留导航栏的,会直接使导航栏透明,比如做的很好的QQ个人信息界面: 为什么说QQ做的很好呢?...而很多App的做法其实比较粗糙,类似于我在传送门:iOS导航栏切换界面时隐藏和显示中的做法,需要导航栏透明时,直接将导航栏隐藏起来。...直接隐藏起来的意思是,整个导航栏就用不了了,也就是说,标题、返回按钮等都需要自己去做,这是一个比较麻烦的地方,此外,在有无导航栏的界面间切换时,过程是比较生硬的,导航栏不是渐变出现的。...,标题、返回按钮啥的都方便加,这也就是说不隐藏导航栏,而是要单独让导航栏背景透明; 2、在导航栏透明与否的界面间切换时透明度有渐变效果; 3、在UINavigationController体系和UITabarController...,包括返回按钮,因为我没有给导航栏添加任何其他按钮,所以这里一定是返回按钮,下属的 UILabel 就是 “返回” 两个字了。

3.1K40

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

导航栏是半透明的,也可以添加背景色,并且必要时可以设置为隐藏。 ? 某些情况下可暂时隐藏导航栏,以提供更沉浸的体验。例如,当人们查看全屏照片时,“照片”会隐藏导航栏和其他界面元素。...但是如果添加导航栏显得多余,则可以将标题留为空白。例如,Notes的导航栏就没有标题说明文字,因为第一行内容已经有了足够的提示。 当需要特别强调上下文时,请使用大标题。...在iOS 13及更高版本中,默认情况下,大标题导航栏不包含背景材质或阴影。另外,随着页面滑动,大标题要转换为标准标题。 ? 隐藏大标题导航栏的边框。...在iOS 13及更高版本中,可以通过删除导航栏的阴影来隐藏导航栏的底部边框(当滑动内容区域时,边框会自动重新出现)。无边框样式在大标题导航栏中效果很好,因为它增强了标题和内容之间的联系感。...三、侧边栏(Sidbars) 侧边栏在iPhone上使用较少,更多的用在iPad。它提供了应用程序的导航,在侧边栏中选择一项可以使人们导航到特定的内容。例如,“邮件”中的边栏显示所有邮箱的列表。

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

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

    在状态栏后面放一个低调的、不会抢走用户注意力的自定义图形——比如一道渐变。...举个例子,不要在同一个应用中使用不透明导航栏和半透明工具栏。在屏幕处于同一方向时,最好不要改变不同屏上导航栏的背景图片、颜色和透明度。 确保你自定义的返回按钮的外观与操作仍然像一个返回按钮。...(想要了解更多关于这个常数的内容,请参考 UIBarButtonItem Class Reference.) 4.1.4 工具栏与导航标准按钮 iOS提供了一系列工具栏与导航栏上的内置标准按钮。...书签(Bookmarks) 展示应用书签 搜索(Search) 展示搜索字段 添加(Add) 新建一个项 回收站(Trash) 删除当前项 归档(Organize) 将某个项移动到应用内其他位置...默认情况下,竖屏方向时只会展示右侧窗格,因此你需要向用户提供一个按钮(通常位于导航栏上)来让用户唤起和隐藏主窗格。对分视图控制器也支持轻扫手势来执行呼出和隐藏的动作。

    10.1K51

    iOS开发常用之网络

    TabBarController,支持自定义TabBarItem样式或添加动画 隐藏与显示 SlideTapBar - 滚动栏菜单,向上滚动时隐藏tabbar,向下滚动马上显示tabbar。...LTNavigationBar - LTNavigationBar为导航栏添加动态着色效果,可自定义其背景色.Demo包含:1。变换背景色; 2。滚动视图,导航栏和状态栏重叠。...LoopProgressDemo - 环形渐变进度条,环形渐变进度条实现。 XLPagerTabStrip - 做的很棒的iOS下的PagerTabStrip。...PKRevealController - PKRevealController是一个可以滑动的侧边栏菜单(可向左,向右或者同时向两侧),只需手指轻轻一点(或者按一下按钮,但是这样滑动时不够炫酷),这类控制的其他库...添加了版本的本地缓存功能,3。集成简单,使用方便,没有耦合度,4。支持block回调版本新特性,导航页,引导页)。

    23.7K10

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

    使用pushViewController: animated:可推入一个新的控制器,从而增加新的项到导航栈。(记住:导航栏控制器不添加一个视图进去,这个导航栏是没有意义的!)...要添加或修改导航栏按钮,使用UINavigationItem抽象类。...其描述了导航栏上显示的内容,而正好UIViewController另有一导航项属性navigationItem包括左栏按钮(leftBarButtonItem)、右栏按钮(rightBarButtonItem...)和栏标题(title)、用于显示标题的视图(titleView),以及用于从当前视图向后导航的Back按钮(backBarButtonItem)和隐藏后退按钮(hidesBackButton)。...向不同的视图同时提供一次单击访问,向用户选择的屏幕和编辑底栏的屏幕同时提供More按钮。

    5.1K50

    UIScrollView进阶技巧

    先看一下效果图吧,都来自我自己的项目: ? 栏目置顶.gif ? 隐藏按钮.gif ? 隐藏底栏.gif 先看第一个,是个挺常用的效果。...列表上面是三个栏目按钮和轮播图片,向上滚动时,按钮和图片一起向上,按钮周边区域颜色渐变,然后在到指定位置时(这里是盖住导航栏之后)按钮停住不动,周边颜色也完全变成导航栏的颜色,列表数据还可以继续滚动。...因为之前设置了contentInset,所以这个offsetY一开始是等于-TableViewInsetTop的。menuBtnH是栏目按钮的高,barHeight是导航栏的高。...我要做的效果是栏目按钮得盖住导航栏,所以按钮要在-offsetY = menuBtnH - barHeight的时候才会停下。...第三个效果就不是TableView了,而是个WebView,效果是向上滑动时隐藏底栏,向下时显示底栏。

    98240

    UI篇-UINavigationController之易忘补充

    设置导航栏的背景图片 (多见于导航背景颜色是渐变颜色,使用一张图片)但是这张图片设置好以后,所有的控件的Y坐标都会下移64,也就是说,这张图片会占用屏幕的64pt 高度的屏幕,而且无法被普通试图覆盖使用...在入口类中全局设置就可以达到统一导航栏颜色的效果。  ...上面设置的为YES,下面的为NO 关于导航返回:     首先ios7 之后只要使用系统自带的导航效果就有手动滑动返回的效果。但是当自定义返回按钮时,这种手动滑动返回的效果就没有了。...将状态栏隐藏就可实现这样不错的页面效果 PS:  backBarButtonItem的自定义事件是不会被执行的 backItem = [[UIBarButtonItem alloc] initWithTitle...:action:设置视图的触发事件 tintColor  设置tintColor可以影响添加在导航条上的系统样式的按钮的颜色  title: 标题  titleView :标题视图  leftBarButtonItem

    2.2K20

    灵活运用CSS开发技巧

    在线演示 使用max-height切换自动高度 要点:通过max-height定义收起的最小高度和展开的最大高度,设置两者间的过渡切换 场景:隐藏式子导航栏、悬浮式折叠面板 兼容:max-height...在线演示 使用linear-gradient控制文本渐变 要点:通过linear-gradient设置背景渐变色,配合background-clip:text对背景进行文本裁剪,添加滤镜动画 场景:主题化...在线演示 下划线跟随导航栏 要点:下划线跟随鼠标移动的导航栏 场景:动态导航栏 兼容:+ 代码:在线演示 ?...在线演示 动态边框 要点:鼠标悬浮时动态渐变显示的边框 场景:悬浮按钮、边框动画 兼容:gradient 代码:在线演示 ?...在线演示 标签导航栏 要点:可切换内容的导航栏 场景:页面切换 兼容:~ 代码:在线演示 ? 在线演示 折叠面板 要点:可折叠内容的面板 场景:隐藏式子导航栏 兼容:~ 代码:在线演示 ?

    4.6K20

    iOS 11 更大的导航 (官方翻译版)

    有时,导航栏的右侧包含一个控件,如编辑或完成按钮,用于管理活动视图中的内容。在拆分视图中,导航栏可能会出现在拆分视图的单个窗格中。...导航栏是半透明的,可能具有背景色调,并且可以配置为在屏幕上键入屏幕时隐藏,发生手势或视图调整大小。 ? 考虑在显示全屏内容时暂时隐藏导航栏。当您想关注内容时,导航栏可能会分散注意力。...暂时隐藏酒吧,提供更身临其境的体验。查看全屏照片时,照片会隐藏导航栏和其他界面元素。如果您实现这种行为,让用户使用简单的手势(如轻按)来还原导航栏。...在大多数情况下,标题可帮助人们了解他们正在查看的内容。但是,如果导航栏标题似乎是多余的,可以将标题留空。例如,Notes不会为当前注释标题,因为第一行内容提供了所需的所有上下文。 ?...如果您的导航栏包含多个文本按钮,那些按钮的文本可能会一起运行,使按钮无法区分。通过在按钮之间插入固定空间项来添加分隔。

    2.9K30

    Human Interface Guidelines —— 导航栏(Navigation Bars)

    自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚...照片在查看全屏照片时会隐藏navigation bar和其他界面元素。 如果你实现这类行为,让用户用简单的手势恢复导航栏,如点击。...替代 在不需要导航时使用toolbar,或者需要多个控件来管理内容。 ---- 导航栏标题(Navigation Bar Titles) 考虑在navigation bar中显示当前视图的标题。...在大多数情况下,标题可以帮助人们了解他们正在查看的内容。 但是,如果导航栏的标题看起来多余,则可以将标题处留空。 例如,由于第一行内容提供了所需的所有上下文,因此Notes不会为当前的笔记加标题。...·给文本标题按钮足够的空间。如果navigation bar包含多个文本按钮,点击时这些按钮的可能会一起运行,从而使按钮无法区分。可以在按钮之间插入固定空间项来添加分隔。

    2.5K110

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

    在转场的过程中隐藏原有的导航栏并添加假的 NavigationBar,当转场结束后删除假的 NavigationBar 并恢复原有的导航栏,这一过程可以通过 Swizzle 的方式完成,而每个 ViewController...等到页面 B 调用 viewWillLayoutSubviews 的时候,转场库会在页面 B 自身的 view 上添加一个与真的导航栏一模一样的 NavigationBar,同时将真的导航栏隐藏。...在 viewWillAppear: 中,统一设置导航栏的隐藏状态。...转场动画与导航栏隐藏动画的一致性 如果在转场的过程中还会显示或者隐藏导航栏的话,请保证两个方法的动画参数一致。...解决方案2:在原有导航栏组件里添加 Fake Bar。 解决方案3:在导航栏转场过程中添加 Fake Bar。 美团在实际开发过程中采用了第三种方案,并给出了适合美团 App 的最佳实践。

    2.4K30

    【IOS开发基础系列】Navigation页面导航专题

    ,所以需要在载入时把父级导航条做隐藏处理: 1.2 navigationItem         在含有导航条的ViewController中,VC的navigationItem与VC.navigationController...导航条设置为半透明         将NavigationBar设置透明(仅将指定视图控制器进行透明处理),步骤如下:     1.在视图控制器的头文件中实现UINavigationControllerDelegate...        最近iOS项目中要求导航栏的返回按钮只保留那个箭头,去掉后边的文字,在网上查了一些资料,最简单且没有副作用的方法就是: [[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment...-7-uibarbuttonitem 2.5.4 隐藏返回按钮 [self.navigationItem setHidesBackButton: YES]; 2.5.5 设置导航栏标题的字体颜色和大小...7 导航栏背景,标题和返回按钮文字颜色 http://blog.csdn.net/mad1989/article/details/41516743 IOS自定义导航栏题目和返回按钮标题 http://

    45520

    Simple Control:无需Root为设备添加导航栏

    首先需要说明的是:这款应用是通过在应用上方绘制一层类似于导航栏的样式来实现模拟导航栏的功能,而不是给设备添加一个原模原样的导航栏。...当然,你如果问我"此导航栏"能否与原生导航栏所媲美,我说当然不能100%媲美原生导航栏啦,不过"此导航栏"还是有很多特性的,不信的话可以跟随小苏来看看~   因为这个应用的设置项非常详尽,所以小苏就不一个功能一个功能地介绍了...,按键自定义程度算是比较丰富了~   Simple Control支持呼出/隐藏导航栏,在呼出区域向屏幕中心滑动即可呼出导航栏。...相反,向屏幕边缘方向滑动即可隐藏导航栏。应用还支持自定义呼出区域,使用者可定义屏幕左/下/右三个边缘的呼出区域,并且呼出区域的长度/宽度/位置可调。...应用还支持自动隐藏导航栏特性,可设置点击导航栏按钮后延时自动隐藏和点击导航栏外部自动隐藏两种方式(自动隐藏和透明度可调这两个功能很贴心,因为导航栏会覆盖到屏幕边缘的内容嘛)。

    1.1K20

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

    引 现如今很多App的一些模块,尤其是个人中心模块,界面设计已经习惯于不保留导航栏,而是直接将界面背景覆盖到状态栏,比如QQ的个人信息界面: 没有传统的导航栏之后会好看很多,但是回到或者去往别的页面时...,往往又需要重新显示导航栏,关于这样一种设计苹果并没有给出专门的设置,需要我们自己来做,但在尝试了多种方法之后其实也没有很好的方法,QQ其实做的挺好的,如果你现在动手去尝试一下,会发现它的有无导航栏转换之间有一个渐变的毛玻璃效果...: 实现: 要实现这个简单的有无导航栏过渡其实很简单,直接在 viewWillAppear 和 viewWillDisappear 方法中对导航栏进行显示和隐藏就可以了,为了到达比较平滑的效果,建议对是否动画的参数选择...这个方法是直接隐藏了整个导航栏,所以如果要保存导航栏的一些返回按钮以及其他自定义的按钮,就需要自己在界面上去模拟添加,如果不想这么麻烦,也可以不隐藏导航栏,而是将导航栏的背景视图设为透明的: [...这里有一篇文章实现了:传送门:导航栏的平滑显示和隐藏 - 个人页的自我修养(1) ,不过作者使用swift实现的,用到了extension,其实也就是OC下的category,之后我再研究一下OC下的实现好了

    3.9K30

    最新iOS设计规范五|3大界面要素:控件(Controls)

    栏(Bars) 栏,可以告诉用户在APP中当前在所在的位置、能提供导航,还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种:导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。...将进度条用于持续时间明确的任务。进度条非常适合显示任务的状态,尤其是当它帮助传达任务需要完成多长时间时。 在导航栏和工具栏中隐藏轨道的未填充部分。默认情况下,进度条的轨道包含已填充和未填充的部分。...当在导航栏或工具栏中使用时,进度栏应配置为隐藏轨道的未填充部分。 进度条的外观可以自定义。可以调整进度条的外观以匹配APP的设计。例如,您可以为轨道填充指定自定义色调或图像。...使用菜单显示与操作直接相关的选项。通过菜单,您可以在无需向主界面添加按钮的情况下为用户提供澄清动作目标或自定义动作行为的方法。...如果你需要工具栏或导航栏中使用类似功能,请改用按钮,并提供两个不同的图标来传达不同的状态。 避免在开关中添加说明标签。关于开关的打开或关闭,用户是很明确的。

    8.6K30

    iOS小技能:自定义导航栏,设置全局导航条外观

    设置导航条渐变颜色 设置全局导航条按钮主题 拦截push:通过自定义类,重写自带的方法实现 I、自定义导航栏 1.1 HWNavigationController.h #import IOS7) { return;//不需要设置全局导航条按钮主题 } //设置全局导航条按钮主题 [self settingbarButtonItenAppearance...iOS6导航栏背景的出图规格 非retina:320x44 px retina:640x88 px iOS7导航栏背景的出图规格 retina:640x128...*标题:@property(nonatomic,copy) NSDictionary *titleTextAttributes;// 字典中能用到的key在UIStringDrawing.h中// 最新版本的...导航条的主题颜色 [navigationBar setTintColor:[UIColor whiteColor]]; } 复制代码 1.3 设置导航条渐变颜色 setupUINavigationBarsetBackgroundImage

    2.5K20
    领券