美文网首页iOS开发指南动画设计学习IOS
IOS--自定义导航栏渐变颜色

IOS--自定义导航栏渐变颜色

作者: 谁能理解取名字的痛苦 | 来源:发表于2016-10-14 19:39 被阅读375次

前言

很多APP现在的导航条初始时透明 随着表头视图的上滑逐渐变不透明 下拉表头视图时逐渐透明
所以就想做一个小demo分享一下

先看看效果

iosgif.gif

实现

第一步:
创建UINavigationController并且让他隐藏

UINavigationController * nav=[[UINavigationController alloc] initWithRootViewController:[[ViewController alloc] init]];//创建
nav.navigationBar.hidden=YES;//隐藏

第二步:
创建要用到的宏定义与属性:

#define SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width
#define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height

@property(strong,nonatomic)UIView * navView ;  //替换navigationBar
@property(strong,nonatomic)UIImageView * image; //计算表头图片的高度要用
@property(assign,nonatomic)CGFloat alp; //透明度

第三步:
自定义uiview视图覆盖UINavigationController位置

self.navView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 64)];
[self.navigationController.view addSubview:self.navView];
self.automaticallyAdjustsScrollViewInsets=NO; //不要自动掉64高度
UITableView * table=[[UITableView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
[self.view addSubview:table];

第四步:重点来了
调用 -(void)scrollViewDidScroll:(UIScrollView *)scrollView
方法实现滚动tableView导航的透明度逐渐变化


注意 :这个方法是delegate里的方法,一定要先引代理

 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{
self.alp=scrollView.contentOffset.y/(self.image.bounds.size.height-64);//tableView的偏移量➗表头图片的高度
self.navView.backgroundColor=[[UIColor orangeColor] colorWithAlphaComponent:self.alp];//透明度逐渐变化

}

结语:

还有一些简单的代码如:创建tableView和实现代理就不贴出来了,避免文章冗长。
github:https://github.com/tmwo/navigationBar_color
还有

与其感慨路难行,不如马上出发

相关文章

网友评论

  • 马爷:我想问一下 一般情况下这个做隐藏好 还是做把那个导航栏里面所有的 view.alpha = 0 好 这俩个有什么弊端吗
    谁能理解取名字的痛苦:@马爷 系统的导航栏直接设 navigationController.view.alpha 它还有一个毛玻璃效果 渐变效果看起来不太好
  • f7139db11dcd:可否发个demo 给我。 234255235@qq.com
    谁能理解取名字的痛苦:@HZW_sister 我上传到github了
  • xiaomayi2012:不知适用于collectionView吗?
    xiaomayi2012:@谁能理解取名字的痛苦 非常感谢
    谁能理解取名字的痛苦:@xiaomayi2012
    collectionView继承UIScrollView有 -(void)scrollViewDidScroll:(UIScrollView *)scrollView这个代理方法,所以可以用。

本文标题:IOS--自定义导航栏渐变颜色

本文链接:https://www.haomeiwen.com/subject/taegyttx.html