将Sympli与Xcode集成-CSDN博客

介绍

Sympli是一项服务，可简化将专业设计的用户界面转换为与应用程序兼容的实际格式（例如，iOS的Storyboard或Android的XML）。它可以从Sketch和Photoshop中的设计切换到Android，iOS或Web的实现。如果您尚未使用Sympli，并且想了解更多有关它如何促进向开发人员进行设计移交的信息，请在此处阅读我们在Envato Tuts +上的文章，该文章从设计师的角度介绍了Sympli 。我们还将在不久的将来发布关于Sympli的另一篇文章，其中涵盖了开发人员如何使用Sympli在Android Studio和Xcode上更快实现的更广泛的方面。

在本文中，我将向您展示作为开发人员如何使用Sympli创建的界面设计并将其轻松导入到iOS应用程序的Xcode中。

1.设置项目和设计

免费使用Sympli时，您可以有一个项目，其中可以包含许多设计。如果您想继续学习，本教程的完整项目文件包含在GitHub上的PSD（Photoshop文档）中，我们将使用它作为设计。否则，如果您没有Photoshop并且与设计师合作，请他们将PSD或Sketch设计导入到Sympli iOS项目中与您共享，并加入教程的Xcode部分。

要创建一个项目，请访问Sympli的网站并登录（如果尚未注册，请注册并验证一个新帐户）。登录后，您应该进入“ 项目”屏幕，中间显示以下消息：

单击创建新项目，然后将新项目的详细信息设置为以下内容：

您可以根据需要调用新项目，但是由于提供了PSD，因此必须确保将Platform设置为iOS并将Resolution设置为@ 2x 。

首先，要将PSD添加到您的Sympli项目中，请下载并安装Sympli Photoshop插件。插件安装完成后，打开下载的PSD文件，然后单击Photoshop右侧工具栏中的Sympli按钮：

如果找不到此按钮，则也可以通过在菜单栏中导航到“ 窗口”>“扩展”>“ Sympli”来打开该插件。最初，您将需要登录Sympli，然后，出现以下屏幕：

打开Interface.psd文件（如Sympli插件窗口顶部所示），您需要做的就是单击“ 同步”按钮以将您的界面上传到您的项目。

现在，我们的项目和设计都已设置好，我们准备开始使用Xcode。

2.使用Xcode设置Sympli

首先，您需要下载Xcode的Sympli插件。下载完成后，打开.dmg文件并运行安装程序。

现在您可以正常运行Xcode。首次在安装Sympli后打开Xcode时，将看到以下警报：

确保按Load Bundle启用Xcode中的Sympli功能。

经过非常简单的设置后，您现在就可以开始使用Sympli了！

3.在情节提要板中使用Sympli

Sympli可以立即用于任何现有项目，但对于本教程，我将从iOS>应用程序> Single View Application模板重新开始。如果您遵循此步骤，则可以从此模板创建自己的项目。

首先，您将在Xcode窗口的右上角看到一个新按钮：

单击此按钮，将出现以下提示，让您登录您的Sympli帐户：

成功登录后，您应该在Xcode窗口的Sympli窗格中看到所有项目：

单击要从中加载界面的任何项目，然后在以下屏幕上再次单击要使用的设计：

在我们开始使用Sympli创建界面之前，请打开项目的Main.storyboard文件，删除现有的视图控制器，然后将其拖入Object库中的导航控制器中。为了使您的界面更易于使用，请将大小类更改为Compact Width和Regular Height 。现在，您的情节提要板应如下所示：

在开始拖动界面项目之前，请单击“ Sympli”窗格右上角的按钮，然后选择“ 导入资产”选项：

然后，将显示以下提示：

此提示使您可以选择要导入到项目中的资产。默认情况下，Sympli会将所有所需大小的所有资产导入项目的主Assets.xcassests目录。

现在是时候开始创建我们的界面了！需要注意的重要一件事是，尽管您的PSD看上去与iOS界面相同，但是Sympli只能创建基本的界面元素，例如UIView ， UIImageView和UIButton 。对于特定于平台的和系统生成的视图，例如UINavigationBar和UITableView ，您仍然必须在情节提要中手动创建和配置这些视图。

首先，我们将配置表格视图。在情节提要中单击表格视图，然后在“ 大小”检查器中，将“ 行高”设置为90 ：

通过单击“ Sympli”窗格中的任何一个界面项，您可以看到设计指定的尺寸。在这种情况下，如果单击任何一个表格视图项，您将看到90 pt的行高：

由于我们将只创建一个单元然后再使用，因此我们需要使用所有必需的接口元素来创建初始单元。为此，我们将从上一个Screenshots table视图项目中复制接口项目。

您可以将Sympli设计中的视图直接拖放到情节提要中。默认情况下，当放置在情节提要中时，Sympli会将您的项目放置在与原始PSD相同的位置。对于大多数界面来说，这很好用，但是对于表格单元格来说，这可能会很麻烦，因为它们通常位于您正在编辑的单元格的边界之外。

因此，使用Sympli界面将设计的特定部分应用于视图会更容易。这可以通过在“ Sympli”窗格中选择一个项目，然后在视图的许多属性（例如背景色，大小和边框）上单击“ 应用”按钮来完成。当您单击Apply时 ，属性将立即分配给您当前选择的视图。通过将视图拖动到表格视图单元中，在Sympli中选择红色预览方块，然后应用大小，背景色和布局属性，可以尝试以下方法：