-
效果图
渐变色 直接在navigationBar上添加一个渐变色View会导致遮盖导航上的标题和按钮，所以直接把渐变色view转换为图片设置为导航栏的背景图片，可以很方便解决上面的问题。
主要流程是在UIView上添加渐变色，然后把渐变色视图转变为图片，然后添加为NavigationBar的背景图片即可。
渐变色
渐变色使用的CAGradientLayer绘制，主要属性有开始渐变的位置和结束渐变的位置，用来控制颜色渐变的方向.方向是由起始坐标(startPoint)指向结束坐标(endPoint)
// gradient
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = self.bounds;
gradientLayer.startPoint = CGPointMake(0.1, 0.1);
gradientLayer.endPoint = CGPointMake(1, 0.5);
gradientLayer.colors = @[(__bridge id)[UIColor hexColorFromString:@"#00ADDE"].CGColor,
(__bridge id)[UIColor hexColorFromString:@"#00B8D6"].CGColor,
(__bridge id)[UIColor hexColorFromString:@"#00CAC9"].CGColor,
(__bridge id)[UIColor hexColorFromString:@"#00D6C1"].CGColor,
(__bridge id)[UIColor hexColorFromString:@"#00E0B8"].CGColor
];
gradientLayer.locations = @[@(0), @(0.24f), @(0.48f), @(0.6f), @(0.85f)];
self.layer.shadowColor = [UIColor colorWithRed:70/255.0 green:199/255.0 blue:200/255.0 alpha:0.5].CGColor;
self.layer.shadowOffset = CGSizeMake(0,3);
self.layer.shadowOpacity = 1;
self.layer.shadowRadius = 9;
[self.layer insertSublayer:gradientLayer atIndex:0];
起始和结束坐标说明
- 左上角开始到右边中间结束
gradientLayer.startPoint = CGPointMake(0.1, 0.1);
gradientLayer.endPoint = CGPointMake(1, 0.5);
- colors
(数组)设置渐变色颜色组，CGColor类型。 - locations
(数组)可为空，用来控制颜色占比和颜色组中的颜色显示的位置的，传NSnumber类型的数字 0 ~ 1，正常来说是和colors数组对应的。
gradientLayer.colors = @[(__bridge id)[UIColor hexColorFromString:@"#00ADDE"].CGColor,
(__bridge id)[UIColor hexColorFromString:@"#00B8D6"].CGColor,
(__bridge id)[UIColor hexColorFromString:@"#00CAC9"].CGColor,
(__bridge id)[UIColor hexColorFromString:@"#00D6C1"].CGColor,
(__bridge id)[UIColor hexColorFromString:@"#00E0B8"].CGColor
];
gradientLayer.locations = @[@(0), @(0.24f), @(0.48f), @(0.6f), @(0.85f)];
设置渐变色导航栏
渐变色视图画好后，我们只需要直接添加到导航控制器的navigationBar上即可。或者直接新建一个继承自UINavigationController的类，直接在上面添加如下。
/// 直接在self添加渐变视图会遮盖子视图 所有转换为图片 添加为背景图
[self.navigationBar setBackgroundImage:[UIImage convertViewToImage:[[HPNavigationBar alloc]initWithFrame:CGRectMake(0, -STATUS_BAR_HEIGHT, MN_WIDTH, NAVIGATION_HRIGHT)]] forBarMetrics:UIBarMetricsDefault];
- 视图转换为图片方法
+ (UIImage *)convertViewToImage:(UIView *)view{
CGSize size = view.bounds.size;
/**
* size: 表示区域大小
* opaque: 是否透明, NO - 半透明, YES - 非透明
* scale: 屏幕密度(几倍像素)
*/
UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
- 修改导航按钮颜色和字体大小
UIBarButtonItem *bedNumItem = [[UIBarButtonItem alloc]initWithTitle:@"001床" style:UIBarButtonItemStylePlain target:self action:@selector(back)];
bedNumItem.tintColor = [UIColor whiteColor];
NSMutableDictionary *attributs = [NSMutableDictionary dictionary];
attributs[NSForegroundColorAttributeName] = [UIColor whiteColor];
attributs[NSFontAttributeName] = MNFontSize(14);
[bedNumItem setTitleTextAttributes:attributs forState:UIControlStateNormal];
self.navigationItem.rightBarButtonItem = bedNumItem;
