iOS開(kāi)發(fā)之使用CAGradientLayer繪制漸變色

你們知道如何在 App 中繪制漸變色嗎?如果不知道請(qǐng)往下看

最近在 App 開(kāi)發(fā)過(guò)程中乏屯,遇到了漸變色的要求根时,費(fèi)勁一番周折,終于解決辰晕,特來(lái)與大家分享蛤迎!
繪制漸變色,需要用到 CoreAnimation 里面的一個(gè)類(lèi):CAGradientLayer含友,通過(guò)這個(gè)類(lèi)忘苛,我們可以很方便的繪制漸變色。

下面我們就開(kāi)始來(lái)繪制漸變色
1唱较、創(chuàng)建一個(gè) UIView:

- (void)viewDidLoad {
    [super viewDidLoad];
    //  創(chuàng)建 UIView 用來(lái)承載漸變色
    UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 50, 200)];
    [self.view addSubview:myView];
}

2扎唾、創(chuàng)建漸變色顏色列表

    //  創(chuàng)建 CAGradientLayer 對(duì)象
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];

    //  設(shè)置 gradientLayer 的 Frame
    gradientLayer.frame = myView.bounds;

    //  創(chuàng)建漸變色數(shù)組,需要轉(zhuǎn)換為CGColor顏色
    gradientLayer.colors = @[(id)[UIColor redColor].CGColor,
                             (id)[UIColor yellowColor].CGColor,
                             (id)[UIColor blueColor].CGColor];

    //  設(shè)置三種顏色變化點(diǎn)南缓,取值范圍 0.0~1.0
    gradientLayer.locations = @[@(0.1f) ,@(0.4f)];

    //  設(shè)置漸變顏色方向胸遇,左上點(diǎn)為(0,0), 右下點(diǎn)為(1,1)
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1);

    //  添加漸變色到創(chuàng)建的 UIView 上去
    [myView.layer addSublayer:gradientLayer];

這樣就能得到如下結(jié)果:


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市汉形,隨后出現(xiàn)的幾起案子纸镊,更是在濱河造成了極大的恐慌,老刑警劉巖概疆,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件逗威,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡岔冀,警方通過(guò)查閱死者的電腦和手機(jī)凯旭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)使套,“玉大人罐呼,你說(shuō)我怎么就攤上這事≌旄撸” “怎么了嫉柴?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)奉呛。 經(jīng)常有香客問(wèn)我计螺,道長(zhǎng)夯尽,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任登馒,我火速辦了婚禮匙握,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘谊娇。我一直安慰自己肺孤,他們只是感情好罗晕,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布济欢。 她就那樣靜靜地躺著,像睡著了一般小渊。 火紅的嫁衣襯著肌膚如雪法褥。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,365評(píng)論 1 302
  • 那天酬屉,我揣著相機(jī)與錄音半等,去河邊找鬼。 笑死呐萨,一個(gè)胖子當(dāng)著我的面吹牛杀饵,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播谬擦,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼切距,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了惨远?” 一聲冷哼從身側(cè)響起谜悟,我...
    開(kāi)封第一講書(shū)人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎北秽,沒(méi)想到半個(gè)月后葡幸,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡贺氓,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年蔚叨,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片辙培。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡缅叠,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出虏冻,到底是詐尸還是另有隱情肤粱,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布厨相,位于F島的核電站领曼,受9級(jí)特大地震影響鸥鹉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜庶骄,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一毁渗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧单刁,春花似錦灸异、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至逻淌,卻和暖如春么伯,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背卡儒。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工田柔, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人骨望。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓硬爆,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親擎鸠。 傳聞我的和親對(duì)象是個(gè)殘疾皇子缀磕,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

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

  • 目錄: 主要繪圖框架介紹 CALayer 繪圖 貝塞爾曲線(xiàn)-UIBezierPath CALayer子類(lèi) 補(bǔ)充:i...
    Ryan___閱讀 1,673評(píng)論 1 9
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件糠亩、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,102評(píng)論 4 62
  • 第十六章 生日宴會(huì) 威爾伯爵妹妹的生日宴會(huì)上虐骑,翟毅早早的就來(lái)了。一身剪裁得體的銀灰色西裝赎线,白色的領(lǐng)帶下端鑲嵌...
    殤祁祁閱讀 275評(píng)論 0 2
  • 圣誕節(jié)將近廷没, 老父親一個(gè)人在偌大的房間里忙來(lái)忙去準(zhǔn)備過(guò)圣誕節(jié)。 電話(huà)響起: ——爸爸垂寥,今年的圣誕節(jié)我不回去跟你過(guò)了...
    不死魚(yú)醬閱讀 681評(píng)論 0 0
  • 即使是在人潮中颠黎,我第一眼看到的依然是你。即使是擦肩而過(guò)滞项,你依然把我當(dāng)做空氣
    千尋千與閱讀 166評(píng)論 0 1