今是昨非

今是昨非

日出江花红胜火,春来江水绿如蓝

Using IconFont in iOS

Using IconFont#

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.

  1. 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.

  2. 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.

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

  1. From How to use iconfont in iOS
    Screen Shot 2019-05-02 at 18.01.24.png

  2. Add MWIconFont.Swift to your project.

  3. Modify two places in the file,

Screen Shot 2019-05-02 at 18.03.39.png

Screen Shot 2019-05-02 at 18.03.52.png

  1. 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]];

Working with icon fonts in iOS. Code example in Swift 3.

How to use iconfont in iOS

Iconfont - Alibaba Vector Icon Library

GitHub Iconic

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.