早上在做项目的时候要做一个带有渐变背景的页面。。。之前以为是美工切图就行了,结果美工就给了我渐变的开始值和结束值····这也行吧····渐变在android上都可以实现,何况是ios呢。。。果然,百度google了一番,就找到了一个方法,不过略坑爹啊·····方法竟然是在背景UIView上不断addSubView····颜色的值用循环产生····然后就实现了渐变。。。这不坑爹么·····要实现一个View的渐变还得加无数个UIView····麻烦不说···内存也得耗费不少吧~···这样肯定不行。。于是又继续看其他文章,终于找到个比较靠谱的···关键的函数:
/**
画图形渐进色方法,此方法只支持双色值渐变
@param context 图形上下文的CGContextRef
@param clipRect 需要画颜色的rect
@param startPoint 画颜色的起始点坐标
@param endPoint 画颜色的结束点坐标
@param options CGGradientDrawingOptions
@param startColor 开始的颜色值
@param endColor 结束的颜色值
*/
- (void)DrawGradientColor:(CGContextRef)context
rect:(CGRect)clipRect
point:(CGPoint) startPoint
point:(CGPoint) endPoint
options:(CGGradientDrawingOptions) options
startColor:(UIColor*)startColor
endColor:(UIColor*)endColor
{
UIColor* colors [2] = {startColor,endColor};
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
CGFloat colorComponents[8];
for (int i = 0; i < 2; i++) {
UIColor *color = colors[i];
CGColorRef temcolorRef = color.CGColor;
const CGFloat *components = CGColorGetComponents(temcolorRef);
for (int j = 0; j < 4; j++) {
colorComponents[i * 4 + j] = components[j];
}
}
CGGradientRef gradient = CGGradientCreateWithColorComponents(rgb, colorComponents, NULL, 2);
CGColorSpaceRelease(rgb);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, options);
CGGradientRelease(gradient);
}
这就实现了对UIView的渐变处理···只需要传入几个参数就行了···开始点,结束点、开始颜色和结束颜色这些。。。然后它具体实现其实我现在都还看不太懂····之后有时间慢慢研究吧~··之后我觉得这东西以后可能会比较常使用,于是我就封装了一下,写了一个自定义的UIView,然后只需传入开始颜色和结束颜色就可以实现整个View垂直的渐变,当然也可以实现水平的渐变和两种倾斜的渐变,项目里使用就差不多这些就足够了吧·····以后需要用到就可以直接拿来用了。。。 放在这里也方便在项目里需要用到的童鞋直接使用····以下是实现源码
.h
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSInteger, GradientViewType){
kGradientViewTypeHorizontal = 0,
kGradientViewTypeVertical = 1,
kGradientViewTypeInclinedLeft = 2,
kGradientViewTypeInclinedRight = 3
};
@interface KKGradientView : UIView
@property (nonatomic, strong) UIColor *startColor;
@property (nonatomic, strong) UIColor *endColor;
@property (nonatomic, assign) GradientViewType gradientViewType;
- (id)initWithFrame:(CGRect)frame startColor:(UIColor *)startColor endColor:(UIColor *)endColor;
@end
.m
#import "KKGradientView.h"
@implementation KKGradientView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
_startColor = [UIColor colorWithWhite:1.0 alpha:1.0];
_endColor = [UIColor colorWithWhite:0.0 alpha:1.0];
_gradientViewType = kGradientViewTypeVertical;
}
return self;
}
- (id)initWithFrame:(CGRect)frame startColor:(UIColor *)startColor endColor:(UIColor *)endColor{
self = [self initWithFrame:frame];
if (self) {
_startColor = startColor;
_endColor = endColor;
}
return self;
}
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGPoint startPoint;
CGPoint endPoint;
//从上到下
if (_gradientViewType == kGradientViewTypeVertical) {
startPoint = CGPointZero;
endPoint = CGPointMake(0, rect.size.height);
}
//从左到右
if (_gradientViewType == kGradientViewTypeHorizontal) {
startPoint = CGPointZero;
endPoint = CGPointMake(rect.size.width, 0);
}
//从左上到右下
if (_gradientViewType == kGradientViewTypeInclinedLeft) {
startPoint = CGPointZero;
endPoint = CGPointMake(rect.size.width, rect.size.height);
}
//从右上到左下
if (_gradientViewType == kGradientViewTypeInclinedRight) {
startPoint = CGPointMake(rect.size.width, 0);
endPoint = CGPointMake(0, rect.size.height);
}
[self DrawGradientColor:context rect:rect point:startPoint point:endPoint options:kCGGradientDrawsAfterEndLocation startColor:_startColor endColor:_endColor];
}
/**
画图形渐进色方法,此方法只支持双色值渐变
@param context 图形上下文的CGContextRef
@param clipRect 需要画颜色的rect
@param startPoint 画颜色的起始点坐标
@param endPoint 画颜色的结束点坐标
@param options CGGradientDrawingOptions
@param startColor 开始的颜色值
@param endColor 结束的颜色值
*/
- (void)DrawGradientColor:(CGContextRef)context
rect:(CGRect)clipRect
point:(CGPoint) startPoint
point:(CGPoint) endPoint
options:(CGGradientDrawingOptions) options
startColor:(UIColor*)startColor
endColor:(UIColor*)endColor
{
UIColor* colors [2] = {startColor,endColor};
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
CGFloat colorComponents[8];
for (int i = 0; i < 2; i++) {
UIColor *color = colors[i];
CGColorRef temcolorRef = color.CGColor;
const CGFloat *components = CGColorGetComponents(temcolorRef);
for (int j = 0; j < 4; j++) {
colorComponents[i * 4 + j] = components[j];
}
}
CGGradientRef gradient = CGGradientCreateWithColorComponents(rgb, colorComponents, NULL, 2);
CGColorSpaceRelease(rgb);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, options);
CGGradientRelease(gradient);
}
@end
然后使用···
#import "ViewController.h"
#import "KKGradientView.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
/**
整个View被切成四个等分的矩形,不是三个·····那是错觉
都是纯红色到纯绿色的渐变
*/
//默认是垂直的
KKGradientView *gradientViewV = [[KKGradientView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width / 2, self.view.frame.size.height / 2) startColor:[UIColor redColor] endColor:[UIColor greenColor]];
[self.view addSubview:gradientViewV];
//水平
KKGradientView *gradientViewH = [[KKGradientView alloc]initWithFrame:CGRectMake(self.view.frame.size.width / 2, 0, self.view.frame.size.width / 2, self.view.frame.size.height / 2) startColor:[UIColor redColor] endColor:[UIColor greenColor]];
[gradientViewH setGradientViewType:kGradientViewTypeHorizontal];
[self.view addSubview:gradientViewH];
//从左上角开始倾斜
KKGradientView *gradientViewIL = [[KKGradientView alloc]initWithFrame:CGRectMake(0, self.view.frame.size.height / 2, self.view.frame.size.width / 2, self.view.frame.size.height / 2) startColor:[UIColor redColor] endColor:[UIColor greenColor]];
[gradientViewIL setGradientViewType:kGradientViewTypeInclinedLeft];
[self.view addSubview:gradientViewIL];
//从右上角开始倾斜
KKGradientView *gradientViewIR = [[KKGradientView alloc]initWithFrame:CGRectMake(self.view.frame.size.width / 2, self.view.frame.size.height / 2, self.view.frame.size.width / 2, self.view.frame.size.height / 2) startColor:[UIColor redColor] endColor:[UIColor greenColor]];
[gradientViewIR setGradientViewType:kGradientViewTypeInclinedRight];
[self.view addSubview:gradientViewIR];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end