欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用FontAwesome

程序员文章站 2024-02-20 23:25:28
...

使用FontAwesome

使用FontAwesome

https://github.com/PrideChung/FontAwesomeKit

 

为什么要使用FontAwesome呢,其实,它的字体就是矢量图,无论是放大还是缩小都不失真的矢量图哦.

使用FontAwesome

1. 下载源码,导入文件夹FontAwesomeKit,然后引入头文件FontAwesomeKit.h

使用FontAwesome

 

2. 使用

// 取得固定的icon以及设定尺寸
    FAKZocial *twitterIcon = [FAKZocial *IconWithSize:50];
    
    // 设定相关的属性
    [twitterIcon addAttribute:NSForegroundColorAttributeName
                     value:[UIColor redColor]];
    
    // 在UILabel上显示
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
    label.attributedText = [twitterIcon attributedString];
    [self.view addSubview:label];
    label.center = self.view.center;

使用是非常简单的哦,效果如下:

使用FontAwesome

 

3. 高级应用

你以为就显示出来就没了么?非也,你想过把字体转换为路径么,转换为路径后就可以执行各种CoreAnimation的动画了呢:)

先来试一下CAshapeLayer的动画路径:

// 取得固定的icon以及设定尺寸
    FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:100];
    
    // 设定相关的属性
    [twitterIcon addAttribute:NSForegroundColorAttributeName
                     value:[UIColor blackColor]];

    // 将icon转换为贝塞尔曲线
    UIBezierPath *path = [UIBezierPath pathFromAttributedString:[twitterIcon attributedString]];

    // 创建shapeLayer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];

    // 获取path
    shapeLayer.path = path.CGPath;
    
    // 根据这个path来设定尺寸
    shapeLayer.bounds = CGPathGetBoundingBox(shapeLayer.path);
    
    // 几何反转
    shapeLayer.geometryFlipped = YES;
    
    // 一些颜色的填充
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor cyanColor].CGColor;
    
    // 设定layer位置
    shapeLayer.position = self.view.center;
    [self.view.layer addSublayer:shapeLayer];
    
    // 定时器动画
    _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
    [_timer event:^{
        shapeLayer.strokeEnd = arc4random()%100/100.f;
    } timeInterval:NSEC_PER_SEC];
    [_timer start];

使用FontAwesome
// 取得固定的icon以及设定尺寸
    FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:100];
    
    // 设定相关的属性
    [twitterIcon addAttribute:NSForegroundColorAttributeName
                     value:[UIColor blackColor]];

    // 将icon转换为贝塞尔曲线
    UIBezierPath *path = [UIBezierPath pathFromAttributedString:[twitterIcon attributedString]];

    // 创建shapeLayer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];

    // 获取path
    shapeLayer.path = path.CGPath;
    
    // 根据这个path来设定尺寸
    shapeLayer.bounds = CGPathGetBoundingBox(shapeLayer.path);
    
    // 几何反转
    shapeLayer.geometryFlipped = YES;
    
    // 一些颜色的填充
    shapeLayer.fillColor = [UIColor blackColor].CGColor;
    shapeLayer.strokeColor = [UIColor clearColor].CGColor;
    shapeLayer.position = CGPointMake(50, 50);
    
    // 渐变颜色图层
    CAGradientLayer *colorLayer = [CAGradientLayer layer];
    colorLayer.bounds = CGRectMake(0, 0, 120, 120);
    colorLayer.mask = shapeLayer;
    colorLayer.colors = @[(id)[UIColor redColor].CGColor,
                          (id)[UIColor greenColor].CGColor,
                          (id)[UIColor yellowColor].CGColor];
    colorLayer.position = self.view.center;
    
    // 设定layer位置
    [self.view.layer addSublayer:colorLayer];
    
    // 定时器动画
    _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
    [_timer event:^{
        colorLayer.speed = 0.5;
        colorLayer.colors = @[(id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor];
    } timeInterval:NSEC_PER_SEC];
    [_timer start];

使用FontAwesome
// 取得固定的icon以及设定尺寸
    FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:100];
    
    // 设定相关的属性
    [twitterIcon addAttribute:NSForegroundColorAttributeName
                     value:[UIColor blackColor]];

    // 将icon转换为贝塞尔曲线
    UIBezierPath *path = [UIBezierPath pathFromAttributedString:[twitterIcon attributedString]];

    // 创建shapeLayer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];

    // 获取path
    shapeLayer.path = path.CGPath;
    
    // 根据这个path来设定尺寸
    shapeLayer.bounds = CGPathGetBoundingBox(shapeLayer.path);
    
    // 几何反转
    shapeLayer.geometryFlipped = YES;
    
    // 一些颜色的填充
    shapeLayer.fillColor = [UIColor redColor].CGColor;
    shapeLayer.strokeColor = [UIColor clearColor].CGColor;
    shapeLayer.position = CGPointMake(50, 50);
    
    // 渐变颜色图层
    CAGradientLayer *colorLayer = [CAGradientLayer layer];
    colorLayer.bounds = CGRectMake(0, 0, 120, 120);
    colorLayer.mask = shapeLayer;
    colorLayer.colors = @[(id)[UIColor redColor].CGColor,
                          (id)[UIColor greenColor].CGColor,
                          (id)[UIColor yellowColor].CGColor];
    colorLayer.position = self.view.center;
    
    // 设定layer位置
    [self.view.layer addSublayer:colorLayer];
    
    // 旋转
    CABasicAnimation *basicAni = \
        [CABasicAnimationList animationWithRotationZFromValue:-2*M_PI_2 toValue:2*M_PI_2];
    basicAni.duration = 1.0f;
    basicAni.repeatCount = HUGE_VALF;
    [shapeLayer addAnimation:basicAni forKey:nil];
    
    // 定时器动画
    _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
    [_timer event:^{
        colorLayer.colors = @[(id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor];
        
    } timeInterval:NSEC_PER_SEC];
    [_timer start];

使用FontAwesome

附录:

    FAKFontAwesome *starIcon = [FAKFontAwesome asteriskIconWithSize:50];
    FAKFoundationIcons *bookmarkIcon = [FAKFoundationIcons bookmarkIconWithSize:15];
    FAKZocial *twitterIcon = [FAKZocial twitterIconWithSize:15];
    FAKIonIcons *mailIcon = [FAKIonIcons ios7EmailIconWithSize:48];