So verwenden Sie Iconfont elegant in iOS

1.Was ist Iconfont?

    Zusammengenommen ist iconFont Icon + Font, daher sollte wahrscheinlich jeder verstehen, was es ist. Was ist also die Kombination der beiden? Das ist richtig! Es ist IconFont! Lassen Sie Entwickler Symbole wie Schriftarten verwenden. Wenn Sie nicht wissen, wie man das selbst macht, können Sie direkt zur Iconfont-Bibliothek von Alibaba gehen , um die benötigten Icons herunterzuladen.

2. Warum Iconfont verwenden?

    Bei der Entwicklung eines Projekts ist es unvermeidlich, verschiedene Symbole zu verwenden. Um sich an verschiedene Geräte anzupassen, sind normalerweise zwei Sätze von Bildern erforderlich, @2x und @3x, wie beispielsweise die Symbole, die in unserer TabBar verwendet werden. Einige Apps erfordern Skin-Änderungen und mehrere Sätze unterschiedlicher Bilder, um zu verschiedenen Themen zu passen. Wenn Sie Ausschnitte verwenden, erhöht dies zweifellos den Arbeitsaufwand für Design und Entwicklung und auch die Größe des IPA nimmt zu.

Vorteile der Verwendung von Iconfont:

1. Reduzieren Sie die Größe des IPA-Pakets
2. Skalierung der Symboltreue, Anpassung eines Satzes von Bildern an mehrere Geräte, um Probleme zu lösen
3. Passt sich den Anforderungen an die Hauterneuerung an und ist einfach anzuwenden.

3. So verwenden Sie Iconfont

1. Gehen Sie zunächst zur Iconfont-Symbolbibliothek , um die benötigten Symbole herunterzuladen.

Wie im Bild gezeigt, können wir das benötigte Symbol auswählen, es in den Warenkorb legen und es dann dem Projekt hinzufügen. Natürlich können Sie es auch direkt im Warenkorb herunterladen, dies ändert jedoch nichts Fügen Sie es dem Projekt hinzu, und Sie können es selbst tun. Sie können das Symbol jederzeit in den gewünschten Stil ändern.

Hinweis: Hier ist der Download-Code, damit wir ihn direkt im Projekt verwenden können

2. Fügen Sie die heruntergeladenen Symbolressourcen zu Ihrem Projekt hinzu.

Alles was wir brauchen ist diese iconfont.ttf. Ich denke, wir sind mit dieser ttf-Datei vertraut. Erstellen Sie ein neues Projekt und ziehen Sie diese TTF-Datei in Ihr Projekt.

Hinweis: Aktivieren Sie die im Bild gezeigte Option

Konfigurieren Sie als Nächstes das Projekt zum Laden dieser Datei.
* Überprüfen Sie, ob sich die Datei im Projekt befindet, da sie sonst abstürzt.

* Fügen Sie die Schriftart zur Plist-Datei hinzu

. Als Nächstes verwenden wir ein von Taodiandian Technology geschriebenes Iconfont-Paket, um die Verwendung von Iconfont zu erleichtern. Das Paket von Iconfont enthält

1. TBCityIconInfo.hRealisierung

#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.mRealisierung

#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.hRealisierung

#import "UIImage+TBCityIconFont.h"
#import "TBCityIconInfo.h"

#define TBCityIconInfoMake(text, imageSize, imageColor) [TBCityIconInfo iconInfoWithText:text size:imageSize color:imageColor]

@interface TBCityIconFont : NSObject

+ (UIFont *)fontWithSize: (CGFloat)size;
+ (void)setFontName:(NSString *)fontName;

1. TBCityIconFont.mRealisierung

#import "TBCityIconFont.h"
#import <CoreText/CoreText.h>

@implementation TBCityIconFont

static NSString *_fontName;

+ (void)registerFontWithURL:(NSURL *)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(newFont);
}

+ (UIFont *)fontWithSize:(CGFloat)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;
}

+ (void)setFontName:(NSString *)fontName {
_fontName = fontName;

}


+ (NSString *)fontName {
return _fontName ? : @"iconfont";
}

@end

1. UIImage+TBCityIconFont.hRealisierung

#import <UIKit/UIKit.h>
#import "TBCityIconInfo.h"

@interface UIImage (TBCityIconFont)

+ (UIImage *)iconWithInfo:(TBCityIconInfo *)info;

@end

1. UIImage+TBCityIconFont.mRealisierung

#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(0, 0) withFont:font];
#pragma clang pop
}

UIImage *image = [UIImage imageWithCGImage:UIGraphicsGetImageFromCurrentImageContext().CGImage scale:scale orientation:UIImageOrientationUp];
UIGraphicsEndImageContext();

return image;
}

@end

3. Spezifische Nutzungsmethoden

1. AppDelegate.mInitialisieren Sie in , iconfont

#import "AppDelegate.h"
#import "TBCityIconFont.h"
#import "ViewController.h"
@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)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.mumgesetzt in

#import "ViewController.h"
#import "TBCityIconFont.h"
#import "UIImage+TBCityIconFont.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)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.
}


- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}


@end

Das Ergebnis ist unten dargestellt:

Hinweis:
1. Die verwendete Unicode-Kodierung muss manuell vom &#xXXXX-Format in das \UXXXXXXXX-Format konvertiert werden. Beispiel: // Die Symbolkodierung ist , die in \U0000e600 konvertiert werden muss. 2. Alle Die erforderlichen Unicode-Kodierungen können heruntergeladen werden
von: Öffnen Sie die .html-Datei im Iconfont-Ordner und zeigen Sie sie an

Bei diesem Artikel handelt es sich um eine Demo . Kritik und Korrekturen sind willkommen. Bitte hinterlassen Sie Ihren Stern.