在iOS 10中将领域和图表与Swift 3结合使用

当我阅读有关如何一起使用Realm和Charts的一些教程时，我面临的挑战很少。 主要是因为我发现的所有教程都是针对Swift 2和旧版本的Realm和/或Charts的。

因此，我决定在GitHub上创建一个简单的示例项目，并写下所采取的步骤。 这是为了让我更好地记住，并希望能帮助其他遇到相同问题的人。

关于本教程

本教程从创建新项目开始，并假定读者已经对Xcode和Swift有所了解。

在此示例中，我们制作了一个简单的应用程序，您可以在其中计算访问者，并通过按按钮将当前计数和日期添加到数据库中。 然后它将立即显示在图表中。

本教程中使用的软件

这是我在本教程中使用的已使用软件的列表。 如果您的计算机上尚未安装CocoaPods，请从下面查看安装指南，因为需要遵循该指南。

• Xcode 8.0（8A218a）
• CocoaPods（1.0.1）（ 安装指南 ）
• RealmSwift（2.0.2）
• 图表（3.0.1）
• 您最喜欢的用于编辑Podfile的文本编辑器（我使用Sublime Text）

建立新专案

启动您的Xcode并创建新的Xcode项目。

然后选择Single View Application，然后单击Next 。

现在，我们为项目设置选项。 您可以使用任何想要用作产品名称 ， 组织名称和组织标识符的 名称 。 根据需要填充数据后，单击“ 下一步” 。

接下来，您将选择要存储在设备上的项目的位置。 在此示例中，我选择了桌面。 如果您想为项目创建Git存储库，请选中Source Control 。

此后，将创建您的项目，并向您显示类似的Xcode。

现在关闭Xcode。

使用CocoaPods

接下来，我们将为项目设置CocoaPods。 为此，您必须打开终端并转到创建项目的文件夹。 因为我们确实将本教程中的项目保存到了桌面，所以我们将这样写到终端：

  cd桌面/ RealmAndCharts示例/ RealmAndCharts示例/ 

现在您位于正确的文件夹中，我们准备设置CocoaPods。 因此，将以下命令写入Terminal。

  荚初始化 

CocoaPods将生成一个名为Podfile的文件。 在您喜欢的文本编辑器中将其打开。 它的内容如下所示。

您需要将以下Pod Charts添加到文件中。

  pod'Charts'，'〜> 3.0.1' 

之后，您要将RealmSwift添加到您的Podfile中。 因此，添加以下内容：

  pod'RealmSwift'，'〜> 2.0.2' 

首先是名称，然后是版本。 建议在添加时尽可能指定类似的Pod版本，因此以后添加新Pod时，由于您不知道它不会自动更新为最新。 有时这可能使您无法将头发拔出头，因为您不确定为什么会发生。

并且您还应该在podfile的末尾添加以下内容。 它来自Realm的安装指南。

  post_install做|安装程序| 
  installer.pods_project.targets.each做| target | 
  target.build_configurations.each | config | 
  config.build_settings ['SWIFT_VERSION'] ='3.0' 
  结束 
  结束 
  结束 

如果代码需要，它将把Swift版本更新为3.0。 然后，Xcode不应在下次启动时将语法转换为Swift 3。

您的podfile现在应如下所示：

然后保存Podfile并转到Terminal并编写：

  吊舱安装 

它将下载pod，进行安装并进行其他所需的更改。 但是，如果您的广告连播不是最新的，则可能会遇到如下错误：

然后按照错误提示进行操作，编写：

  吊舱回购更新 

然后它将更新到CocoaPods的存储库，可能需要一段时间。 完成后，再次尝试安装Pod 。 现在，它应该可以轻松下载Pod。

就像在终端机中所说的那样，CocoaPods创建了一个新文件RealmAndCharts-example.xcworkspace 。 从现在开始，您现在应该使用该文件打开项目。

在Xcode中打开工作区

摆脱警告

在Xcode中打开工作区后，您会注意到它具有警告。 单击它在右上角，在图片中标有红色箭头。

然后，您将显示类似下面的对话框，单击“ 执行更改”按钮。

如果您在项目中有未提交的更改，那么它会显示以下对话框，点击Continue 。

在此之后仍可能显示相同类型的警告图标，因此再次单击它，现在第一个对话框将与第一个对话框有所不同。 与第一个警告一样进行操作，然后您的工作区上将不再有与此相同的警告。

然后打开Main.storyboard 。

向布局添加组件

您需要一种将数据添加到Realm数据库的方法，所以让我们首先添加要存储值的文本字段和一个将项目保存到数据库的按钮 。 您可以根据需要添加它们，这是最合适的。

选择文本字段，然后从“ 属性”检查器中将“ 键盘类型”更改为数字键盘 。 这样，用户只能在我们的字段中输入数字，这比我们的目的更适合我们。

您还应该将“ 视图”添加到情节提要中。 这将用于显示带有示例数据的图表。

选择了View组件后，转到Identity Inspector页面并将Class更改为BarChartView 。

这就是我将其放置到布局中的方式：

创建网点

现在，您需要为文本字段和视图创建出口。 首先通过在Xcode的右上角按助手编辑器的按钮来显示它：

然后按控制按钮并从文本字段拖动到代码。 释放鼠标按钮时，将显示对话框。 将其命名为tfValue并点击Connect 。

然后，为代码的“ 视图”做出口。 将其命名为barView。 由于我们尚未导入“ 图表”窗格，因此该插座将显示错误。

在UIKit的下面添加import子句，因此您的导入如下所示：

 导入UIKit 
  导入图表 

然后按Command + B来构建工作区以消除错误。

记得连接按钮

您需要使按钮起作用，因此请为其创建操作。 这几乎就像做出口一样，但是从下拉列表中选择“操作 ”。

然后，我们将使其为您做一些工作。

将RealmSwift纳入方程式

您将需要一个要保存到Realm数据库的类。 在此示例中，我们为此目的创建了一个VisitorCount类。

因此，制作一个新的Swift文件并编写如下代码：

它的超类是Realm的Object ，然后Realm知道如何将其存储在数据库中。 在此示例中，我们仅为其添加两个字段； 记录时间的日期和访问者计数值的字段。

  动态var日期：Date = Date（） 
  动态无功计数：Int = Int（0） 

然后，您应该以某种方式告诉该对象将其保存到数据库。 也可以通过许多其他方式来完成此操作，但是在本示例中，我们将以这种方式进行。

  func save（）{ 
  做{ 
  让realm =试试Realm（） 
  尝试realm.write { 
  realm.add（） 
  } 
  }捕获让错误为NSError { 
  fatalError（error.localizedDescription） 
  } 
  } 

单击“ 添加”按钮将访问者计数添加到数据库时，稍后将使用此方法。 它将打开与Realm的连接并将该对象写入其中。 如果出现任何错误，我们将其捕获。

现在，当您准备好VisitorCount类时，让我们在点击按钮时使用它。

按钮动作

打开ViewController.swift ，然后转到为按钮创建的函数。 编写一些代码，因此它将如下所示：

  @IBAction func btnAddTapped（_ sender：AnyObject）{ 
  如果let value = tfValue.text，则值！=“” { 
  让visitorCount = VisitorCount（） 
  visitorCount.count =（NumberFormatter（）。number（from：value）?. intValue）！ 
  visitorCount.save（） 
  tfValue.text =“” 
  } 
  } 

我们正在检查textfield值是否为空。 如果不为空，我们将创建新的VisitorCount对象，并将当前作为字符串的值解析为整数值。 然后，将其保存到Realm数据库，并清除文本字段以准备下一个值。

在图表上显示数据

现在，我们可以将访问者计数添加到数据库中，但是我们尚无法显示它们。 这将是我们的下一步。

首先，通过在现有导入下添加RealmSwift来添加导入。 我们很快就需要它，现在添加所需的导入时，我们不会出现丢失导入的错误。 当然，您可以先编写代码，但是Xcode在编写代码时将无法为您提供帮助，因为它不知道如何操作。

  导入RealmSwift 

在您的viewDidLoad -function中，调用要执行的新函数。

 覆盖func viewDidLoad（{ 
  super.viewDidLoad（） 
  updateChartWithData（） 
  } 

然后，我们将创建我们正在调用的函数。 它用于更新图表上显示的数据。

  func updateChartWithData（）{ 
  var dataEntries：[BarChartDataEntry] = [] 
  让visitorCounts = getVisitorCountsFromDatabase（） 
  对于i in 0 .. <visitorCounts.count { 
  让dataEntry = BarChartDataEntry（x：Double（i），y：Double（visitorCounts [i] .count）） 
  dataEntries.append（dataEntry） 
  } 
  让chartDataSet = BarChartDataSet（值：dataEntries，标签：“访问者计数”） 
  让chartData = BarChartData（dataSet：chartDataSet） 
  barView.data = chartData 
  } 

这是另一种只获取数据库记录的方法，它在updateChartWithData -function中使用。

  func getVisitorCountsFromDatabase（）->结果 { 
  做{ 
  让realm =试试Realm（） 
  返回realm.objects（VisitorCount.self） 
  }捕获让错误为NSError { 
  fatalError（error.localizedDescription） 
  } 
  } 

我们还想在添加新的访问者计数后立即更新图表，因此我们也从btnAddTapped -function调用update函数：

  @IBAction func btnAddTapped（_ sender：AnyObject）{ 
 如果let value = tfValue.text，则值！=“” { 
 让visitorCount = VisitorCount（） 
  visitorCount.count =（NumberFormatter（）。number（from：value）?. intValue）！ 
  visitorCount.save（） 
  tfValue.text =“” 
  } 
  updateChartWithData（） 
  } 

首次尝试该应用

现在，当我们应该准备好所有功能时，让我们在模拟器中启动应用程序并进行测试。 点击Command + R在选定的模拟器上运行它。 然后，您将看到如下所示的应用程序。 如您所见，默认情况下，右下角有文字描述标签 ，我们对此不感兴趣。

现在，将访问者计数添加到文本字段，然后点击添加 。 我用数字125进行测试。 然后看起来像这样。

恭喜您在图表中显示了第一个数据！ 现在，如果需要，请尝试添加更多数据，以便您可以查看图表如何进行自我调整。 这是我添加的随机访问者计数：

但请稍等！ X轴到底是什么？ 它们只是双精度值，而不是我们想要的日期！ 那是因为我们没有使用添加到VisitorCount对象的日期！ 我们喜欢采用以下格式，例如：“ HH：mm.ss” = 18：34.20。 因此，让我们实现它。

在X轴上设置日期

首先，我们需要在默认情况下呈现给委托的地方告诉不同的实现。

在您为文本字段和值所做的操作下，我们添加了此委托变量。

 类ViewController：UIViewController { 
  @IBOutlet弱var tfValue：UITextField！ 
  @IBOutlet弱var barView：BarChartView！ 

  弱var axisFormatDelegate：IAxisValueFormatter吗？ 

然后，在您的viewDidLoad上，我们需要告诉委派实现是在该类ViewController.swift中 。

 覆盖func viewDidLoad（）{ 
  super.viewDidLoad（） 
  axisFormatDelegate =自我 

  updateChartWithData（） 
  } 

而且，我们需要更改当前设置X轴值的方式。 因此，转到updateChartWithData（）函数，并对其进行少量更改。

因为Charts似乎希望X轴值为Double ，所以我们需要使日期与之兼容。 我们通过从日期开始设置TimeInterval并将其设置为X值来实现。

然后，我们还将自定义格式器设置为X轴，稍后我们将实现它。 这将告诉图表如何在X轴上显示数据。

修改后应该如下所示：

  func updateChartWithData（）{ 
  var dataEntries：[BarChartDataEntry] = [] 

 让visitorCounts = getVisitorCountsFromDatabase（） 

 对于i in 0 .. <visitorCounts.count { 
  让timeIntervalForDate：TimeInterval = visitorCounts [i] .date.timeIntervalSince1970 
  让dataEntry = BarChartDataEntry（x：Double（timeIntervalForDate），y：Double（visitorCounts [i] .count）） 
  dataEntries.append（dataEntry） 
  } 
 让chartDataSet = BarChartDataSet（值：dataEntries，标签：“访问者计数”） 
 让chartData = BarChartData（dataSet：chartDataSet） 
  barView.data = chartData 

  让xaxis = barView.xAxis 
  xaxis.valueFormatter = axisFormatDelegate 
  } 

然后转到整个文件的结尾并在花括号之外，对ViewController进行了扩展，在其中对IAxisValueFormatter进行了实现。 它将用于在X轴上显示日期。

在这里，与日期相比，我们做的与以往相反。 现在我们将其从Double格式转换回日期。 然后，使用DateFormatter时更容易将其格式化为字符串。

  //标记：axisFormatDelegate 
  扩展ViewController：IAxisValueFormatter { 

  func stringForValue（_ value：Double，axis：AxisBase？）->字符串{ 
  让dateFormatter = DateFormatter（） 
  dateFormatter.dateFormat =“ HH：mm.ss” 
  返回dateFormatter.string（from：Date（timeIntervalSince1970：value）） 
  } 

  } 

编写所需的代码后，该再次运行该应用程序了。

现在，我们的应用在X轴上具有日期。 至此我们就完成了。

最后的话和下一步做什么

现在，您应该对如何在项目中使用Charts和RealmSwift有了更多的了解。 您可以在自己的页面上详细了解这些内容，并扩展示例应用程序的功能。

这里有一些想法可以扩展/更改

• 增加删除数据的能力
• 更改X轴上日期的格式
• 更改图表中的颜色
• 更改为其他类型的图表（也许是LineChart？）
• 将描述标签更改为自己喜欢的

资料来源

这是本教程中编写的源代码的链接

• https://github.com/skipadu/RealmAndCharts-example

这是我用来收集信息的资源。

• CocoaPods指南
• 如何使用iOS Charts API在Swift中创建漂亮的图表-Joyce Echessa

谢谢阅读！

2016年10月20日更新 ：修正Podfile上的引号。 从文件复制粘贴时，Medium似乎已自动更改了它们。

2017年1月7日更新：更新了Chart的pod文件配置。 不再需要像以前那样告诉某些分支。