导航栏渐变效果

因为项目需求,导航栏要实现渐变效果。当 UIscrollView 下拉到一定高度就让导航栏完全显示出来,中间过程则是导航栏背景由浅变深,也就是渐变效果。

在网上看了一些资料,参考了一些代码,再结合自己的实践发现只要几行代码就能实现。

1 // 给导航栏设置一个背景图
2 self.navigationController?.navigationBar.setBackgroundImage(image, for: .default)
3 // 导航栏的透明度(设置一个全局的透明度对象)
4 fileprivate lazy var _alpha = 0.0
5 // 获取导航栏背景 初始透明度为0
6 _barImageView       = self.navigationController?.navigationBar.subviews.first
7 _barImageView.alpha = CGFloat(_alpha)

然后在 scrollViewDidScroll 的方法中实现导航栏的渐变效果

1 func scrollViewDidScroll(_ scrollView: UIScrollView) {
2         _alpha = Double(scrollView.contentOffset.y / CGFloat(150) - CGFloat(1))
3         _barImageView.alpha = CGFloat(_alpha)
4     }

原文地址:https://www.cnblogs.com/LYW1993-1024/p/8252785.html

时间: 2024-10-25 02:19:55

导航栏渐变效果的相关文章

<iOS 导航栏>第一节:导航栏透明方法实现代码

说下导航栏的透明方法: 很多应用需要导航栏随着向上滑动,逐渐从透明变成不透明,很炫酷,大部分应用都在使用导航栏渐变效果,现附上代码然后直接将实现,一会讲下如何来实现,这一部分直接上代码. 先附上代码: 方法声明: #import <UIKit/UIKit.h> @interface IDSNavBarView : UIView - (instancetype)initWithFrame:(CGRect)frame titleImg:(UIImage *)aTitleImg; - (UILabe

Android 4.4 上实现透明导航栏和状态栏 Translucent system bar

Translucent system UI styling To get the most impact out of your content, you can now use new window styles and themes to request translucent system UI, including both the status bar and navigation bar. To ensure the legibility of navigation bar butt

【翻译】移动端友好的响应式导航栏教程

以下是译文: 今天我来教大家设计一个色彩绚丽且移动端友好的响应式导航栏.这个导航栏的灵感源自一款叫做"无主之地(Borderlands)"游戏中的一个叫做Maliwan武器生产商商标所采用的颜色集.导航栏会自动根据浏览器窗口的大小调整布局格式:在PC宽度下呈现为一行按钮,在平板宽度下呈现为三行按钮,而在移动端则变成了一个菜单栏按钮连接,点击可以显示和隐藏整个导航栏.为了使这个导航栏做到真正地移动端友好,我们将采用图标字体来作为导航栏图表,这样的话,当界面放大缩小的时候,图标也会自动调整

iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动和下拉动画显得比较生硬,刚发现quickTime可以直接录制手机视频,推荐一下,很方便) 1.顶部标签式导航栏 (1)实现思路 其实就是在上下两个UIScrollView上做文章,实现联动选择切换的效果. ①顶部标签导航栏topCategoryListScrollView加载显示分类数据,下方con

JS学习笔记(一): 使用原生JS 实现导航栏下多级分类弹出效果

在给静态页面静添加交互效果时遇到的问题 : 鼠标划入二级菜单时 一级菜单样 ":hover" 式无法保持 情景如下: 解决思路: 利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li.app_jd a:hover,li.app_jd a.hover{ background-position: -126px -397px; } li.serv

实现底部导航栏

许多的App都使用底部导航栏来实现导航功能,我们可以使用RadioGroup+RadioButton的形式或者直接Button数组的方式实现,而谷歌官方提供了FragmentTabHost来方便快捷实现底部导航栏. android.support.v4.app.FragmentTabHost 主要代码: fragmentTabHost.setup(this, getSupportFragmentManager(), R.id.layout_content); for (int i = 0; i 

网易首页模仿心得---导航栏CSS篇

不仅是CSS方面学习到很多技法,而且由于自己也懂一些SEO,对网易的一些CSS+SEO优化方法,也收获颇多!(本人也是平面设计师,很喜欢网易这类简约型的网页) 好了,在此之前强烈推荐大家可以尝试一下sublime text3 这款编辑器,之前用的editplus,感觉前者真的非常强大,很多插件会让网页开发的速度快很多,很多!! 我首先看了网易的重置CSS样式表和mata标签,其中mata标签中有一行 <meta name="robots" content="index,

Bootstrap入门Demo——制作路径导航栏

今天在在群里聊天的时候看到一只程序员发了一张用Bootstrap做的界面,感觉挺好看,然后去官网看了下组件,发现都挺漂亮的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源码看了看. 一,源码文件简介 下载完源码之后,我们肯定是想着先把源码中的Demo先运行下看看,但是,看着这么多英文的东西还是很迷茫,所以,从整体上熟悉下都有什么东西还是很有必要的. 二,如何引入的问题 现在很多UI框架都是基于Jquery的,所以,在使用之前,如果需要,一定要先引入jquery文件,然后

IOS7的状态栏和导航栏

iOS 7中默认的导航栏 在开始定制之前,我们先来看看iOS 7中默认导航栏的外观.通过Xcode用Single View Controller模板创建一个工程.然后将view controller嵌入到一个navigation controller中.如果你不想从头开始,那么也可以在这里下载到这个示例工程. Xcode 5包含有iOS 6和iOS 7模拟器,我们可以在这两个不同的模拟器版本中运行示例程序,进行对比,如下图所示: vcC4tcSxs76w0dXJqzwvaDM+CjxwPtTaa