title: Using IconFont in iOS
date: 2019-05-02 15:20
tags: Technology#
Using IconFont#
GitHub link#
Background: Recently, the designer requested the use of IconFont for image cutting.#
At first, after searching for the use of IconFont, I selected TBCityIconFont. However, I found that it did not support images with different widths and heights. When displaying such images, they would be truncated, and I couldn't find any way to modify this in the implementation.
So I passed on that and switched to another third-party library called Iconic for Swift. This library has a benefit that it can automatically generate an enumeration for the icons in the .ttf file, making it very convenient to use. However, the downside is that it is troublesome to install. It used to be a bit troublesome, but recently it has become particularly troublesome, requiring the setting of FONT_PATH. Also, it does not support the latest version of Swift, so every time the .ttf font file is updated, it needs to be modified.
I couldn't stand it anymore, so today I took some time to write (copy) my own implementation. 😄 If you're interested, you can take a look at the reference links. It's basically a consolidation of the content in the reference links.
Implementation#
Firstly, what I wanted was to support both Int type (e.g. 0xe654) and String type (e.g. \u{E61A}). And if it's a local file, I wanted to be able to input the unicode code automatically without manual input. Lastly, I wanted to support displaying images with different widths and heights.
The overall principle is a combination of Working with icon fonts in iOS. Code example in Swift 3. and GitHub Iconic.
-
First, I added support for the input types. I defined two class methods, one for Int input and one for String input. Then, I implemented a method to convert Int to String, and based on that, I implemented the specific content.
-
It's inconvenient to input the unicode code for local files every time, so I defined two enumeration types: one for enum string and one for enum UInt32. I defined UInt32 to make it compatible with Objective-C. If it's pure Swift, only enum String needs to be used.
-
Displaying images with different widths and heights: The key code is as follows:
...xxx
var rect = CGRect(origin: CGPoint.zero, size: size)
rect.origin.y -= edgeInsets.top
rect.size.width -= edgeInsets.left + edgeInsets.right // Pay attention to operator precedence
rect.size.height -= edgeInsets.top + edgeInsets.bottom
...xxx
Usage#
-
Add MWIconFont.swift to the project.
-
Modify two places in the file,
- Usage
Using Swift label, generate attributed string
// Using enum Str
let attributeStr = MWIconFont.attributedString(fromIconStr: MWFontIcon.yuedufuHuodeIcon.rawValue, size: 50.0, color: UIColor.red)
displayLabel.attributedText = attributeStr
// Using enum Int
let attributeStr1 = MWIconFont.attributedString(fromIconInt: MWFontIconInt.yuedufuHuodeIcon.rawValue, size: 50.0, color: UIColor.blue)
displayLabel.attributedText = attributeStr1
Using Objective-C label, generate attributed string
NSMutableString *jiantouStr = [MWIconFont attributedStringFromIconInt:MWFontIconIntZuojiantouIcon size:CGSizeMake(19.0, 19.0) color:[UIColor redColor]];
Using Swift, generate image
// Using enum Str
let image = MWIconFont.image(fromIconStr: MWFontIcon.yuedufuHuodeIcon.rawValue, size: CGSize(width: 30.0, height: 50.0), color: UIColor.cyan, edgeInsets: UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: -10.0))
displayImageView.image = image
// Using enum Int
let image1 = MWIconFont.image(fromIconInt: MWFontIconInt.yuedufuHuodeIcon.rawValue, size: CGSize(width: 30.0, height: 50.0), color: UIColor.blue, edgeInsets: UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: -10.0))
displayImageView.image = image1
Using Objective-C, generate image
UIImage *backIcon = [MWIconFont imageFromIconInt:MWFontIconIntZuojiantouIcon size:CGSizeMake(19.0, 19.0) color:[UIColor redColor]];
Reference links#
Working with icon fonts in iOS. Code example in Swift 3.