澳门新萄京iOS上哪些利用iconfontLogo

澳门新萄京iOS上哪些利用iconfontLogo

在支付iOS项目时,不可幸免的会用到Logo,而为了适配不一样分辨率的装置,大家屡见不鲜会供给@2x,@3x两套格式的图样,最明显的便是底层tabBar的Logo使用。而对于那个有换肤供给的应用软件来讲,还亟需多套图来协作分裂的主旨。通过切图的点子制作Logo,一方面加大了开采者和设计者的职业量,另一方面也会增大APP的容积。而选择iconfont的能够高达以下指标1.减小应用体量,字体文件比图片要小;2.Logo保真缩放,消除2x/3x乃至现在nx图难点;3.利于改造Logo颜色深浅,图片复用。

在支付品种时,为了适配不相同分辨率的装置,大家习感到常会须要@2x,@3x两套格式的图片,最驾驭的正是底层tabBar的Logo使用。而对此那三个有换肤须要的APP来讲,还亟需多套图来合作分裂的大旨。通过切图的办法创建Logo,一方面加大了开垦者和设计者的工作量,另一方面也会增大APP的体积。而选拔iconfont的能够高达以下目的:
1、减小应用体量,字体文件比图片要小;
2、Logo保真缩放,化解2x/3x乃至未来nx图难题;
3、方便改动Logo颜色深浅,图片复用。

在iOS项目中,一般对图纸能源须要有@2x,@3x两套,以适配分裂分辨率的道具。对于有换肤须要的应用程式来讲,还亟需多套图来合作区别的宗旨。那样不但无形中扩充了开荒者和设计者的职业量,何况会增大应用程式的容量。为了释放手拓者、设计者的双臂以及给APP“消脂”,iconfont被引进到iOS开采中来。

iconFont拆开来看,就是 Icon +
Font,那样揣度我们应该都能清楚是何许,这两个结合是什么吗?没有错!正是IconFont
!让开采者像使用字体同样使用Logo。假诺和煦不会做的话,能够直接去Ali的iconfontLogo库下载自个儿索要的Logo。

因此为了给开辟者、设计者稍微收缩点职业量,给应用程式“减腹,大家能够将iconfont应用到自身的品种中。那么,iconfont是怎么用的啊?iconfont,从字面上就能够明了它正是字体,让开荒者像使用字体同样使用图标。

那就是说,iconfont怎么样使用?iconfont,从字面上就会通晓它就是字体。由于自个儿是撸代码的,所以对iconfont的造作并不熟悉,再说那几个都是UI做好了Logo给本身,假设想深造iconfont的炮制,去阿里Baba(Alibaba)的iconfont平台去看看。制作好的iconfont图标是一种.ttf格式的书体,如图:

iconfont,从字面上就会掌握它便是字体,让开采者像使用字体同样选择Logo。

在付出品种时,不可制止的会用到种种Logo,为了适配差别的配备,常常必要@2x和@3x两套图,举例说大家tabBar上行使的Logo。某个app有换肤的急需,还亟需多套区别的图来实行相称差别的核心。假使使用切图,那对于规划和付出以来无疑是增添了职业量,并且ipa的体积也会增大。

由于自个儿是做开辟的,所以对于iconfont的创制并不太熟识,都以设计员做好了Logo给自家,就算你想深造iconfont的造作的话,能够去Alibaba的iconfont平台去探视,下面有相比全的资料。制作好的iconfontLogo是一种.ttf格式的字体,如图:

澳门新萄京 1

生成iconfont需求矢量图。一些网站提供生成iconfont的劳务,例如icomoon和Fontello。阿里Baba(Alibaba)矢量Logo库和easyicon提供一大波妙不可言的矢量图。icomoon和fontello均能够透过导入SVG图标或然采用网址本人提供的Logo来生成iconfont。值得说的是,icomoon仍是能够生成PNG,PDF,CSH等格式。本文以icomoon作为调换工具。在调换的文书夹中,能够找到扩充名叫.ttf的书体集文件。

使用iconfont的好处:1. 减小ipa包的大小2. 图标保真缩放,多设备适配一套图解决问题3. 适应换肤要求,使用方便。

澳门新萄京 2iconfont图标

iconfont图标就是一个ttf

将.ttf文件增加到Xcode项目中去,在Build
Phases配置中确定保证可以见见导入的文本。

1. 首先去iconfontLogo库下载本人索要的Logo。

简书里居然gif大小限制的这么厉害,所以将动图放到项目里了,需求的在文末有git地址

澳门新萄京 3iconfont.jpg

如图大家能够采取自身索要的icon插足到购物车,然后参加项目里,当然你也得以一向在购物车向来下载,可是这么只是没有更动icon为温馨想要的体制,插足项目中,你能够本身随意修改icon为和煦想要的样式。

澳门新萄京 405.jpeg

留心:这里是下载代码,那样大家就能够在项目中一向运用

iconfont中的Logo是那般的:

iconfont中的Logo正是那幅德行:

事后在类型的info.plist中,加多Fonts provided by
application字段。那字段是三个数组,可感觉项目加多多少个字体集。

2.将下载下来的icon财富丰硕到自身的品种中。

澳门新萄京 504.jpeg

我们所急需的正是其一iconfont.ttf,对于那个ttf文件,小编想大家并不面生吧。新建项目,将以此ttf文件拖入本身的门类里。

澳门新萄京 603.jpeg

在意:勾选如图选项

接下去配置项目加载这几个文件

  • 反省文件是不是在档案的次序中,否则会崩溃

    澳门新萄京 702.jpeg

  • 在plist文件中参与字体

    澳门新萄京 8plist.png

接下去大家借助淘点点科学和技术写的三个有关iconfont封装,方便大家选拔iconfont。iconfont的包裹包罗

澳门新萄京 9工具类

  1. TBCityIconInfo.h的实现

#import <Foundation/Foundation.h>#import <UIKit/UIKit.h>@interface TBCityIconInfo : NSObject@property (nonatomic, strong) NSString *text;@property (nonatomic, assign) NSInteger size;@property (nonatomic, strong) UIColor *color;- (instancetype)initWithText:(NSString *)text size:(NSInteger)size color:(UIColor *)color;+ (instancetype)iconInfoWithText:(NSString *)text size:(NSInteger)size color:(UIColor *)color;@end
  1. TBCityIconInfo.m的实现

#import "TBCityIconInfo.h"@implementation TBCityIconInfo- (instancetype)initWithText:(NSString *)text size:(NSInteger)size color:(UIColor *)color { if (self = [super init]) { self.text = text; self.size = size; self.color = color; } return self;}+ (instancetype)iconInfoWithText:(NSString *)text size:(NSInteger)size color:(UIColor *)color { return [[TBCityIconInfo alloc] initWithText:text size:size color:color];}@end
  1. TBCityIconFont.h的实现

#import "UIImage+TBCityIconFont.h"#import "TBCityIconInfo.h"#define TBCityIconInfoMake(text, imageSize, imageColor) [TBCityIconInfo iconInfoWithText:text size:imageSize color:imageColor]@interface TBCityIconFont : NSObject+ fontWithSize: size;+ setFontName:(NSString *)fontName;
  1. TBCityIconFont.m的实现

#import "TBCityIconFont.h"#import <CoreText/CoreText.h>@implementation TBCityIconFontstatic NSString *_fontName;+ registerFontWithURL:url { NSAssert([[NSFileManager defaultManager] fileExistsAtPath:[url path]], @"Font file doesn't exist"); CGDataProviderRef fontDataProvider = CGDataProviderCreateWithURL((__bridge CFURLRef)url); CGFontRef newFont = CGFontCreateWithDataProvider(fontDataProvider); CGDataProviderRelease(fontDataProvider); CTFontManagerRegisterGraphicsFont(newFont, nil); CGFontRelease;}+ fontWithSize:size { UIFont *font = [UIFont fontWithName:[self fontName] size:size]; if (font == nil) { NSURL *fontFileUrl = [[NSBundle mainBundle] URLForResource:[self fontName] withExtension:@"ttf"]; [self registerFontWithURL: fontFileUrl]; font = [UIFont fontWithName:[self fontName] size:size]; NSAssert(font, @"UIFont object should not be nil, check if the font file is added to the application bundle and you're using the correct font name."); } return font;}+ setFontName:(NSString *)fontName { _fontName = fontName; }+ (NSString *)fontName { return _fontName ? : @"iconfont";}@end
  1. UIImage+TBCityIconFont.h的实现

#import <UIKit/UIKit.h>#import "TBCityIconInfo.h"@interface UIImage (TBCityIconFont)+ (UIImage *)iconWithInfo:(TBCityIconInfo *)info;@end
  1. UIImage+TBCityIconFont.m的实现

#import "UIImage+TBCityIconFont.h"#import "TBCityIconFont.h"#import <CoreText/CoreText.h>@implementation UIImage (TBCityIconFont)+ (UIImage *)iconWithInfo:(TBCityIconInfo *)info { CGFloat size = info.size; CGFloat scale = [UIScreen mainScreen].scale; CGFloat realSize = size * scale; UIFont *font = [TBCityIconFont fontWithSize:realSize]; UIGraphicsBeginImageContext(CGSizeMake(realSize, realSize)); CGContextRef context = UIGraphicsGetCurrentContext(); if ([info.text respondsToSelector:@selector(drawAtPoint:withAttributes:)]) { /** * 如果这里抛出异常,请打开断点列表,右击All Exceptions -> Edit Breakpoint -> All修改为Objective-C * See: http://stackoverflow.com/questions/1163981/how-to-add-a-breakpoint-to-objc-exception-throw/14767076#14767076 */ [info.text drawAtPoint:CGPointZero withAttributes:@{NSFontAttributeName:font, NSForegroundColorAttributeName: info.color}]; } else { #pragma clang diagnostic push#pragma clang diagnostic ignored "-Wdeprecated-declarations" CGContextSetFillColorWithColor(context, info.color.CGColor); [info.text drawAtPoint:CGPointMake withFont:font];#pragma clang pop } UIImage *image = [UIImage imageWithCGImage:UIGraphicsGetImageFromCurrentImageContext().CGImage scale:scale orientation:UIImageOrientationUp]; UIGraphicsEndImageContext(); return image;}@end

澳门新萄京 10iconfont中的Logo

澳门新萄京 11

在运用在此之前,让大家回来生成的文书夹中,在和.ttf的同二个目录下,能够找到同名的.svg文件。那是二个xml文件,每二个<glyph>标签对应二个矢量Logo,包涵它对应的unicode代码和称号。大家便是经过这一个代码在Xcode中利用那个Logo。那几个代码是&#xXXXX格式的,在Xcode中要求转变到\UXXXXXXXX格式的。能够使用在线编码工具进行转译。

3.具体接纳方法

1.在AppDelegate.m中,初始化iconfont

#import "AppDelegate.h"#import "TBCityIconFont.h"#import "ViewController.h"@interface AppDelegate ()@end@implementation AppDelegate- application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch. [TBCityIconFont setFontName:@"iconfont"]; UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:[ViewController new]]; self.window.rootViewController = nav; [self.window makeKeyAndVisible]; return YES;}
  1. ViewController.m中实现

#import "ViewController.h"#import "TBCityIconFont.h"#import "UIImage+TBCityIconFont.h"@interface ViewController ()@end@implementation ViewController- viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 30, 30)]; [self.view addSubview:imageView]; //图标编码是&#xe600,需要转成\U0000e600 imageView.image = [UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e600", 30, [UIColor redColor])]; // button UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem]; button.frame = CGRectMake(100, 150, 40, 40); [self.view addSubview:button]; [button setImage:[UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e614", 40, [UIColor redColor])] forState:UIControlStateNormal]; // label,label可以将文字与图标结合一起,直接用label的text属性将图标显示出来 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 200, 280, 40)]; [self.view addSubview:label]; label.font = [UIFont fontWithName:@"iconfont" size:15];//设置label的字体 label.text = @"在lable上显示 \U0000e658"; // Do any additional setup after loading the view, typically from a nib.}- didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated.}@end

结果如下图所示:

澳门新萄京 1201.jpeg

只顾:1.
所用到的unicode编码供给自个儿手动将&#xXXXX格式调换来\UXXXXXXXX格式,比如//Logo编码是&#xe600,供给转成\U0000e6002.
兼有须要的unicode编码都得以在下载的iconfont文件夹中的.html文件展开查看

澳门新萄京 13code.jpeg

澳门新萄京,正文demo,接待斟酌指正,留下你的star哦。更多文章请点击这里

而作者辈要求的是将.ttf格式的公文引进到本身的工程中

iconfont图标

<glyph unicode="&#xe900" glyph-name="home" d="M1024 369.556l-512 397.426-512-397.428v162.038l512 397.426 512-397.428zM896 384v-384h-256v256h-256v-256h-256v384l384 288z" />

接下去大家依附淘点点科学技术写的三个关于iconfont封装,方便大家运用iconfont。iconfont的卷入满含

而大家供给做的就是将.ttf格式的文书拖入工程中,然后借助淘点点科学技术写的二个关于iconfont封装,方便我们选择iconfont。(笔者demo中有,就不贴代码了。)

Logo对应的unicode为”&#xe900″, 对应的字符串为”\ U0000E900″,
那几个能够通过FontLab Studio软件来查阅。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图