构建旅行照片共享iOS应用

你好！ 我想向您展示如何构建相对简单的照片共享应用程序：将您的图像放置在当前位置的地图背景上。 您还可以添加一条短消息和您的姓名，以得到如下所示的图像（这样，您就可以将自己在很棒的假期中所拜访的东西吹嘘给朋友）：

要遵循本教程，您需要一台装有xCode的Apple计算机和一个Apple开发者帐户。

创建项目

打开xCode并创建一个名为PicTravel的新项目。 选择“ 单一视图应用程序”模板：

给项目起一个名字，我们选择了PicTravel但是您可以选择其他喜欢的名字。 还要填写项目的组织名称和组织标识符：

最后一步是将新创建的项目保存在Developer文件夹中。

建立介面

在左侧面板中，打开Main.storyboard 。 这是我们构建应用程序界面的地方。

从右侧面板的底部拖动ImageView并将其放置在场景的中心。 调整其大小，使其覆盖所有内容（将其捕捉为出现的蓝线）。

如下图所示，使用约束对话框将ImageView固定到场景边距：

我们将使用它为应用程序的主屏幕放置背景图像。 从此处下载背景图像，然后从左侧面板中打开Assets.xcassets项，单击底部的“ +”按钮，然后添加一个名为Background的新图像集。

将下载的图像拖到“ 1x”占位符上，以得到这样的结果（在本教程中，我们将不使用“ 2x”和“ 3x”占位符，但是如果需要，可以为其添加更大分辨率的图像）。

现在，回到Main.storyboard ，选择ImageView ，然后从Attributes Inspector中选择Background图像，然后将Content Mode设置为Aspect Fill 。

现在是时候将新图像添加到我们的资产中，用于将要添加的“拍照”按钮了。 从此处下载图像，在Assets.xcassets中创建一个名为Button的新图像集，然后将图像拖动到1x占位符中，就像我们之前在背景中所做的那样。

接下来，在Main.storybord ，将一个按钮拖动到场景的中心。 将“ 类型”设置为“ Custom ，清除“ 标题” ，并将“ 背景”设置为我们刚刚创建的“ Button图像。 从“ 大小”检查器中 ，将的按钮设置为，并将高度设置为115 。

为按钮的with和height添加两个新约束（每个115），然后从Alignment Constriants中将按钮在容器中水平和垂直对齐。

现在，我们为用户的名称和消息添加两个文本字段。 如下图所示，将它们放置在下面的约束中。 不要忘记蓝色的指南，这些指南使您更容易放置。 要在两个元素之间创建约束，可以按住Ctrl键并拖动到另一个，然后从出现的弹出窗口中选择所需的约束类型。

对于消息文本字段：

• 名称文本字段的顶部空格 ： 15
• 按钮的底部空间 ： 15
• 宽度 <= 500
• 将Center X对齐到超级视图
• 尾随空间到超级视图： 优先级为900 0 –这非常重要，因为它将使文本字段固定在iPhone上的空白处，但是在较大的设备上，宽度限制会更强，因此不会增长到大于500。
• 领导观看的空间 ： 优先级为900 0

对于名称字段：

• 消息文本字段的底部空间 ： 15
• 宽度 <= 500
• 将Center X对齐到超级视图
• 尾随空间到超级视野： 0 ， 优先级为900
• 领导观看的空间 ： 优先级为900 0

将每个文本字段的占位符设置为“ 输入您的姓名 ”和“ 添加短消息 ”，以便用户知道该怎么做。 将两个字体都设置为Noteworthy Light ，大小均为17 。

另外，对于名称字段，将大小写设置为Words ， Correction和SpellChecking ， 至No 。 对于消息字段，将大写 Sentences设置为Sentences 。

结果如下：

这是在iPad上的外观（您可以使用场景下的底部栏选择要在哪个设备上预览界面）：

还有两个要添加的小元素，我们的主屏幕将完成。

在底部添加带有以下文本的标签：“ 与您的朋友和家人立即分享您的旅行经历！ ”。 将其“ 字体”设置为“ Noteworthly Light 17 ，将“ 对齐方式”设置为center ，将“ 颜色”设置为#5E7A96 ，将“ 线”设置为0 。 使用以下约束：

• 尾随空间到超级视图的边距： 0
• 超视距的领先空间 ： 0
• 底部空间到底部布局： 20
• 高度 ： 64

最后，在顶部添加一个新视图，该视图的白色背景的不透明度为60％。 使用的约束是：

• 尾随空间到超级视野： 0
• 领先的观看空间 ： 0
• 底部到顶部的布局： 20
• 高度 ： 20

这是最终的设计：

我们将使用此屏幕获取用户的名称和消息，并打开相机或照片库拍摄照片。 但是，在我们将用户需要的全部内容汇总后，我们需要一个新的屏幕来显示最终图像并让他共享。 因此，让我们向应用程序添加一个新屏幕。

从对象库中，将一个新的View Controller拖到第一个附近：

将此新View Controller的视图背景设置为#ACE0F6 。

接下来，添加两个按钮，如下图所示。 类型是custom ，背景颜色是#EE4205 ，字体#EE4205 Noteworthy Light 17 。 高40 ，宽70和110 。 它们固定在容器的左侧或右侧的底部布局+ 20上，并且在with和height上也有约束。

在顶部，添加标签以向用户显示应用程序的当前状态。 使用高度为40约束将其固定到顶部，左侧和右侧边缘。 将字体设置为#EE4205 Noteworthy Light 19并将颜色设置为#EE4205 。 初始文本为“正在生成图像… ”居中对齐。

要显示生成的图像，我们需要一个“图像视图”。 将其拖动到第二个屏幕的中心，并为其创建以下约束：

• “ 生成图像… ”标签的顶部空间 ： 8
• 底部空间 “ 分享图片！ ”按钮： 8
• 前导空间到超级视图边距： 0
• 尾随空间到超级观看边缘： 0

还将其内容模式设置为Aspect Fit

难题的最后一部分是“ 活动指示器视图” ，我们将使用该视图以视觉方式通知用户幕后发生了某些事情（最终图像生成），他必须等待几秒钟。

将其从“对象库”中拖放到屏幕中间。 添加约束以使其在容器中水平和垂直居中，并将其“ 行为”设置为“ Animating和“ Hides When Stopped 。

就是这样，我们的应用程序界面已完成。 在模拟器中运行该应用以查看其外观。

现在是时候编写一些代码了。

拍照

在main.storyboard仍然打开的情况下，从第一个屏幕中选择按钮，然后打开Assistant编辑器，并确保在右侧打开了ViewController.swit文件。 如果助理编辑器在解决此问题时遇到麻烦，请使用手动模式。

现在，按住Ctrl键并从按钮中拖动到代码以创建一个新动作（请确保选择Action作为Connection，将Name设置为selectPhotoClicked并将Type设置为UIButton ）：

再单击一次“ 下一步”，并确保选中“ PicTravel 组”并选中“ PicTravel 目标” 。 然后创建文件。

返回Main.storyboard并选择第二个视图控制器，并将其类设置为我们刚刚创建的新ShareViewController （可以从Identity检验器的Class下拉列表中进行操作）。

现在，在仍然选择视图控制器的情况下，打开助手编辑器并确保将其设置为自动打开关联的文件。 这应该是ShareViewController类。 按住Ctrl键并从“图像视图”，“活动指示器”和“标签”中拖动到类中，以为它们创建出口：

还要为用户的图像，名称和消息添加一些新变量：

现在打开我们的ViewController类。 添加一个新的方法，以供用户选择图像时调用（这是UIImagePickerControllerDelegate一部分）：

这应该可以解决我们关闭第二个屏幕的问题。

现在让我们了解应用程序的主要目标：获取用户的位置，生成地图图像，然后将用户选择的照片以及名称，位置和消息放在其顶部。

若要继续，请向ShareViewController类中添加一些常量，这些常量将在下面的代码中使用：

分享最终形象

好的，现在让我们看看如何共享结果图像。 为此，我们将使用UIActivityViewController。

为共享图像添加新的shareImage操作！ 使用Ctrl +拖动到ShareViewController就像我们之前对照片按钮所做的那样：

要更改当前为白色的启动屏幕， LaunchScreen.storyboard从左侧面板打开LaunchScreen.storyboard并将图像视图拖到该屏幕上。 添加约束，使其覆盖整个屏幕，选择“ Background 图像”，然后将“ 内容模式”设置为“ Aspect Fill （看起来与我们主应用程序的屏幕背景完全一样）。

而已！ 现在，您可以运行该应用程序，甚至可以将其安装在您的设备上以将其随意取出。

该应用程序的代码可在github上找到：https://github.com/intelligentbee/PicTravel

您也可以从App Store下载最终的应用程序：https://itunes.apple.com/us/app/pictravel/id1263495901?mt=8

---

最初发布于 smartbee.com 。