美文网首页
模仿新版QQ导航栏渐变色

模仿新版QQ导航栏渐变色

作者: 是夏目啊 | 来源:发表于2017-05-19 09:49 被阅读0次

按我知道的,在iOS里,渐变色主要有2种方式实现,CAGradientLayer的线性渐变,Quartz2D的径向渐变,具体可以参考这篇文章(随便找的一篇,写的还不错):http://www.jianshu.com/p/f0baa6703760

这里写一下第一种方式,主要代码如下:
在 NavigationController 里:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.navigationBar.barStyle = UIBarStyleBlack;
[self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
[self.navigationBar setShadowImage:[UIImage new]];
[self.navigationBar.layer insertSublayer:[self qqGradientLayer] atIndex:0];//渐变
}

CAGradientLayer的线性渐变
- (CAGradientLayer *)qqGradientLayer {
CAGradientLayer *gradientLayer = [[CAGradientLayer alloc]init];
gradientLayer.colors = @[
(__bridge id)[UIColor colorWithRed:78 / 255.0 green:143 / 255.0 blue:1.0 alpha:1.0].CGColor,
(__bridge id)[UIColor colorWithRed:39 / 255.0 green:196 / 255.0 blue:254 / 255.0 alpha:1.0].CGColor,
(__bridge id)[UIColor colorWithRed:60 / 255.0 green:143 / 255.0 blue:1.0 alpha:1.0].CGColor,
];
gradientLayer.locations = @[@0, @0.8,@1.5];
// 颜色渐变的起点和终点,范围为 (0~1.0, 0~1.0)
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1.0, 0);
gradientLayer.frame = CGRectMake(0, -20, self.navigationBar.bounds.size.width, 20 + self.navigationBar.bounds.size.height);
return gradientLayer;
}

其实,还有一种很简单的方法:
直接让美术做张图片,设置 navigationBar 的 BackgroundImage。

相关文章

网友评论

      本文标题:模仿新版QQ导航栏渐变色

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