LinkPresentation框架详细解析（二） —— 一个

作者: 刀客传奇 | 来源:发表于2020-04-11 22:20 被阅读0次

版本记录

版本号	时间
V1.0	2020.04.11 星期六

前言

随着iOS 13.0的更新，新的SDK也加入了苹果的大家庭，其中一个就是LinkPresentation。下面我们在这个专题一起来学习下这个框架。感兴趣的可以看下面几篇文章。
1. LinkPresentation框架详细解析（一） —— 基本概览（一）

开始

首先看下写作内容

从网页的URL生成视觉丰富的链接。在本教程中，您将把打开的图形元数据转换为iOS应用程序的图像缩略图预览。

接着看下写作环境

Swift 5, iOS 13, Xcode 11

视觉丰富的链接描述美丽的图像，排版，甚至视频缩略图用于预览网页内容。这是对iOS 13之前唯一可用的blue text系统的重大升级。

在本教程中，您将使用LinkPresentation框架使链接看起来更好，更吸引人，对用户更友好。看看这个例子的视频缩略图预览:

一个网页所要做的就是添加一些特殊的HTML标签来指定标题、图标、图像或视频，瞧，你的链接就会激活!

想象一下，如果你的消息、博客或食谱应用程序能立即预览用户将要看到的内容，那该有多好。你点击右边的链接要比左边的快得多，即使它们链接到同一个网页。

通过添加LinkPresentation框架，您可以轻松快速地在应用程序中展示链接。

在本教程中，您将学习如何:

创建丰富的链接。
处理LinkPresentation错误。
存储元数据。
优化share sheet。
保存喜欢的链接。

在本教程中，您将使用一个名为Raylette的应用程序。每次您旋转转盘时，Raylette都会随机选择一个教程，并使用LinkPresentation框架将其呈现给您。

希望它能激励你去寻找一个你在其他情况下可能不会遇到的话题。

打开启动项目，构建并运行它。你会看到你已经有一个自旋的车轮按钮和两个标签：自旋和保存(Spin and Saved):

不过，在深入研究代码之前，有一些理论需要介绍。所以抓紧了!

Understanding Rich Links

富链接是您看到的链接预览，例如，当用户通过Messages应用程序发送消息时。

根据苹果公司从网页中提取的信息，链接预览有以下四种方式:

1. Understanding Rich Links: Web Page Metadata

web页面的元数据指示您将在预览中看到的内容。查看<head>部分中的标记。你可以在Chrome中通过右键点击网页并选择View Page Source来实现这一点。

下面是一个教程的例子:

<head>
<title>Flutter Hero Animations | raywenderlich.com</title>
<meta property="og:title" content="Flutter Hero Animations">
<meta property="og:type" content="video.other">
<meta property="og:image" content="https://files.betamax.raywenderlich.com/attachments/collections/222/0c45fb39-9f82-406f-9237-fc1a07a7af15.png">
<meta property="og:description" content="<p>Learn and understand how to use the Hero widget in Flutter to animate beautiful screen transitions for your apps.</p>
">
<meta property="og:site_name" content="raywenderlich.com">
<link rel="icon" type="image/png" href="/favicon.png">
...
</head>

支持丰富链接的元数据由Open Graph标记和其他HTML标记组成。LinkPresentation框架提取所有这些标记并使用最合适的标记。

2. Understanding Rich Links: Open Graph Protocol

开放图协议(Open Graph protocol)是一个标准的网页元标签的视觉丰富的链接在应用程序，如Facebook, Twitter或Messages:

遵守协议非常简单。您只需要在web页面<head>的中添加一些特殊的<meta>标记，您就可以立即启动并运行了。

开放图协议(Open Graph protocol)要求的<meta>标签有:

og:title：对象标题
og:type：对象类型，例如音乐、视频、文章等等
og:image：对象的图像URL
og:url：对象的标准url

您可以通过og:前缀轻松识别Open Graph <meta>标记。

每个web页面都有以下标记：og:title、og:type、og:image、og:description和og:site_name。

注：og:site_name指定一个特定的网页是一个更大的网站的一部分。在我们的例子中，它告诉我们 Flutter Hero Animations是更大的 raywenderlich.com网站的一部分。

查看Open Graph协议的完整规范，了解更多关于它如何工作以及它支持什么类型的信息。

Building the Preview

LinkPresentation框架从所有web页面的标记中提取元数据，并使用最合适的标记来显示最佳预览。

预览取决于五项信息:

1. Building the Preview: The URL

URL来自以下任意一个:

网站的网址
og:site_name 像 <meta property="og:site_name" content="raywenderlich.com">

当og:site_name出现时，它在链接预览中优先于URL。所有Open Graph元标记在出现时都优先于其他替代标记。

2. Building the Preview: The Title

title来自于：

<title>Flutter Hero Animations | raywenderlich.com</title>
<meta property="og:title" content="Flutter Hero Animations">

<title>指定在浏览器中看到的web页面的标题。但是有时，<title>标记会复制站点的URL，为了避免在预览中出现这种重复，可以使用og:title。它将优先于<title>标记。

苹果公司建议你:

1）保持标题的独特性和信息性。

2）避免在标题中重复站点名称。

3）不要动态生成标记，因为LinkPresentation框架不运行JavaScript。

3. Building the Preview: The Icon

icon来自于这个标签：<link rel="icon" type="image/png" href="/favicon.png">

4. Building the Preview: The Image

image来自于这个标签：<meta property="og:image" content="image.png">

苹果公司建议你:

1）使用特定于您的内容的图像。
2）避免添加文本。富链接在多个设备上以多种大小显示；图像文本可能无法缩放。
3）即使您有一个图像，也要指定一个图标作为后备。

5. Building the Preview: The Video

video来自于这个标签：<meta property="og:video:url" content="video.mp4">

苹果公司建议你:

1）保持icon + image + video的大小为10MB或更小。
2）直接引用视频文件，而不是自动播放的YouTube链接。
3）避免需要HTML或插件的视频；它们不受支持。

除了URL本身之外，所有这些都是可选的。LinkPresentation框架总是会选择尽可能“丰富”的信息，以最好的方式呈现链接预览。“richness”的顺序从Video > Image > Icon。

有了这些，您就可以开始编写代码了!

Retrieving the Metadata

显示丰富链接的第一步是获取元数据。

在Xcode中，打开SpinViewController.swift。在这里，storyboard中的一些outlets，以及您要实现的几个方法。

要开始使用LinkPresentation框架，您首先必须导入它。把它放在文件的顶部，在import UIKit的正下方:

import LinkPresentation

要获取给定URL的元数据，您将使用LPMetadataProvider。如果获取fetch成功，您将返回LPLinkMetadata，其中包含URL、标题、图像和视频链接(如果存在的话)。LPLinkMetadata上的所有属性都是可选的，因为不能保证web页面已经设置了它们。

添加一个新的provider属性，位于errorLabel的最后一个@IBOutlet定义的正下方:

private var provider = LPMetadataProvider()

要获取元数据，您将在provider上调用startFetchingMetadata(for:completionHandler:)。

找到spin(_:)并添加以下实现:

// Select random tutorial link
let random = Int.random(in: 0..<links.count)
let randomTutorialLink = links[random]

// Re-create the provider
provider = LPMetadataProvider()

guard let url = URL(string: randomTutorialLink) else { return }

// Start fetching metadata
provider.startFetchingMetadata(for: url) { metadata, error in
  guard 
    let metadata = metadata, 
    error == nil 
    else { return }

  // Use the metadata
  print(metadata.title ?? "No Title")
}

您可能想知道为什么每次用户点击旋转轮子时都要重新创建provider。LPMetadataProvider是一次性对象，所以您只能使用一个实例一次。如果你尝试重用它，你会得到一个像这样的异常:

2020-01-12 19:56:17.003615+0000 Raylette[23147:3330742] *** Terminating app due to uncaught exception 'NSGenericException', reason: 'Trying to start fetching on an LPMetadataProvider that has already started. LPMetadataProvider is a one-shot object.'

但是，最好有一个类范围的引用来引用它，以防以后需要在其他方法中使用它。

构建和运行，并按几次旋转按钮，以确保URL标题打印到控制台:

Presenting Your Links

但是，仅仅将web页面的标题打印到控制台并不有趣。富链接的真正魔力是在应用程序中完美地呈现它们!

呈现链接非常简单。LinkPresentation框架包括LPLinkView，它可以为您完成所有繁重的工作。

添加一个新属性，就在provider下面:

private var linkView = LPLinkView()

每次旋转转轮时，您都将使用给定的URL创建一个新的LPLinkView实例，并将其添加到stackView中。获取特定URL的元数据后，将其添加到linkView。

用下面的代码替换当前的spin(_:)实现:

let random = Int.random(in: 0..<links.count)
let randomTutorialLink = links[random]

provider = LPMetadataProvider()
// 1
linkView.removeFromSuperview()

guard let url = URL(string: randomTutorialLink) else { return }
// 2
linkView = LPLinkView(url: url)

provider.startFetchingMetadata(for: url) { metadata, error in
  guard 
    let metadata = metadata, 
    error == nil 
    else { return }

  // 3
  DispatchQueue.main.async { [weak self] in
    // 4
    guard let self = self else { return }

    self.linkView.metadata = metadata
  }
}
// 5
stackView.insertArrangedSubview(linkView, at: 0)

在上述守则中，你:

1）从stackView中删除linkView，如果它已经在那里了。您一次只想呈现一个链接。
2）使用URL初始化linkView，这样在获取元数据时，用户仍然可以看到显示的内容。
3）将元数据分配给linkView。然后使用DispatchQueue在主线程上处理UI更改，因为元数据获取是在后台线程上执行的。如果你不这样做，应用程序就会崩溃。
4）使用对视图控制器的引用来更新后台的接口。通过使用[weak self]和guard let self = self，您可以确保更新可以继续进行，而不会导致retain cycle — 无论用户在后台进程运行时做了什么。
5）将linkView添加到堆栈视图中。这段代码立即运行，并向用户提供一些要查看的内容(URL)。然后，当后台进程完成时，它用丰富的元数据更新视图。

构建并运行和旋转轮子，看看链接预览在行动!

有些预览需要很长时间才能加载，特别是那些包含视频链接的预览。但是没有任何东西告诉用户预览正在加载，所以他们没有什么动力坚持下去。你下次再解决吧。

Adding an Activity Indicator

为了在等待加载丰富的链接时改善用户体验，您将在link视图下面添加一个活动指示器。

为此，你会使用UIActivityIndicatorView。看一下SpinViewController.swift，注意它已经有一个名为activityIndicator的属性。您可以在viewDidLoad()的末尾将此属性添加到stackView。

通过在spin(_:)的开头添加这一行来开始激活activityIndicator:

activityIndicator.startAnimating()

接下来，将获取元数据的代码块替换为:

provider.startFetchingMetadata(for: url) { [weak self] metadata, error in
  guard let self = self else { return }

  guard 
    let metadata = metadata, 
    error == nil 
    else {
      self.activityIndicator.stopAnimating()
      return
  }

  DispatchQueue.main.async { [weak self] in
    guard let self = self else { return }

    self.linkView.metadata = metadata
    self.activityIndicator.stopAnimating()
  }
}

在打开几个可选值之后，这段代码告诉主队列通过停止动画并在linkView上设置元数据来更新用户界面。

构建并运行一个简单的活动指示器，看看它能给用户带来多少体验!

Handling Errors

进一步考虑用户体验，如果您能让用户知道什么时候发生了错误，这样他们就不会白白浪费时间了。

LPError定义了在获取元数据失败时可能发生的所有错误:

.cancel ：客户端取消fetch。
.failed ：fetch失败。
. timedout ：fetch时间比允许的长。
.unknown ：由于未知的原因，fetch失败。

如果fetch失败，您将向用户显示原因。为此，您将在stackView中使用errorLabel。它一开始是隐藏的，但你会取消隐藏，并根据你收到的错误给它分配一些合理的文本。

1. Handling Errors: Error Messages

转到LPError+Extension.swift，用以下代码替换LPError：

extension LPError {
  var prettyString: String {
    switch self.code {
    case .metadataFetchCancelled:
      return "Metadata fetch cancelled."
    case .metadataFetchFailed:
      return "Metadata fetch failed."
    case .metadataFetchTimedOut:
      return "Metadata fetch timed out."
    case .unknown:
      return "Metadata fetch unknown."
    @unknown default:
      return "Metadata fetch unknown."
    }
  }
}

该扩展为不同的LPErrors创建一个人可读的错误字符串。

现在回到SpinViewController.swift，将这个添加到spin(_:)的顶部:

errorLabel.isHidden = true

这将在用户点击spinButton时清除错误。

接下来，更新fetch块以显示如下错误：

guard 
  let metadata = metadata, 
  error == nil 
  else {
    if let error = error as? LPError {
      DispatchQueue.main.async { [weak self] in
        guard let self = self else { return }

        self.activityIndicator.stopAnimating()
        self.errorLabel.text = error.prettyString
        self.errorLabel.isHidden = false
      }
    }
    return
}

在上面的代码中，您可以检查任何错误。如果存在，则更新主线程上的UI以停止活动指示器，然后将错误显示给用户。

不幸的是，您不能用当前的设置来测试它。因此，将这个添加到spin(_:)中，就在新的provider实例之后:

provider.timeout = 1

这将在加载任何链接所需的时间超过一秒时触发错误消息。构建并运行来查看这个：

将timeout设置为1以测试错误消息。将它增加到5现在允许一个更合理的时间为这些丰富的预览加载：

provider.timeout = 5

默认timeout是30s

2. Handling Errors: Cancel Fetch

您的用户不知道fetch将在5秒后超时，他们可能不希望等待超过2秒。如果需要这么长时间，他们宁愿取消fetch。你会给他们下一个选择。

在spin(_:)的实现中，将它添加到errorLabel.isHidden = true下：

guard !activityIndicator.isAnimating else {
  cancel()
  return
}

spinButton.setTitle("Cancel", for: .normal)

首先，你要确保activityIndicator没有旋转。但如果是，你知道:

1）用户轻击Spin the Wheel按钮。这开始fetch和将activityIndicator.isAnimating设置为true。
2）用户还点击了Cancel按钮，因为他们决定放弃fetch。

如果是，则调用cancel()和return。

否则，如果activityIndicator没有旋转，你就知道用户只是点击了Spin the Wheel版本按钮。所以，在你开始fetch之前，你将按钮标题改为Cancel，以防他们稍后想要取消fetch。

此时，cancel()不执行任何操作。你下次再解决吧。替换为:

private func cancel() {
  provider.cancel()
  provider = LPMetadataProvider()
  resetViews()
}

在这里，您首先调用提供者本身的cancel()。然后创建一个新的provider实例并调用resetViews。

但是resetViews()也还没有执行任何操作。把它替换成：

private func resetViews() {
  activityIndicator.stopAnimating()
  spinButton.setTitle("Spin the Wheel", for: .normal)
}

在上面的代码中，您可以停止活动指示器，并将spinButton的标题重新设置为“Spin the Wheel”：

同样，在provider.startFetchingMetadata中获得相同的功能，将self.activityIndicator.stopAnimating()的两个实例替换为self.resetViews()：

self.resetViews()

现在，如果您遇到一个错误或预览加载，您将停止活动指示器，并重新设置spinButton的标题为"Spin the Wheel"。

构建和运行。确保您可以取消请求，并且errorLabel显示正确的问题。

Storing the Metadata

查看这些链接的加载可能会变得有些乏味，特别是当您多次返回相同的结果时。为了加快处理速度，可以缓存元数据。这是一种常见的策略，因为web页面元数据不会经常更改。

你猜怎么着？你是幸运的。LPLinkMetadata在默认情况下是可序列化的，这使得缓存它变得轻而易举。它也符合NSSecureCoding，需要归档时你需要记住。

1. Storing the Metadata: Cache and Retrieve

转到MetadataCache.swift并将这些方法添加到MetadataCache的顶部。

static func cache(metadata: LPLinkMetadata) {
  // Check if the metadata already exists for this URL
  do {
    guard retrieve(urlString: metadata.url!.absoluteString) == nil else {
      return
    }

    // Transform the metadata to a Data object and 
    // set requiringSecureCoding to true
    let data = try NSKeyedArchiver.archivedData(
      withRootObject: metadata, 
      requiringSecureCoding: true)

    // Save to user defaults
    UserDefaults.standard.setValue(data, forKey: metadata.url!.absoluteString)
  }
  catch let error {
    print("Error when caching: \(error.localizedDescription)")
  }
}

static func retrieve(urlString: String) -> LPLinkMetadata? {
  do {
    // Check if data exists for a particular url string
    guard 
      let data = UserDefaults.standard.object(forKey: urlString) as? Data,
      // Ensure that it can be transformed to an LPLinkMetadata object
      let metadata = try NSKeyedUnarchiver.unarchivedObject(
        ofClass: LPLinkMetadata.self, 
        from: data) 
      else { return nil }
    return metadata
  }
  catch let error {
    print("Error when caching: \(error.localizedDescription)")
    return nil
  }
}

在这里，您使用NSKeyedArchiver和NSKeyedUnarchiver将LPLinkMetadata转换为Data或从Data转换为LPLinkMetadata。您使用UserDefaults来存储和检索它。

注意：UserDefaults是一个包含在iOS中的数据库，你只需要很小的设置就可以使用它。即使用户退出应用程序，UserDefaults中存储的数据也会保存在硬盘上。

2. Storing the Metadata: Refactor

回到spinviewcontroller.swift。

spin(_:)有点长了。通过将元数据获取提取到名为fetchMetadata(for:)的新方法中来重构它。在resetViews()之后添加这段代码:

private func fetchMetadata(for url: URL) {
  // 1. Check if the metadata exists
  if let existingMetadata = MetadataCache.retrieve(urlString: url.absoluteString) {
    linkView = LPLinkView(metadata: existingMetadata)
    resetViews()
  } else {
    // 2. If it doesn't start the fetch
    provider.startFetchingMetadata(for: url) { [weak self] metadata, error in
      guard let self = self else { return }

      guard 
        let metadata = metadata, 
        error == nil 
        else {
          if let error = error as? LPError {
            DispatchQueue.main.async { [weak self] in
              guard let self = self else { return }

              self.errorLabel.text = error.prettyString
              self.errorLabel.isHidden = false
              self.resetViews()
            }
          }
          return
      }

      // 3. And cache the new metadata once you have it
      MetadataCache.cache(metadata: metadata)

      // 4. Use the metadata
      DispatchQueue.main.async { [weak self] in
        guard let self = self else { return }

        self.linkView.metadata = metadata
        self.resetViews()
      }
    }
  }
}

在这个新方法中，你不仅提取了元数据fetching，你还添加了以下功能:

1）如果存在元数据，则呈现linkView并将视图重置为正常。
2）如果元数据不存在，则启动fetch。
3）缓存fetch操作的结果。

接下来，用对新方法的调用替换provider.startFetchingMetadata()。当你完成后，你将有一个单行调用fetchMetadata()之间的linkView和stackView：

linkView = LPLinkView(url: url)

// Replace the prefetching functionality
fetchMetadata(for: url)

stackView.insertArrangedSubview(linkView, at: 0)

构建并运行以观察链接的加载速度。继续点击Spin the Wheel，直到你得到一个已被缓存的链接。注意你的链接将立即加载，如果你以前见过他们！

Sharing Links

LinkPresentation框架有一个很酷的协议，UIActivityItemSource，你可以使用它来将LPLinkMetadata直接传递到share sheet。

这意味着，您可以使用已经获取的元数据预先填充它，而不是向服务器发出请求，等待链接在共享工作表中异步加载标题和图标。

现在您的用户将立即看到一个丰富的预览。重要的是小事!

1. Sharing Links: UIActivityItemSource

首先，通过添加一个新属性到linkView下面的SpinViewController来跟踪元数据:

private var currentMetadata: LPLinkMetadata?

接下来，在fetchMetadata(for:)中将值赋给currentMetadata。

在fetchMetadata(for:)中的第一个if let语句中添加这一行:

currentMetadata = existingMetadata

并在缓存元数据之前添加这一行，即在这一行之前的MetadataCache.cache(metadata: metadata)：

self.currentMetadata = metadata

现在，为了使用新的LinkPresentation功能，你必须使SpinViewController符合UIActivityItemSource。

添加这个扩展到SpinViewController之外，在右花括号之后:

extension SpinViewController: UIActivityItemSource {
  // 1. Required function returning a placeholder
  func activityViewControllerPlaceholderItem(
    _ activityViewController: UIActivityViewController
  ) -> Any {
    return "website.com"
  }

  // 2. Required function that returns the actual activity item
  func activityViewController(
    _ activityViewController: UIActivityViewController, 
    itemForActivityType activityType: UIActivity.ActivityType?
  ) -> Any? {
    return currentMetadata?.originalURL
  }

  // 3. The metadata that the share sheet automatically picks up
  func activityViewControllerLinkMetadata(
    _ activityViewController: UIActivityViewController
  ) -> LPLinkMetadata? {
    return currentMetadata
  }
}

符合UIActivityItemSource需要你实现三个方法:

1）占位符方法应该返回与您打算在活动项的Subject字段中显示的实际数据相近的内容。然而，它不需要包含真实的数据，它应该尽快返回。您将在实际数据完成加载后更新它。现在，一个简单的文本字符串就足够了。
2） currentMetadata的originalURL允许视图确定它将显示什么类型的信息。

注意：您必须返回元数据的originalURL属性，因为它包含类型信息，如果您仅仅返回一个具有相同字符串的新URL()，这些类型信息将不存在。这很容易出错，并且会产生难以跟踪的bug。

3）最后，activityViewControllerLinkMetadata(_:)是真正神奇的地方，当您从currentMetadata提取所有有趣的细节。

2. Sharing Links: View Update

要在UI中显示它，您将在预览加载后在链接视图下面添加一个共享按钮。开始项目提供了一个完整的堆栈视图，其中包含SpinViewController上的两个活动按钮；你只需要展示出来！

要显示的视图是actionsStackView。在加载链接元数据时，隐藏视图。预览加载后，就可以显示它。

添加这一行在activityIndicator.startAnimating()内spin(_:)：

actionsStackView.isHidden = true

然后在resetViews()的末尾加上这个，在右花括号之前取消隐藏：

actionsStackView.isHidden = false

下一步，将share(:)替换为：

@IBAction func share(_ sender: Any) {
  guard currentMetadata != nil else { return }

  let activityController = UIActivityViewController(
    activityItems: [self], 
    applicationActivities: nil)
  present(activityController, animated: true, completion: nil)
}

在上述守则中，你:

1）检查currentMetadata是否存在。如果是，你创建一个UIActivityViewController的实例。
2）将它[self]作为activityItems。这是很重要的一点，因为它告诉活动控制器去查看SpinViewController如何符合UIActivityItemSource。

构建并运行，然后点击共享按钮，看看它有多平滑!

注意：如果您想要交换工作表预览中出现的图标，您可以在MetadataCache.cache(metadata: metadata)之前的fetchMetadata(for:)中使用类似这样的代码。
if let imageProvider = metadata.imageProvider {
 metadata.iconProvider = imageProvider
}
这将iconProvider替换为imageProvider。

Saving Favorites

在上一节实现的共享按钮旁边，还有一个保存按钮。

您将在UserDefaults中名为savedURLs的特殊键下存储用户希望保存的教程，并在stack view的Saved选项卡中将所有教程显示为链接预览。

转到MetadataCache.swift，在你当前的方法下面加上这个，在右花括号之前:

// 1
static var savedURLs: [String] {
  UserDefaults.standard.object(forKey: "SavedURLs") as? [String] ?? []
}

// 2
static func addToSaved(metadata: LPLinkMetadata) {
  guard var links = UserDefaults.standard
    .object(forKey: "SavedURLs") as? [String] else {
    UserDefaults.standard.set([metadata.url!.absoluteString], forKey: "SavedURLs")
    return
  }

  guard !links.contains(metadata.url!.absoluteString) else { return }

  links.append(metadata.url!.absoluteString)
  UserDefaults.standard.set(links, forKey: "SavedURLs")
}

在上述守则中，你:

1）创建一个新属性savedURLs，它将返回UserDefaults中存储在savedURLs键上的数组。
2）创建addToSaved(metadata:)，您可以调用它来检查UserDefaults中的SavedURLs数组中是否已经存在URL，如果不存在，则将其添加到数组中。

接下来，返回SpinViewController.swift并将save(_:)替换为:

@IBAction func save(_ sender: Any) {
  guard let metadata = currentMetadata else { return }
  MetadataCache.addToSaved(metadata: metadata)
  errorLabel.text = "Successfully saved!"
  errorLabel.isHidden = false
}

在上面的代码中，检查元数据。如果存在，则调用addToSaved(metadata:)并通过errorLabel通知用户成功。

现在，您已经成功地保存了喜爱的URLs，现在可以显示链接了。

切换到SavedViewController.swift并将loadList()替换为:

private func loadList() {
  // 1
  stackView.arrangedSubviews.forEach { $0.removeFromSuperview() }

  // 2
  let links = MetadataCache.savedURLs
  let metadata = links.compactMap { MetadataCache.retrieve(urlString: $0) }

  // 3
  metadata.forEach { metadata in
    let linkView = LPLinkView(metadata: metadata)
    stackView.addArrangedSubview(linkView)
  }
}

在上述函数中，你:

1）从stackView中删除所有的链接预览子视图，所以它是完全空的。
2）获取所有链接并使用retrieve(urlString:)将它们转换为LPLinkMetadata对象。
3）将所有子视图添加到stackView。

构建和运行。保存一些教程，然后看到它们出现在应用程序的Save选项卡上！

Using UIStackView Versus UITableView

你用UIStackView来显示这些链接预览，而不是UITableView。表视图似乎是在列表中显示数据的最佳选择，但它不是链接表示的方式。有两个主要原因：

1） Sizing：如果你按照苹果的建议Apple's advice，在tableView(_:cellForRowAt:)的链接预览中调用sizeToFit()，你会发现预览不会出现。您可以让它们在您的自定义单元格上以自动布局约束出现，或者通过给它们一个特定的CGSize，但是在尝试之前请继续阅读。
2） Memory：即使您可以让预览出现，您还有另一个问题：表视图中的LPLinkViews会导致巨大的内存泄漏。滚动的时候可以达到10GB !看看下面的内存负载：

如果出现这样的内存泄漏，你的应用程序就会崩溃，一星评论就会开始满天飞。最好远离链接演示的table view!

再次测试应用程序的时间到了。构建并运行，点击save选项卡中的一个链接。Safari将打开，您将看到网页。

想要更多地了解苹果公司在这个话题上的观点，请观看WWDC 2019关于Embedding and Sharing Visually Rich Links和Ensuring Beautiful Rich Links。

后记

本篇主要讲述了LinkPresentation框架基本概览，感兴趣的给个赞或者关注~~~

LinkPresentation框架详细解析（二） —— 一个

版本记录

前言

开始

Understanding Rich Links

1. Understanding Rich Links: Web Page Metadata

2. Understanding Rich Links: Open Graph Protocol

Building the Preview

1. Building the Preview: The URL

2. Building the Preview: The Title

3. Building the Preview: The Icon

4. Building the Preview: The Image

5. Building the Preview: The Video

Retrieving the Metadata

Presenting Your Links

Adding an Activity Indicator

Handling Errors

1. Handling Errors: Error Messages

2. Handling Errors: Cancel Fetch

Storing the Metadata

1. Storing the Metadata: Cache and Retrieve

2. Storing the Metadata: Refactor

Sharing Links

1. Sharing Links: UIActivityItemSource

2. Sharing Links: View Update

Saving Favorites

Using UIStackView Versus UITableView

后记

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

LinkPresentation框架详细解析 （二） —— 一个

版本记录

前言

开始

Understanding Rich Links

1. Understanding Rich Links: Web Page Metadata

2. Understanding Rich Links: Open Graph Protocol

Building the Preview

1. Building the Preview: The URL

2. Building the Preview: The Title

3. Building the Preview: The Icon

4. Building the Preview: The Image

5. Building the Preview: The Video

Retrieving the Metadata

Presenting Your Links

Adding an Activity Indicator

Handling Errors

1. Handling Errors: Error Messages

2. Handling Errors: Cancel Fetch

Storing the Metadata

1. Storing the Metadata: Cache and Retrieve

2. Storing the Metadata: Refactor

Sharing Links

1. Sharing Links: UIActivityItemSource

2. Sharing Links: View Update

Saving Favorites

Using UIStackView Versus UITableView

后记

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

LinkPresentation框架详细解析（二） —— 一个