iOS中的FontAwesome按钮

FontAwesome是用于网页设计的非常有用的工具，我们广泛使用它来避免需要定期设计图标的情况。 因此，它是网络上linkalist的关键部分，我们为FontAwesome图标样式提供了广泛的支持。

因此，既然我们正在使用iOS SDK，我们对图形资产的需求也非常相似，因为我们需要将图像放入系统中，以三种不同的尺寸缩放然后将其添加到应用程序中，因此构建起来非常繁琐。 。 然后，如果需要更改按钮的大小，我们将再次进行整个操作。 它的直接驱动程序是图像选择控件，因此我们可以添加相机和库按钮。

因此，今天早上，我决定浪费足够的时间来解决这个问题，并决定了解设计FontAwesome按钮的方法。 与iOS中的大多数事情一样，事实证明这比必要的要复杂一些。 首先，我必须从http://www.fontawesome.com下载该软件包。 我已经使用了5.6.3版本，但是任何版本都应该同样适用。

安装与注册

我将所有三个ttf文件放在下载包的webfonts目录中，并将它们安装到我的系统上。 然后，我将三个ttf文件添加到我的应用程序资源中。

下一步是注册字体。 应该有一种使用info.plist文件执行此操作的方法，但这有点不可靠，我发现在代码中执行此操作更为简单。

  扩展 UIFont 
  { 
  类func loadAllFonts（）{ 
  让 bundleID =“ io.linkalist.linkalistSDK” 
  registerFont（“ fa-regular-400.ttf”，bundleID：bundleID） 
  registerFont（“ fa-solid-900.ttf”，bundleID：bundleID） 
  registerFont（“ fa-brands-400.ttf”，bundleID：bundleID） 
  } 

  静态函数 registerFont（_ fileName：String，bundleID：String）{ 
  如果让 frameworkBundle = Bundle（identifier：bundleID）{ 
  让 pathForResourceString = frameworkBundle.path（forResource：fileName，ofType： nil ） 
  让 fontData = NSData（contentsOfFile：pathForResourceString！） 
  让 dataProvider = CGDataProvider（data：fontData！） 
  让 fontRef = CGFont（dataProvider！） 
  var errorRef：Unmanaged ？  = 无 

  如果 （CTFontManagerRegisterGraphicsFont（fontRef !,＆errorRef）== false ）{ 
  print（“无法注册字体-注册图形字体失败-该字体可能已经在主捆绑包中注册。” 
  } 
  } 
  其他 { 
  print（“无法注册字体-包标识符无效。”） 
  } 
  } 
  } 

现在，调用UIFont.loadAllFonts应该会注册三种必需的字体。 如果您使用的是嵌入式框架，请确保将字体文件和此代码注册到正确的模块中。

我还发现通过UIFont扩展中的函数来访问各种字体很方便，这样我们就可以以正确的大小重复实例化这三种注册字体中的任何一种。

  //字体 
  公共扩展 UIFont 
  { 
  公共类func RegularIconFont（size：CGFloat）-> UIFont 
  { 
  var font = systemFont（ofSize：size） 
  如果让 iconFont = UIFont（名称：“ Font Awesome 5 Free”，大小：size） 
  { 
 字体= iconFont 
  } 
  返回字体 
  } 

  公共类func solidIconFont（size：CGFloat）-> UIFont 
  { 
  var font = systemFont（ofSize：size） 
  如果让 iconFont = UIFont（名称：“ FontAwesome5FreeSolid”，大小：大小） 
  { 
 字体= iconFont 
  } 
  返回字体 
  } 

  public class func brandIconFont（size：CGFloat）-> UIFont 
  { 
  var font = systemFont（ofSize：size） 
  如果让 iconFont = UIFont（名称：“ Font Awesome 5 Brands”，大小：size） 
  { 
 字体= iconFont 
  } 
  返回字体 
  } 
  } 

现在，我们可以轻松地以任何所需大小访问各种字体。

实施控制

最后，我们深入到控件的业务端。 由于我想要矩形，圆形和圆角矩形按钮的选项，因此我定义了一个枚举，使我可以沿圆角半径仅在RoundRects上使用这三种形状。 最后，由于我也喜欢按钮上的边框，因此我可以选择以像素为单位指定边框宽度。 颜色与文本颜色相同，以保持外观整洁。

由于我们有三种字体样式，因此我们需要另一个枚举，并且还需要公开一个可检查的大小值。 此大小将字体大小表示为按钮大小的百分比，此大小对于此应用程序来说很方便。

  // FontAwesomeIconButton.swift 
  // linkalistSDK 
  // 
  //由James Howard在2019年1月3日创建。 
  //版权所有©2019 Linkalist Technologies。 版权所有。 

  导入 UIKit 

  class FontAwesomeIconButton：UIButton 
  { 
  枚举 BackgroundShape：字符串 
  { 
  case Rectangle =“矩形” 
  case RoundRectangle =“圆角矩形” 
  case Circle =“圆” 
  } 

  枚举 FontStyle：字符串 
  { 
  case 常规 =“常规” 
  case 固体 =“固体” 
  案例 品牌 =“品牌” 
  } 

  @IBInspectable var shapeName：字符串{ 
  得到 { 
  返回自身 .buttonShape.rawValue 
  } 
  设置 （shapeIndex）{ 
  self .buttonShape = BackgroundShape（rawValue：shapeIndex）??  。长方形 

  drawBackground（） 
  } 
  } 
  @IBInspectable var cornerRadius：CGFloat 
  { 
  得到 { 
  返回按钮 
  } 
  设置 （值） 
  { 
  buttonCornerRadius =值 
  drawBackground（） 
  } 
  } 


  @IBInspectable var fontStyle：字符串 
  { 
  得到 
  { 
  返回self .buttonFontStyle.rawValue 
  } 
  设置 （fontIndex） 
  { 
  self .buttonFontStyle = FontStyle（rawValue：fontIndex）??  。定期 
  setupFont（） 
  } 
  } 

  @IBInspectable var fontSize：CGFloat 
  { 
  得到 { 
  返回 buttonFontSize 
  } 
  设置 （值） 
  { 
  buttonFontSize =值 
  setupFont（） 
  } 
  } 

  @IBInspectable var borderSize：CGFloat 
  { 
  得到 { 
  返回 buttonBorderSize 
  } 
  设置 （值） 
  { 
  buttonBorderSize =值 
  setBorder（） 
  } 
  } 

  var buttonShape：BackgroundShape =。  长方形 
  var buttonFontStyle：FontStyle =。  定期 
  var buttonFontSize：CGFloat = 50.0 
  var buttonBorderSize：CGFloat = 0.0 
  var buttonCornerRadius：CGFloat = 0.0 

  func setupFont（） 
  { 
  让 fontSize =（bounds.size.height * buttonFontSize）/ 100.0 

  开关 （buttonFontStyle） 
  { 
  案子 。  常规 ： 
  自我 .titleLabel？.font = UIFont.regularIconFont（size：fontSize） 
  案子 。  固体 ： 
  自我 .titleLabel？.font = UIFont.solidIconFont（size：fontSize） 
  案子 。  品牌 ： 
  自我 .titleLabel？.font = UIFont.brandIconFont（size：fontSize） 
  } 
  } 

  func drawBackground（） 
  { 
  如果 （buttonShape == .Circle） 
  { 
  var minSize = bounds.size.width; 
  如果 bounds.size.height <minSize 
  { 
  minSize = bounds.size.height 
  } 
  self .layer.cornerRadius = 0.5 * minSize 
  } 
  否则 （（.RoundRectangle == buttonShape） 
  { 
  self .layer.cornerRadius = cornerRadius 
  } 
  自我 .clipsToBounds = true 
  } 

  func setBorder（） 
  { 
  自我 .layer.borderWidth = borderSize 
  自我 .layer.borderColor = 自我 .titleLabel？.textColor.cgColor 
  } 
  } 

将其添加到项目中之后，现在应该可以通过将UIButtons添加到任何视图，然后将该类更改为FontAwesomeIconButton来创建FontAwesomeIconButton控件。 这应该显示以下属性。

对于按钮的所有其他常规属性，例如文本颜色，背景颜色，阴影等，可以从UIButton设计功能中访问这些属性。 要指定所需的图标，只需在fontawesome.com页面上找到该图标，然后将其复制并粘贴到InterfaceBuilder的文本区域中即可。 在面板中看起来可能有些奇怪，但是如果正确安装了字体，它应该可以在应用程序中正确预览和呈现。

这有点偏离我们核心产品的发展路线，但它应该具有很短的投资回收期。 一个图标的设计简洁，与应用主题保持一致，通常需要30分钟到一个小时。 但是通过使用FontAwesome图标和代码来执行此操作，我们只需几分钟的工作就可以得到更加一致的结果。

因此，这就是我们如何通过FontAwesome图标添加一种不错的快速设置按钮的方法。 随意使用此处的代码自己构建此代码，或者看看linkalist，您可以在其中注册为Beta测试人员，以访问此代码以及大量其他强大功能，以简化应用程序开发。

link {a} list.io – Linkalist Beta计划
向我们提供有关您的体验 beta.linkalist.io的反馈，以尽早使用 linkalist