iOS實現(xiàn)顏色漸變第二篇

在記錄完上一篇的"iOS繪制漸變色背景"學習之后,有一位小伙伴get了上篇文章還給我留了言,所以今天的這篇文章將在上一篇的基礎(chǔ)上加入更多一些小東西來實現(xiàn)小伙伴想要的樣子(如下)。另外,所有的文章只代表個人學習的心得和記錄.不對的地方還請小伙伴指點。一起共同進步!

Snip20170523_6.png

我封裝了相關(guān)代碼,想要實現(xiàn)上面的效果,只需要導入"UIView+RHGradientLayer.h",然后對所創(chuàng)建的UIView設(shè)置屬性即可,如下:

Snip20170523_7.png

這個效果用到了CATextLayer,CAGradientLayer
上一篇有介紹CAGradientLayer這里就不多說了.
這篇介紹CATextLayer和具體封裝代碼的相關(guān)實現(xiàn)細節(jié).

CATextLayer類

CATextLayer提供簡單的文本布局和呈現(xiàn)普通或帶屬性字符串。第一行與層的頂部對齊

其繼承關(guān)系圖如下:

Snip20170523_2.png

其繼承CAlayer,設(shè)置其屬性都會有GPU繪制運算的

其屬性有:

1. string: id類型
2. font:CFTypeRef類型,根據(jù)你的具體需要來決定字體屬性應該是用CGFontRef類型還是CTFontRef類型
3. fontSize: CFTypeRef類型,根據(jù)你的具體需要來決定字體屬性應該是用CGFontRef類型還是CTFontRef類型
4. foregroundColor:CGColorRef類型
5. wrapped: Bool類型,自動換行
6. alignmentMode:枚舉類型,對齊方式
7. truncationMode,當字符串顯示不全的時候的裁剪方式,枚舉如下(我這里并沒用到,就詳細列一下,具體效果這里就先不說了).
   kCATruncationNone; // 不剪裁，默認
   kCATruncationStart; // 剪裁開始部分
   kCATruncationEnd; // 剪裁結(jié)束部分
   kCATruncationMiddle; // 剪裁中間部分

相關(guān)代碼的實現(xiàn)

我把相關(guān)的實現(xiàn)方法細節(jié)貼出來,相關(guān)的封裝怎么做都可以.因為是在UIView上操作,所以我是在UIView類上進行擴展,創(chuàng)建UIView+RHGradientLayer類別.

Snip20170523_8.png

UIView + RHGradientLayer.m的相關(guān)代碼如下

     self.textLayer = [CATextLayer layer];
    
    [self.layer addSublayer:self.textLayer];
    
    self.textLayer.alignmentMode = kCAAlignmentCenter;
    self.textLayer.string = text;
    self.textLayer.contentsScale = [UIScreen mainScreen].scale;
    
    CFStringRef fontName = (__bridge CFStringRef)self.font.fontName;
    CGFontRef fontRef = CGFontCreateWithFontName(fontName);
    self.textLayer.font = fontRef;
    self.textLayer.fontSize = self.font.pointSize;
    CGSize textSize = [text sizeWithAttributes:@{NSFontAttributeName: self.font}];
    CGRect frame = self.textLayer.frame;
    frame.size = textSize;
    self.textLayer.frame = CGRectMake(self.frame.size.width/2 - frame.size.width/2, self.frame.size.height/2 - frame.size.height/2, textSize.width, textSize.height);
    
    CGFontRelease(fontRef);

在VC里導入"UIView+RHGradientLayer.h"即可實現(xiàn)效果:

   //用UIView實現(xiàn)
    UIView *testView = [UIView new];
    
    testView.frame = CGRectMake(60, 60, 110, 40);
    
    testView.layer.cornerRadius = 20.0;
    
    testView.layer.masksToBounds = YES;
    
    testView.font = [UIFont systemFontOfSize:14];
    
    //tip:注意fromColor和toColor的順序
    //fromColor在前, toColor在后
    
    testView.fromColor = @"F76B1C";
    
    testView.toColor = @"FBDA61";
    
    testView.text = @"可愛的UIView";
    
    //如要設(shè)置字體顏色
    //testView.textColor = [UIColor redColor];
    
    [self.view addSubview:testView];

模擬器運行如下:

Snip20170523_1.png

總結(jié)

我這里先將這篇文章和學習記錄分享出來,之后我附上相關(guān)代碼github上的鏈接供大家參考,有哪里不對和有出路的地方還請我的前輩們指點一二.想要提前看具體實現(xiàn)部分的小伙伴可以私聊我或者加入我之前自己建立的一個技術(shù)分享Q群(下面有說).由于一些事情加上身體還沒完全康復就沒能及時回復上一篇文章小伙伴留言的問題,這篇我將上一篇代碼和這一篇代碼實現(xiàn)部分封裝了一下,盡可能簡潔吧,有不對的地方請指點,我會及時修正重新上傳.

githubDemo地址:https://github.com/imrenhang/RHGradientLayerDemo/tree/master

最后,歡迎喜歡iOS開發(fā)的小伙伴加入技術(shù)分享群:18287185。

技術(shù)需要分享,我們一起學習和探討,共同學習與進步