rom移植移植_将UICollectionView移植到SwiftUI

最新推荐文章于 2023-01-10 15:59:09 发布

weixin_26638123

最新推荐文章于 2023-01-10 15:59:09 发布

阅读量157

点赞数

原文链接：https://medium.com/swlh/porting-uicollectionview-to-swiftui-afd8fc036323

版权

rom移植移植

SwiftUI has spellbound an entire developer community since the introduction at WWDC 2019, and it is quite easy to understand why. It is fast, concise, and lets you build an entire working application with very few lines of code.

自WWDC 2019引入以来，SwiftUI吸引了整个开发人员社区，这很容易理解为什么。它快速，简洁，并且使您可以用很少的代码行来构建整个工作应用程序。

However, SwiftUI is still in its infancy and lacks many of the standard components we take for granted with more mature frameworks. Luckily, Apple’s engineers have developed ways to connect elements from UIKit straight into our SwiftUI applications. In this article, we look at how to leverage those mechanisms to create a SwiftUI wrapper for the good old UICollectionView.

但是，SwiftUI仍处于起步阶段，缺少许多我们认为更成熟的框架所需要的标准组件。幸运的是，Apple的工程师已经开发出将UIKit中的元素直接连接到我们的SwiftUI应用程序的方法。在本文中，我们将研究如何利用这些机制为旧的UICollectionView创建一个SwiftUI包装器。

A playground with code examples is available on Github.

Github 上 提供了 带有代码示例的游乐场 。

Image for post — Photo by Emile Perron on Unsplash

我们需要什么？ (What Do We Need?)

Before we can connect a UIKit component to SwiftUI, we need to understand the contact surface between the two. The ways that the two frameworks are allowed to communicate with each other will significantly impact the way we write our code. Let’s start by looking at the protocol that enables us to create a wrapper in the first place.

在将UIKit组件连接到SwiftUI之前，我们需要了解两者之间的接触面。允许两个框架相互通信的方式将极大地影响我们编写代码的方式。让我们从首先使我们能够创建包装器的协议开始。

UIViewRepresentable (UIViewRepresentable)

The UIViewRepresentable protocol gives SwiftUI the possibility to create, manage, and dispose of UIKit components by declaring four useful methods.

通过声明四个有用的方法，UIViewRepresentable协议使SwiftUI可以创建，管理和处置UIKit组件。

makeUIView(context:)
makeUIView(context:)

This method creates and configures a new instance of the UIView you want to display in your application. We will use this to create a UICollectionView and set it up according to what we want it to do. The context parameter is a
此方法创建并配置要在应用程序中显示的UIView的新实例。我们将使用它来创建UICollectionView并根据我们想要的方式对其进行设置。上下文参数是一个

UIViewRepresentableContext struct, which contains information about the current state of the system. We can use this to, for example, style our view based on whether Dark Mode is activated or not.
UIViewRepresentableContext结构，其中包含有关系统当前状态的信息。例如，我们可以使用它来根据是否激活暗模式来设置视图样式。
makeCoordinator()
makeCoordinator()

This method allows us to create a coordinator object which helps manage the interactions between the UIKit component, and the rest of the application. In our case, we will use it to implement delegate and data source methods for the collection view.
此方法使我们可以创建一个协调器对象，该对象有助于管理UIKit组件与应用程序其余部分之间的交互。在我们的例子中，我们将使用它为集合视图实现委托和数据源方法。
updateUIView(_:content:)
updateUIView(_:content:)

As the name might suggest, we implement this method to make adjustments to our view when the application state changes in a way that affects our component. In the case of our collection view, we use it to reload our cells when the displayed data changes.
顾名思义，当应用程序状态以影响我们组件的方式更改时，我们实现此方法来调整视图。就我们的集合视图而言，当显示的数据更改时，我们使用它来重新加载单元格。
dismantleUIView(_:coordinator:)
dismantleUIView(_:coordinator:)

Use this method to clean up your view before deallocation. It is an excellent place to get rid of references or tidy up anything that might cause unintended behavior if left unhandled.
使用此方法可以在释放之前清理视图。在这里，最好不要使用任何参考文献或整理任何可能导致意外行为的内容。

让我们开始编写代码！ (Let’s Get To The Code!)

Let’s start by defining a protocol to make our collection view cells more generic and easy to handle.

让我们先定义一个协议，使我们的集合视图单元格更加通用并易于处理。

This file declares a small protocol for making an object configurable. In a moment, we will use this to make our collection view generic over any data type, as it delegates the display of data to the cell. We also provide a helper property to keep track of identifiers for collection view cells.

该文件声明了一个用于使对象可配置的小型协议。稍后，我们将使用它使我们的集合视图对任何数据类型通用，因为它将数据显示委托给单元格。我们还提供了一个helper属性来跟踪集合视图单元格的标识符。

Next up, let’s create the cell!

接下来，让我们创建单元！

This implementation of a collection view cell is pretty straight forward. It performs some visual set up on instantiation and clears out the text label before it’s recycled. It also conforms to the Configurable protocol we specified, which requires it to implement the configure(using:) method. In this example, we make the cell generic over any type that implements the CustomStringConvertible protocol from the Standard Library, but you can use a concrete implementation as well.

收集视图单元的这种实现非常简单。它在实例化上进行了一些可视化设置，并在回收文本标签之前清除了文本标签。它也符合我们指定的可Configurable协议，该协议要求它实现configure(using:)方法。在此示例中，我们使单元格对实现了标准库中CustomStringConvertible协议的任何类型通用，但是您也可以使用具体的实现。

Now that we have the cells figured out, it’s time to create a UICollectionView subclass!

现在我们已经确定了单元格，是时候创建UICollectionView子类了！

As you can see, there’s not a lot going on in this class. We set the background color to a transparent color so that the backgrounds we set in our SwiftUI code will shine through. We also register the type of cell we want to use, a generic UICollectionViewCell that is required to conform to the Configurable protocol we created earlier.

如您所见，该课程没有太多内容。我们将背景色设置为透明色，以便我们在SwiftUI代码中设置的背景会发光。我们还注册了我们要使用的单元格类型，这是一个通用的UICollectionViewCell ，它必须符合我们之前创建的可Configurable协议。

创建SwiftUI组件 (Creating The SwiftUI Components)

Now that we have the UIKit parts in place, we need to write their SwiftUI connectors. First, let’s write a coordinator that can manage the collection view.

现在我们已经有了UIKit部件，我们需要编写它们的SwiftUI连接器。首先，让我们编写一个可以管理集合视图的协调器。

The coordinator's job is to manage interactions between the application and the UIKit component. We are going to use the coordinator as a delegate and data source. Since the delegate gets called every time a cell is selected or deselected, the coordinator will be able to make any necessary adjustments to the application state.

协调器的工作是管理应用程序和UIKit组件之间的交互。我们将使用协调器作为委托和数据源。由于每次选择或取消选择单元时都会调用委托，因此协调器将能够对应用程序状态进行任何必要的调整。

Last but not least, we create the SwiftUI collection view wrapper.

最后但并非最不重要的一点是，我们创建了SwiftUI集合视图包装器。

Here are some of the methods from the UIViewRepresentable protocol that we touched on at the beginning of the article. We use them to create the UIKit collection view, to reload it’s contents when the data changes, and to create a coordinator that aids with interactions between SwiftUI and UIKit.

这是我们在本文开头提到的UIViewRepresentable协议中的一些方法。我们使用它们来创建UIKit集合视图，在数据更改时重新加载其内容，并创建一个协调器，以帮助SwiftUI和UIKit之间的交互。

Putting it all together, we can create a collection view using very SwiftUI-like syntax:

放在一起，我们可以使用非常类似于SwiftUI的语法创建一个集合视图：

Running the playground, we get an application looking a little something like in the video below.

在操场上，我们得到一个应用程序，看起来像下面的视频。