Swift之使用自定義IconFont

IconFont

IconFont 也叫字體圖標，顧名思義，就是字體做的圖標。受到近些年扁平化設計 的影響，越來越多的圖標都開始使用 icon font。
IconFont技術起源於Web領域的Web Font技術。隨着時間的推移，網頁設計越來越漂亮。但是電腦預裝的字體遠遠無法滿足設計者的要求，於是Web Font技術誕生了。一個英文字庫並不大，通過網絡下載字體，完成網頁的顯示。有了Web Font技術，大大提升了設計師的發揮空間。

優點

• 自由的變化大小，且不會模糊
• 比圖片小，加載快
• 方便更改顏色大小，圖片複用
• 減少切圖，一圖多用提高開發效率

缺點

• 只能被渲染成單色或者CSS3的漸變色
• 創作自已的字體圖標很費時間，重構人員後期維護的成本偏高。

第二點，目前阿里矢量圖的圖標基本上可以完成大部分要求，所以相對來說還是不會那麼坑。

iOS端使用

iconfont字體庫的創建

1. 登錄阿里矢量圖庫，挑選你需要的icon，並把它們加入購物車，然後添加到項目中。
   

2. 點擊購物車按鈕，然後把購物車中的圖標添加到項目中，方便以後管理，如果沒有項目可以自己新建一個項目。
   

3. 完成過後就可以看到我們剛剛添加好的項目圖標啦
   

Iconfont字體庫導入iOS工程

1. 現在剛剛的圖標庫到本地，找到IconFont.ttf導入到工程中
   

2. 在Info.plist中添加Fonts provided by application,名字就是我們剛剛導入的iconFont.ttf

代碼調用

給UIFont添加一個擴展

import UIKit
import Foundation
///Font擴展
public extension UIFont {
    ///初始化：iconFont
    class func iconfont(ofSize: CGFloat) -> UIFont? {
    //iconFont,對應我們導入的名字，size,就是圖標大小
        return UIFont.init(name: "iconFont", size: ofSize)
    }
}

寫一個enum，把我們的icon做一個映射

public enum Iconfont: String {
   //Tabbar Icon  
    case TabHome = "\u{e602}"
    case TabMine = "\u{e606}"
    case TabSearch = "\u{e6d0}"
    case TabCart = "\u{e77e}"
	 
	//Nav Icon  
    case NavBack = "\u{e601}"
    case NavClose = "\u{e607}"
    case NavRight = "\u{e600}"
    case NavAsk = "\u{e8b0}" 
    ///等等，自己根據需要添加
}

UILabel的使用

let label = UILabel.init(frame: CGRect.init(origin: CGPoint.init(x: 100, y: 100), size: CGSize.init(width: 30, height: 30)))
label.font = UIFont.iconfont(ofSize: 30)
label.text = Iconfont.TabHome.rawValue
label.textColor = UIColor.red //icon的顏色
view.addSubview(label)

同樣的我們爲了方便使用也可以給UILabel寫一個擴展如下

public extension UILabel {
    class func iconFont(from iconFont: Iconfont, size: CGFloat = 25, textColor: UIColor = .black) -> UILabel {
        let label = UILabel.init()
        label.text = iconFont.rawValue
        label.textAlignment = .center
        label.font = UIFont.iconfont(ofSize: size)
        label.textColor = textColor
        return label
    }
}

把IconFont，用UIImage顯示，給UIImage添加一個擴展

import UIKit

public extension UIImage
{
    convenience init(from font: Iconfont, textColor: UIColor = .black, backgroundColor: UIColor = .clear, size: CGSize) {
        let drawText = font
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.alignment = NSTextAlignment.center
        
        let fontSize = min(size.width / 1.28571429, size.height)
        let attributes: [NSAttributedString.Key: Any] = [.font: UIFont.iconfont(ofSize: fontSize), .foregroundColor: textColor, .backgroundColor: backgroundColor, .paragraphStyle: paragraphStyle]
        
        let attributedString = NSAttributedString(string: drawText.rawValue, attributes: attributes)
        UIGraphicsBeginImageContextWithOptions(size, false , UIScreen.main.scale)
        attributedString.draw(in: CGRect(x: 0, y: (size.height - fontSize) * 0.5, width: size.width, height: fontSize))
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        if let image = image {
            self.init(cgImage: image.cgImage!, scale: image.scale, orientation: image.imageOrientation)
        } else {
            self.init()
        }
    }
    
    static func icon(from font: Iconfont, iconColor: UIColor, imageSize: CGSize, ofSize size: CGFloat) -> UIImage
    {
        let drawText = font.rawValue
        
        UIGraphicsBeginImageContextWithOptions(imageSize, false, UIScreen.main.scale)
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.alignment = NSTextAlignment.center
        
        drawText.draw(in: CGRect(x:0, y:0, width:imageSize.width, height:imageSize.height), withAttributes: [.font: UIFont.iconfont(ofSize: size), .paragraphStyle: paragraphStyle, .foregroundColor: iconColor])
        
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return image!
    }
}

調用如下

//方法一：
UIImage.init(from: iconFont, textColor: .black, size: CGSize.init(width: 25, height: 25))
//方法二：
UIImage.icon(from: iconFont, iconColor: .black, imageSize: CGSize.init(width: 25, height: 25), ofSize: 25)

UIButton的使用

UIbutton的使用，無非就是，給UIButton，添加title或者是image，UIButton中對應的titleLabel，更改相關屬性就可以啦。代碼省略。

總結

自定義IconFont的在iOS，swift代碼應用基本就這些，如果你不直接看效果的話，可以現在如下代碼Demo，完整的icon，在下載下來的Font文件夾中可以自行查看

SwiftIconFontDemo