原文出处: HelloYeah 下面这个界面有没有觉得很眼熟。打开你手里的App仔细观察,你会发现很多都有实现这个功能。比如美团外卖的首页模块,新浪微博的个人详情页面。要怎么样才能快速的实现这个功能呢!那下面由笔者来告诉你如何三行代码,集成这个功能。。。
原理介绍:要想把一个view设计成透明的我们一下子就会想到两种方案,设置view的alpha值为0,或者设置view的backgroundColor为clearColor.但是UINavigationBar是一个比较特殊的视图,它是没有alpha属性的,那我们可以设置opaque(不透明度)为NO,上代码试一试
结果,然并卵,完全没用。这时候该怎么办呢?这时候我们就得来看看UINavigationBar这个视图的结构了,如下图。 NavgationBar.png
现在笔者教大家一个小技巧。请看下面代码:
这时候再打开项目层次图,你会有惊人的发现 Snip20160314_4.png
对比一下,你会发现只剩两层了。不要问为什么,这都是系统帮你做的。。。当你设置了背景图片的时候,就会出现这样的结果。 知道了上述的原理,这就好办了,现在只要监听,控制器内部的scrollView 的滚动,就可以实现导航条渐渐透明的效果了。
Snip20160326_2.png
分类介绍
分类代码 Objective-C
下面这个效果图是系统的UITableViewController,以下是效果图和代码 2.gif
控制器代码:
下面这个效果图是一个ViewController中含有自己创建的一个CollectionView. 1.gif
控制器代码
项目源码分享,希望大家喜欢,下载的时候顺便star一下,好人多福。https://github.com/newyeliang/HYNavBarHidden.git |
|