Using IconFont#
GitHub Link#
Background: Recently, the designer requested the use of IconFont for slicing.#
At first, after searching for the usage of IconFont, I selected TBCityIconFont. However, I found that it did not support images well, especially for images with unequal width and height. They would be truncated when displayed, and I couldn't find any way to modify it in the implementation.
So I gave up on it and switched to another third-party library called Iconic in Swift. This library has a benefit that it can automatically generate an enumeration for icons from the .ttf file, which is very convenient to use. However, the downside is that it is troublesome to install. It used to be a little 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) one myself. 😄 If you are interested, you can take a look at the reference link. It's actually just a consolidation of the content in the reference link.
Implementation#
First of all, what I want is to support passing in an Int type (e.g. 0xe654) or a string type (e.g. \u{E61A}). And if it's a local file, I hope I don't have to manually enter the Unicode code. Finally, I want the images to be displayed with unequal width and height.
The overall principle is a combination of Working with icon fonts in iOS. Code example in Swift 3. and GitHub Iconic.
-
First, support for different types of input. Define two class methods, one for Int input and one for String input. Then implement a method for converting Int to String, and implement the specific content based on the String.
-
It's inconvenient to manually enter the Unicode code for local files every time, so define two enumeration types: one is enum string and the other is enum UInt32. UInt32 is defined to be compatible with Objective-C. If it's pure Swift, only enum String is needed.
-
Displaying images with unequal width and height: 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 your 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.