iOS矢量图的使用

将矢量图加入xcassets中，选中图片修改scale参数为Single Scale 或者 Individual and Single Scales，如下图

矢量图.png

Individual and Single Scales 是Single Scale 的增强，可以在放置完矢量图之后继续放置1x、2x 和 3x 的png格式图片。放置的png会优先覆盖矢量图，未放置对应设备的图片才会使用矢量图对应生成的图片。

在Xcode编译的阶段矢量图会自动生成对应的1x、2x 和 3x 的png格式的图片。在iOS实际运行中使用的图片实际上已经是png格式的图片了。

示例

#import "ViewController.h"

@interface ViewController ()

/** UI */
@property (nonatomic, strong) UIImageView *vectorImgView;

@property (nonatomic, strong) UILabel *systemLabel;

@property (nonatomic, strong) UILabel *customLabel;

@property (nonatomic, strong) UIImageView *qrCodeImgView;

@property (nonatomic, strong) UILabel *signLabel;

@end

@implementation ViewController

#pragma mark - life cycle
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    self.title = @"矢量图";
    
    [self.view addSubview:self.vectorImgView];
    self.vectorImgView.frame = CGRectMake(([UIScreen mainScreen].bounds.size.width - 40) / 2.0, 80, 40, 40);
    
    [self.view addSubview:self.systemLabel];
    self.systemLabel.frame = CGRectMake(([UIScreen mainScreen].bounds.size.width - 220) / 2, 150, 220, 30);
    
    [self.view addSubview:self.customLabel];
    self.customLabel.frame = CGRectMake(([UIScreen mainScreen].bounds.size.width - 220) / 2, 220, 230, 30);
    
    [self.view addSubview:self.qrCodeImgView];
    self.qrCodeImgView.frame = CGRectMake(([UIScreen mainScreen].bounds.size.width - 129) / 2, 270, 129, 129);
    
    [self.view addSubview:self.signLabel];
    self.signLabel.frame = CGRectMake([UIScreen mainScreen].bounds.size.width - 170, 440, 150, 30);
    
}

#pragma mark - getter and setter
- (UIImageView *)vectorImgView
{
    if (_vectorImgView == nil) {
        _vectorImgView = [[UIImageView alloc] init];
        _vectorImgView.backgroundColor = [UIColor clearColor];
        _vectorImgView.image = [UIImage imageNamed:@"starTest"];
    }
    
    return _vectorImgView;
}

- (UILabel *)systemLabel
{
    if (_systemLabel == nil) {
        _systemLabel = [[UILabel alloc] init];
        _systemLabel.backgroundColor = [UIColor clearColor];
        _systemLabel.font = [UIFont systemFontOfSize:25];
        _systemLabel.text = @"欢迎关注";
        _systemLabel.textAlignment = NSTextAlignmentCenter;
    }
    
    return _systemLabel;
}

- (UILabel *)customLabel
{
    if (_customLabel == nil) {
        _customLabel = [[UILabel alloc] init];
        _customLabel.backgroundColor = [UIColor clearColor];
        _customLabel.font = [UIFont systemFontOfSize:25];
        _customLabel.text = @"💗💗点滴86💗💗";
        _customLabel.textAlignment = NSTextAlignmentCenter;
    }
    
    return _customLabel;
}

- (UIImageView *)qrCodeImgView
{
    if (_qrCodeImgView == nil) {
        _qrCodeImgView = [[UIImageView alloc] init];
        _qrCodeImgView.backgroundColor = [UIColor clearColor];
        _qrCodeImgView.image = [UIImage imageNamed:@"qrcode"];
    }
    
    return _qrCodeImgView;
}

- (UILabel *)signLabel
{
    if (_signLabel == nil) {
        _signLabel = [[UILabel alloc] init];
        _signLabel.backgroundColor = [UIColor clearColor];
        _signLabel.font = [UIFont systemFontOfSize:20];
        _signLabel.text = @"By 点滴86";
        _signLabel.textAlignment = NSTextAlignmentRight;
    }
    
    return _signLabel;
}


@end

6s效果如下

矢量图-6S.png

7P效果图如下

矢量图-7P.png

矢量图的使用就到此结束啦