ios實現(xiàn)顏色漸變的幾種方法

1. CAGradientLayer實現(xiàn)漸變

CAGradientLayer是CALayer的一個特殊子類寒跳,用于生成顏色漸變的圖層,使用較為方便咕别,下面介紹下它的相關屬性:

colors ? ?漸變的顏色

locations ? ?漸變顏色的分割點

startPoint&endPoint ? ?顏色漸變的方向收叶,范圍在(0,0)與(1.0,1.0)之間,如(0,0)(1.0,0)代表水平方向漸變,(0,0)(0,1.0)代表豎直方向漸變

CAGradientLayer?*gradientLayer?=?[CAGradientLayer?layer];

gradientLayer.colors?=?@[(__bridge?id)[UIColor?redColor].CGColor,?(__bridge?id)[UIColor?yellowColor].CGColor,?(__bridge?id)[UIColor?blueColor].CGColor];

gradientLayer.locations?=?@[@0.3,?@0.5,?@1.0];

gradientLayer.startPoint?=?CGPointMake(0,?0);

gradientLayer.endPoint?=?CGPointMake(1.0,?0);

gradientLayer.frame?=?CGRectMake(0,?100,?300,?100);

[self.view.layer?addSublayer:gradientLayer];

CAGradientLayer實現(xiàn)漸變標間簡單直觀菇夸,但存在一定的局限性琼富,比如無法自定義整個漸變區(qū)域的形狀,如環(huán)形庄新、曲線形的漸變鞠眉。

2. Core Graphics相關方法實現(xiàn)漸變

iOS Core Graphics中有兩個方法用于繪制漸變顏色,CGContextDrawLinearGradient可以用于生成線性漸變择诈,CGContextDrawRadialGradient用于生成圓半徑方向顏色漸變械蹋。函數(shù)可以自定義path,無論是什么形狀都可以羞芍,原理都是用來做Clip哗戈,所以需要在CGContextClip函數(shù)前調(diào)用CGContextAddPath函數(shù)把CGPathRef加入到Context中。

另外一個需要注意的地方是漸變的方向荷科,方向是由兩個點控制的唯咬,點的單位就是坐標。因此需要正確從CGPathRef中找到正確的點步做,方法當然有很多種看具體實現(xiàn)副渴,本例中,我就是簡單得通過調(diào)用CGPathGetBoundingBox函數(shù)全度,返回CGPathRef的矩形區(qū)域煮剧,然后根據(jù)這個矩形取兩個點,讀者可以根據(jù)自行需求修改具體代碼将鸵。

1-> 線性漸變

-?(void)drawLinearGradient:(CGContextRef)context

path:(CGPathRef)path

startColor:(CGColorRef)startColor

endColor:(CGColorRef)endColor

{

CGColorSpaceRef?colorSpace?=?CGColorSpaceCreateDeviceRGB();

CGFloat?locations[]?=?{?0.0,?1.0?};

NSArray?*colors?=?@[(__bridge?id)?startColor,?(__bridge?id)?endColor];

CGGradientRef?gradient?=?CGGradientCreateWithColors(colorSpace,?(__bridge?CFArrayRef)?colors,?locations);

CGRect?pathRect?=?CGPathGetBoundingBox(path);

//具體方向可根據(jù)需求修改

CGPoint?startPoint?=?CGPointMake(CGRectGetMinX(pathRect),?CGRectGetMidY(pathRect));

CGPoint?endPoint?=?CGPointMake(CGRectGetMaxX(pathRect),?CGRectGetMidY(pathRect));

CGContextSaveGState(context);

CGContextAddPath(context,?path);

CGContextClip(context);

CGContextDrawLinearGradient(context,?gradient,?startPoint,?endPoint,?0);

CGContextRestoreGState(context);

CGGradientRelease(gradient);

CGColorSpaceRelease(colorSpace);

}

-?(void)viewDidLoad

{

[super?viewDidLoad];

//?Do?any?additional?setup?after?loading?the?view.

//創(chuàng)建CGContextRef

UIGraphicsBeginImageContext(self.view.bounds.size);

CGContextRef?gc?=?UIGraphicsGetCurrentContext();

//創(chuàng)建CGMutablePathRef

CGMutablePathRef?path?=?CGPathCreateMutable();

//繪制Path

CGRect?rect?=?CGRectMake(0,?100,?300,?200);

CGPathMoveToPoint(path,?NULL,?CGRectGetMinX(rect),?CGRectGetMinY(rect));

CGPathAddLineToPoint(path,?NULL,?CGRectGetMidX(rect),?CGRectGetMaxY(rect));

CGPathAddLineToPoint(path,?NULL,?CGRectGetWidth(rect),?CGRectGetMaxY(rect));

CGPathCloseSubpath(path);

//繪制漸變

[self?drawLinearGradient:gc?path:path?startColor:[UIColor?greenColor].CGColor?endColor:[UIColor?redColor].CGColor];

//注意釋放CGMutablePathRef

CGPathRelease(path);

//從Context中獲取圖像勉盅,并顯示在界面上

UIImage?*img?=?UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

UIImageView?*imgView?=?[[UIImageView?alloc]?initWithImage:img];

[self.view?addSubview:imgView];

}

2-> ?圓半徑方向漸變

-?(void)drawRadialGradient:(CGContextRef)context

path:(CGPathRef)path

startColor:(CGColorRef)startColor

endColor:(CGColorRef)endColor

{

CGColorSpaceRef?colorSpace?=?CGColorSpaceCreateDeviceRGB();

CGFloat?locations[]?=?{?0.0,?1.0?};

NSArray?*colors?=?@[(__bridge?id)?startColor,?(__bridge?id)?endColor];

CGGradientRef?gradient?=?CGGradientCreateWithColors(colorSpace,?(__bridge?CFArrayRef)?colors,?locations);

CGRect?pathRect?=?CGPathGetBoundingBox(path);

CGPoint?center?=?CGPointMake(CGRectGetMidX(pathRect),?CGRectGetMidY(pathRect));

CGFloat?radius?=?MAX(pathRect.size.width?/?2.0,?pathRect.size.height?/?2.0)?*?sqrt(2);

CGContextSaveGState(context);

CGContextAddPath(context,?path);

CGContextEOClip(context);

CGContextDrawRadialGradient(context,?gradient,?center,?0,?center,?radius,?0);

CGContextRestoreGState(context);

CGGradientRelease(gradient);

CGColorSpaceRelease(colorSpace);

}

-?(void)viewDidLoad

{

[super?viewDidLoad];

//?Do?any?additional?setup?after?loading?the?view.

//創(chuàng)建CGContextRef

UIGraphicsBeginImageContext(self.view.bounds.size);

CGContextRef?gc?=?UIGraphicsGetCurrentContext();

//創(chuàng)建CGMutablePathRef

CGMutablePathRef?path?=?CGPathCreateMutable();

//繪制Path

CGRect?rect?=?CGRectMake(0,?100,?300,?200);

CGPathMoveToPoint(path,?NULL,?CGRectGetMinX(rect),?CGRectGetMinY(rect));

CGPathAddLineToPoint(path,?NULL,?CGRectGetMidX(rect),?CGRectGetMaxY(rect));

CGPathAddLineToPoint(path,?NULL,?CGRectGetWidth(rect),?CGRectGetMaxY(rect));

CGPathAddLineToPoint(path,?NULL,?CGRectGetWidth(rect),?CGRectGetMinY(rect));

CGPathCloseSubpath(path);

//繪制漸變

[self?drawRadialGradient:gc?path:path?startColor:[UIColor?greenColor].CGColor?endColor:[UIColor?redColor].CGColor];

//注意釋放CGMutablePathRef

CGPathRelease(path);

//從Context中獲取圖像,并顯示在界面上

UIImage?*img?=?UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

UIImageView?*imgView?=?[[UIImageView?alloc]?initWithImage:img];

[self.view?addSubview:imgView];

}

3. 以CAShapeLayer作為layer的mask屬性

CALayer的mask屬性可以作為遮罩讓layer顯示mask遮住(非透明)的部分顶掉;CAShapeLayer為CALayer的子類草娜,通過path屬性可以生成不同的形狀,將CAShapeLayer對象用作layer的mask屬性的話痒筒,就可以生成不同形狀的圖層宰闰。故生成顏色漸變有以下幾個步驟:

生成一個imageView(也可以為layer)茬贵,image的屬性為顏色漸變的圖片

生成一個CAShapeLayer對象,根據(jù)path屬性指定所需的形狀

將CAShapeLayer對象賦值給imageView的mask屬性

-?(void)viewDidLoad

{

[super?viewDidLoad];

[self.view?addSubview:self.firstCircle];

_firstCircle.frame?=?CGRectMake(0,?0,?200,?200);

_firstCircle.center?=?CGPointMake(CGRectGetWidth(self.view.bounds)?/?2.0,?CGRectGetHeight(self.view.bounds)?/?2.0);

CGFloat?firsCircleWidth?=?5;

self.firstCircleShapeLayer?=?[self?generateShapeLayerWithLineWidth:firsCircleWidth];

_firstCircleShapeLayer.path?=?[self?generateBezierPathWithCenter:CGPointMake(100,?100)?radius:100].CGPath;

_firstCircle.layer.mask?=?_firstCircleShapeLayer;

}

-?(CAShapeLayer?*)generateShapeLayerWithLineWidth:(CGFloat)lineWidth

{

CAShapeLayer?*waveline?=?[CAShapeLayer?layer];

waveline.lineCap?=?kCALineCapButt;

waveline.lineJoin?=?kCALineJoinRound;

waveline.strokeColor?=?[UIColor?redColor].CGColor;

waveline.fillColor?=?[[UIColor?clearColor]?CGColor];

waveline.lineWidth?=?lineWidth;

waveline.backgroundColor?=?[UIColor?clearColor].CGColor;

return?waveline;

}

-?(UIBezierPath?*)generateBezierPathWithCenter:(CGPoint)center?radius:(CGFloat)radius

{

UIBezierPath?*circlePath?=?[UIBezierPath?bezierPathWithArcCenter:center?radius:radius?startAngle:0?endAngle:2*M_PI?clockwise:NO];

return?circlePath;

}

-?(UIImageView?*)firstCircle

{

if?(!_firstCircle)?{

self.firstCircle?=?[[UIImageView?alloc]?initWithImage:[UIImage?imageNamed:@"circleBackground"]];

_firstCircle.layer.masksToBounds?=?YES;

_firstCircle.alpha?=?1.0;

}

return?_firstCircle;

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末移袍,一起剝皮案震驚了整個濱河市解藻,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌葡盗,老刑警劉巖螟左,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異觅够,居然都是意外死亡胶背,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門喘先,熙熙樓的掌柜王于貴愁眉苦臉地迎上來钳吟,“玉大人,你說我怎么就攤上這事窘拯≡遗祝” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵树枫,是天一觀的道長直焙。 經(jīng)常有香客問我,道長砂轻,這世上最難降的妖魔是什么奔誓? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮搔涝,結(jié)果婚禮上厨喂,老公的妹妹穿的比我還像新娘。我一直安慰自己庄呈,他們只是感情好蜕煌,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著诬留,像睡著了一般斜纪。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上文兑,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天盒刚,我揣著相機與錄音,去河邊找鬼绿贞。 笑死因块,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的籍铁。 我是一名探鬼主播涡上,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼趾断,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了吩愧?” 一聲冷哼從身側(cè)響起歼冰,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎耻警,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體甸怕,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡甘穿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了梢杭。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片温兼。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖武契,靈堂內(nèi)的尸體忽然破棺而出募判,到底是詐尸還是另有隱情,我是刑警寧澤咒唆,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布届垫,位于F島的核電站,受9級特大地震影響全释,放射性物質(zhì)發(fā)生泄漏装处。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一浸船、第九天 我趴在偏房一處隱蔽的房頂上張望妄迁。 院中可真熱鬧,春花似錦李命、人聲如沸登淘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽黔州。三九已至,卻和暖如春阔籽,著一層夾襖步出監(jiān)牢的瞬間辩撑,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工仿耽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留合冀,地道東北人。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓项贺,卻偏偏與公主長得像君躺,于是被迫代替她去往敵國和親峭判。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容