使用Firebase和INSPhotoGallery在Swift中创建图片库

我目前正在构建一个名为i-Travel Journal的旅行应用程序 ，我想添加的功能之一是允许用户从图库中上传和删除照片的功能。 我在互联网上搜索一篇博客文章，该文章不仅在后端使用了Firebase，而且还使用了很棒的INSPhotoGallery Pods Framework完成了工作，但令我沮丧的是，我找不到能显示所有复杂细节的文章。 因此，为了帮助我的编码员，我决定发布一篇文章，以帮助某人启动并运行他们的照相馆。

为了简短起见，如果您尚未将Firebase文档集成到Firebase文档中，我将提供其链接，以帮助您入门。

Firebase SDK iOS入门

Firebase Realtime数据库入门

1.首先初始化一个新的视图控制器并初始化UICollectionView的委托

import UIKit import Firebase import FirebaseDatabase import FirebaseFirestore class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UIImagePickerControllerDelegate{ var ref: DatabaseReference! @IBOutlet weak var collectionView: UICollectionView? var URLs = []() lazy var gallery: [INSPhotoViewable] = [] class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UIImagePickerControllerDelegate{ var ref: DatabaseReference! @IBOutlet weak var collectionView: UICollectionView? var URLs = []() lazy var gallery: [INSPhotoViewable] = [] class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UIImagePickerControllerDelegate{ var ref: DatabaseReference! @IBOutlet weak var collectionView: UICollectionView? var URLs = []() lazy var gallery: [INSPhotoViewable] = [] override func viewDidLoad() { collectionView!.delegate = self collectionView!.dataSource = self } }

当您首次初始化ViewController类时，您将获得一个空白的UIViewController类，我们想使用UICollectionView来显示画廊，因此我们在视图控制器中使用适当的委托方法UICollectionViewDelegate以及UICollectionViewDataSource来覆盖某些功能。 我们还将使用UIImagePicker从用户库中选择图像，因此我们使用UIImagePickerControllerDelegate。

我还初始化了一些变量，稍后我们将使用它们。

下面的方法是我们将用来实现图库的方法，以及一些我将要创建的辅助方法：

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return gallery.count + 1 //Add the additional 1 to use it as the placeholder for the gallery selector image } func numberOfSections(in collectionView: UICollectionView) -> Int { return 1 //We are only using one section of collections views for this example //If you want to add filters to your gallery you could increase the section count } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { } func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { } func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { return CGSize.init(width: 150, height: 150) //This is the default size, you can change it to fit your needs }

2.跳到Main.StoryBoard并使用我们的组件初始化我们的UIViewController

现在我们已经有了方法，现在我们将跳到Main.Storyboard并设置我们的组件。 首先，我们从空白情节提要上的组件列表中拖动ViewController。 在侧面菜单上，我们使用“自定义类”选项卡并选择我们刚刚创建的自定义视图控制器的名称，您可以随意命名，但要确保它在整个应用程序中保持一致。

接下来，我们在该ViewController上拖动一个UICollectionView，这将自动在其下创建一个UICollectionViewCell组件，该组件将用于显示CollectionView的每一行所需的内容。

对于UICollectionView中的一个单元格，我们希望UIImageView显示一个图像以及一个删除按钮以删除该图像。 因此，在出现的单元格中，我拖动一个UIImageView和一个按钮组件。 我利用自动布局约束来定位按钮，您可以将按钮放置在图像的任何角落，可以自行决定。 对于删除按钮的图标，我从这里获得了图标，并将其拖动到Assets.xcassets文件中。 我还使用了占位符缩略图作为用于图库图像的单元格，您可以通过点击UIImageView并在右侧的侧面菜单中选择它来使用您选择的任何图像，只需确保它位于Assets文件夹中即可。

3.创建一个自定义UICollectionViewCell

import UIKit class CustomUICollectionViewCell: UICollectionViewCell { @IBOutlet weak var image: UIImageView! @IBOutlet weak var delete: UIButton! }

现在我们已经有了一个希望UICollectionViewCell看起来像的结构，我们需要创建一个自定义类来模仿它的结构。 因此，我们要做的就是创建自己的。

现在，我们已经创建了该类，我们跳回到Main.Storyboard类，并开始将刚刚创建的自定义类连接到我们刚刚拖放的UICollectionViewCell组件，方法是转到右侧的侧面板并选择它。

接下来，我们开始连接刚刚在自定义类中创建的UIImage和Button。 我们还想给UICollectionViewCell一个唯一的名称，以便我们以后可以在代码中使用它，因此可以在下面的菜单中对其进行设置。

4.我们返回到助手方法和委托方法

现在，我们已经完成了在Storyboard上以及通过自定义类在代码中所需完成的所有连接工作，现在我们可以开始操作我们先前创建的方法了。

首先， 请看一下以下文档并安装INSPhotoGallery的Cocoa Pod。 这是我们在单击时实际用来显示画廊的方式。

辅助方法（整堆）

这三种辅助方法是应用中的肉🍖和土豆🥔。 Firebase是dope应用程序，它允许我们定义记录的结构，我们希望将这些记录保存起来以便于轻松，自由地操作和检索它。 为了避免每次添加新图像时都覆盖所有图像，我们必须尝试以一种可以轻松地检索它的方式构造它，如下所示：

-Gallery ID -> URL Gallery- 5C3E4F78-FC18-46C7-8545-26D229861465 : " https://firebasestorage.googleapis.com/v0/b/mytravelapp-e365b.appspot.com/o/gallery%2F6CE2EAA7-14B8-4820-9737-466FD95AA11E.jpg?alt=media&token=b621d365-aaee-4666-9817-d8dee0022afc " -Gallery ID -> URL Gallery- 5C3E4F78-FC18-46C7-8545-26D229861465 : " https://firebasestorage.googleapis.com/v0/b/mytravelapp-e365b.appspot.com/o/gallery%2F6CE2EAA7-14B8-4820-9737-466FD95AA11E.jpg?alt=media&token=b621d365-aaee-4666-9817-d8dee0022afc "

每个图像都在图库子项下，然后每个子项都有一个唯一的ID，该ID指向Firebase存储中的URL位置

提取图库

Fetch Gallery方法检查Firebase中是否有属于子属性Gallery的元素。 它循环并尝试并填充我们之前创建的Gallery Array，但是在完成操作之前，我们希望在调用imageToURL方法之前，防止Gallery显示重复的记录。 您可以参考Firebase文档以了解如何查询数据的语法。

因此，它将扫描包含库，以使用contains方法查看可访问性引用在库中是否有任何重复项。 尽管可访问性参考通常用作图像的描述性文本，但在本例中，我们使用它来唯一地跟踪Firebase中使用的ID。

imageToURL

如INSPhotoGallery文档中所见，他们使用INSPhoto对象来初始化其画廊。 要显示UICollectionCell的每个元素缩略图，我们必须点击Firebase提供的URL才能下载图像并将其显示在应用程序中。 因此，每次将元素添加到视图时，我们都会刷新CollectionView以便用最新的图像更新UI，这就是使用DispatchQueue.main.async以便在主线程上激活它的原因。

uploadImageToFirebase

该方法实际上是处理上传到Firebase的数据的方法。 目的是当用户从UIImagePicker中选择图像时，他们可以立即将数据上传到Firebase。 实时数据库中的数据在很大程度上取决于是否已将图像成功上传到Firebase Storage。 成功上传图像后，完成处理程序将返回带有实际图像链接的下载URL，该链接将附加到现有的图库数组中。 如果上传过程中有任何问题，则会使用以下代码触发警报，通知用户：

func displayAlert( title: String, message: String){ let alert = UIAlertController.init(title: title , message: message , preferredStyle: .alert) let dismiss = UIAlertAction.init(title: "dismiss", style: .default, handler: nil) alert.addAction(dismiss) present(alert, animated: true, completion: nil) }

CellForRowAt

在这种方法中，我们为看到的每个单元格设置视图。 IndexPath可以跟踪用于遍历我们拥有的单元格数组的索引号。 还记得我们之前创建的自定义单元名称吗？ 我们使用它来标识我们创建的单元格自定义组件的结构。

因此，对于第一个单元格行，我希望显示图库图像，允许用户与该单元格进行交互，并隐藏删除按钮。

对于所有其他单元格，我希望显示删除按钮。 我添加了一个称为handle click的方法，稍后将详细讨论该方法，该方法实际上可以处理单击记录的删除。

handleClick

此方法适用于每个附加了删除按钮的按钮。 为了防止用户轻松删除元素，我使用UIAlertController作为用户的安全防护。 如果“是”被选择使用sender.tag使用IndexPath.row在CellForItemAt方法应用，该要素是使用通过无障碍标识传递的唯一ID标识，它找到的纪录火力地堡，并将其设置为无。 从Firebase中删除元素后，将调用FetchGallery，该更新将更新UI以删除该元素。 Fetch Gallery使用观察处理程序，该处理程序一旦设置，就会侦听对记录所做的任何更新，例如删除，添加或更新现有记录。

DidSelectItemAt

didSelectItemAt处理当用户单击图像时发生的情况。 如果索引为0，则将显示图像选择器。 我将在下面详细讨论。 INSPhotoGallery的魔力尚未真正显现出来，但这就是现在的光芒。 因为我为Gallery Image创建了一个占位符，所以indexPath的值偏移为1，因此为了准确显示数组的实际大小，我将数组的总数减去1。

这实际上是INSPhotoGallery文档中的副本和粘贴。 简而言之，他们的代码在做的事情是遍历Gallery数组的索引并检查其中是否确实有图像。 如果存在图像，它将使用已设置的特殊View Controller以全尺寸显示图像。

ImagePickerController

这是一个完整的圆圈的最后一部分，要上传图片，您需要一张图片！ 为了获得该图像，我们使用UIImagePicker并允许用户有机会从那里选择的画廊中选择图像。

如果用户成功选择了一个图像，我们将同时做两件事，将图像添加到Gallery数组中，然后使用存储引用来调用上面定义的uploadImageToFirebase方法。 之后，我们重新加载集合视图，以便可以进行新的更改。

结论

今天，我们使用Firebase Realtime Database，Firebase Storage和流行的图库框架INSPhotoGallery创建了图库。 尽管这看起来很复杂，但是您可以了解Firebase如何快速集成到应用程序中，并看到一个简单的应用程序。

我还邀请您为我的应用程序I-Travel Journal试用beta。 如果您想提供帮助，请进行测试，并在以下链接中留下反馈。 感谢您阅读我的文章，查看我以前的文章以获取有用的信息。

From: https://hackernoon.com/creating-a-photo-gallery-in-swift-using-firebase-insphotogallery-2a39196bcf1