iOS-背景圖層的顏色漸變效果

  • 呃,圖拿錯(cuò)了 = =

  • 回到正題 ----> 項(xiàng)目中偶爾會(huì)遇到cell背景漸變或者view背景漸變的界面需求,偷懶解決的方法就是讓UI妹紙給切個(gè)圖拿來就用植榕。但是如果項(xiàng)目中需要的漸變色比較多的話蛛芥,顯然切圖是很不合適的,也容易使得項(xiàng)目的體積冗余伏伐。

  • 創(chuàng)建一個(gè)背景View,重寫drawRect方法

  • 關(guān)于CGContextRef有一篇博客介紹的還不錯(cuò) - 傳送門---其中原博中的有些方法因版本過久被廢棄了晕拆,修改了之后的Demo.

- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
    
    // 創(chuàng)建起點(diǎn)的顏色
    
    CGColorRef beginColor = CGColorCreate(colorSpaceRef, (CGFloat[]){1.0f,1.0f,1.0f,1.0f});
    
    CGColorRef endColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.83f, 0.83f, 0.83f, 1.0f});
    
    CGRect paperRect = self.bounds;
    
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    
    CGFloat locations[] = {0.0,1.0};
    
    NSArray *colors = [NSArray arrayWithObjects:(__bridge id)beginColor,(__bridge id)endColor, nil];
    
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef)CFBridgingRetain(colors), locations);
    
    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
    
    CGContextSaveGState(context);
    
    CGContextAddRect(context, rect);
    
    CGContextClip(context);
    
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    
    CGContextRestoreGState(context);
    
    CGGradientRelease(gradient);
    
    CGColorSpaceRelease(colorSpace);
    
    // add line stroke
    
    CGRect strokeRect = CGRectInset(paperRect, 5.0, 5.0);
    
    CGColorRef lineColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.81,0.43,0.99,1.0f});
   
    CGContextSetStrokeColorWithColor(context, lineColor);
    
    CGContextSetLineWidth(context, 0.5);
    
    CGContextStrokeRect(context, strokeRect);
    
}

  • 然后將cell.backgroundView設(shè)置為我們創(chuàng)建的漸變View就可以了藐翎。
制作成GIF圖后會(huì)感覺有些分層,實(shí)際中并沒有
  • 還有一個(gè)漸變的寫法实幕,導(dǎo)入類庫quartcore并#import <QuartzCore/QuartzCore.h>吝镣,這個(gè)就不屬于在context上畫,而是將圖層插入到view層上面昆庇。那么這里就涉及到Quartz Core 圖層編程了赤惊。
    CAGradientLayer *_gradientLayer = [CAGradientLayer layer];

    _gradientLayer.bounds = cell.contentView.bounds;

    _gradientLayer.borderWidth = 0;

    _gradientLayer.frame = cell.contentView.bounds;

    _gradientLayer.colors = [NSArray arrayWithObjects:
                             (id)[[UIColor clearColor] CGColor],
                             (id)[[UIColor blackColor] CGColor],nil];

    _gradientLayer.startPoint = CGPointMake(0.5, 0.5);

    _gradientLayer.endPoint = CGPointMake(0.5, 1.0);

    [cell.contentView.layer insertSublayer:_gradientLayer atIndex:0];
這個(gè)漸變的就比較刺眼了。凰锡。未舟。當(dāng)然尺寸小的話視覺效果還是不錯(cuò)的
具體可以查看上面的[Demo](https://github.com/zHfUmR/CGContextRefTest)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市掂为,隨后出現(xiàn)的幾起案子裕膀,更是在濱河造成了極大的恐慌,老刑警劉巖勇哗,帶你破解...
    沈念sama閱讀 221,695評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件昼扛,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡欲诺,警方通過查閱死者的電腦和手機(jī)抄谐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來扰法,“玉大人蛹含,你說我怎么就攤上這事∪洌” “怎么了浦箱?”我有些...
    開封第一講書人閱讀 168,130評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵吸耿,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我酷窥,道長(zhǎng)咽安,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,648評(píng)論 1 297
  • 正文 為了忘掉前任蓬推,我火速辦了婚禮妆棒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘沸伏。我一直安慰自己储耐,他們只是感情好圣蝎,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評(píng)論 6 397
  • 文/花漫 我一把揭開白布拆祈。 她就那樣靜靜地躺著瞳抓,像睡著了一般刺啦。 火紅的嫁衣襯著肌膚如雪留特。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,268評(píng)論 1 309
  • 那天玛瘸,我揣著相機(jī)與錄音蜕青,去河邊找鬼。 笑死糊渊,一個(gè)胖子當(dāng)著我的面吹牛右核,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播渺绒,決...
    沈念sama閱讀 40,835評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼贺喝,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了宗兼?” 一聲冷哼從身側(cè)響起躏鱼,我...
    開封第一講書人閱讀 39,740評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎殷绍,沒想到半個(gè)月后染苛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,286評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡主到,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評(píng)論 3 340
  • 正文 我和宋清朗相戀三年茶行,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片登钥。...
    茶點(diǎn)故事閱讀 40,505評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡畔师,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出牧牢,到底是詐尸還是另有隱情茉唉,我是刑警寧澤固蛾,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站度陆,受9級(jí)特大地震影響艾凯,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜懂傀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評(píng)論 3 333
  • 文/蒙蒙 一趾诗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蹬蚁,春花似錦恃泪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至叽粹,卻和暖如春览效,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背虫几。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評(píng)論 1 272
  • 我被黑心中介騙來泰國打工锤灿, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人辆脸。 一個(gè)月前我還...
    沈念sama閱讀 48,921評(píng)論 3 376
  • 正文 我出身青樓但校,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親啡氢。 傳聞我的和親對(duì)象是個(gè)殘疾皇子状囱,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評(píng)論 2 359

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