iOS 11.0 Chapter 6:Beginning Dray and Drop

本文仅是本人在阅读时，随笔写下。翻译理解错误的地方，还请海涵！

Chapter 6:Beginning Drag and Drop

One of the most anticipated announcements at WWDC ’17 was the introduction of Drag and Drop — a true game-changer for mobile devices. In typical Apple fashion, their engineers went above and beyond to deliver an interaction that feels as natural as it does intuitive.

一个最值得期待的公告在WWDC 17是拖放的引入移动设备的一个真正的游戏改变者。在典型的苹果时尚中，他们的工程师超越了它们，提供了一种与直觉一样自然的交互

If you haven’t yet experienced Drag and Drop in iOS 11 then I highly recommend putting down this book and having a play. If the concept of Drag and Drop interests you now — and it must, you are reading this chapter after all! — your enthusiasm will increase ten-fold once you’ve actually experienced it.

如果你还没有经历过iOS 11的拖放，那么我强烈建议你放下这本书并玩一玩。如果你现在对“拖放兴趣”这个概念有兴趣，那你一定在读这一章！一旦你真的体验到了，你的热情就会增加十倍。

For developers, the UIKit team provided two sets of APIs to integrate drag and drop in your apps. There are a standard set of APIs that provide for every aspect of the interaction, and then there are a set of higher-level abstractions built specifically for UICollectionView and UITableView.

对于开发者来说，UIKit团队提供两套API做综合拖放。有一套标准的API，提供各方面的互动，然后有一套专为更高层次的抽象建立特殊的对于UITableView UICollectionView。

In this chapter you’ll dive straight in and get your hands dirty with the latter set of APIs, by integrating drag and drop into an iPad bug-tracking app known as Bugray.

在这一章中你将直接潜入，把你的手弄脏的API后，通过拖放到iPad的应用程序称为bugray bug跟踪。

Getting started (入门)

The Razeware folks take their engineering efforts pretty seriously, and record each and every bug and feature request in Bugray, which breaks those items into three contexts: To Do, In Progress, and Done. Every item begins its life belonging to the To Do context, and moves through the other two contexts as it’s worked on.

人们把他们的razeware工程工作非常认真，并记录每一个错误和bugray特征要求，打破那些项目为三方面：要做，在进步，并做。每个条目都开始属于属于上下文的生命，并在其他两个上下文中运行。

However, productivity at Razeware has fallen off a cliff since introducing Bugray as there’s one massive flaw in the app — it’s not quite finished! You see, items can’t be moved between the different contexts by the user. It requires a developer to learn and understand the high-level Drag and Drop APIs in iOS 11, and then dive in and finish it.

然而，生产力在razeware已经跌下大坑自引入Bugray作为在应用程序-一个巨大的缺陷是没有完成！您知道，用户不能在不同上下文之间移动项目。它要求开发人员学习和理解iOS 11中的高级拖放API，然后跳入并完成它。

That developer is you.

那个开发者是你。

Locate and open Bugray.xcodeproj with Xcode 9. When Xcode has finished launching,

select the iPad Pro (10.5-inch) simulator and hit Build and Run.

找出并打开Xcode 9的开放bugray.xcodeproj，当Xcode完成启动时。

选择iPad Pro（10.5英寸）模拟器并选中的Build和Run。

Before jumping in and changing any code, take this brief tour through the existing files and structure of the app.

在跳转和更改任何代码之前，请通过现有的应用程序文件和结构进行简短的浏览。

Open Main.storyboard and you’ll see everything’s been set up for you. The main

structure of Bugray looks like this:

Open Main.storyboard，你会看到一切都是为你准备的。主

结构bugray看起来像这样：

Bugray comprises just two view controllers:

bugray只包含两个视图控制器：

• The main container view controller embeds three instances of the smaller view controller to provide the look and feel of a kanban board.

主容器视图控制器嵌入较小视图控制器的三个实例，以提供看板的外观和感觉。

• The smaller view controller displays a list of all the items in a given context using a collection view. It also displays the number of items in that context in the upper-left corner.

较小的视图控制器使用集合视图显示给定上下文中的所有项的列表。它还显示左上角在该上下文中的项数。

These view controllers are implemented respectively by the following two UIViewController subclasses:

这些视图控制器由以下两个UIViewController子类分别实现：

ContainerViewController: Provides each instance of BugListViewController with the context it’s responsible for displaying.

ContainerViewController：提供BugListViewController每个实例的上下文是负责显示。

BugListViewController: Manages the collection view that displays the items in the current context.

BugListViewController：管理显示当前上下文中项目的集合视图。

Bug is the model object used throughout the app, whereas BugStore is a singleton that’s responsible for managing all the items in app. It uses Codable to load the items from a JSON file that’s part of the bundle, and provides methods to insert or remove items from the store.

整个BUG对象模型在项目中到处使用，然而 BugStore is a 单例是它负责管理应用程序中的所有项。它使用Codable 获取捆绑的JSON文件的条目，提供了插入或移除items 从store的方法。

Now that you’re familiar with Bugray and how it works, it’s time to knuckle down and add support for Drag and Drop!

既然你熟悉Bugray和它是如何工作的，接下来敲动代码，并添加支持拖放。

Note: This chapter deals exclusively with the drag and drop APIs for UICollectionView, but Apple and the UIKit team have done a tremendous job providing consistency and parity between UICollectionView and UITableView. What you learn in this chapter should be directly transferable when working with table views.

注：本章专门处理拖放API UICollectionView，但是苹果和UIKit的团队已经做了大量的工作，并提供UICollectionView UITableView之间的一致性和奇偶校验。本章所学的内容在与表视图一起工作时可以直接传递。

Starting a drag

Configuring a UICollectionView to allow dragging is incredibly easy: You simply declare an object as conforming to the UICollectionViewDragDelegate protocol, implement a single method, and then set an instance of that object as the dragDelegate of the collection view. To keep things simple, you’ll update BugListViewController so it conforms to the protocol, and then set it as the drag delegate of the collection view.

配置一个UICollectionView允许拖动非常简单：你只需声明一个对象为符合UICollectionViewDragDelegate协议，实现一个方法，然后将对象实例的集合视图的dragdelegate。让事情变得简单，你会更新BugListViewController所以它符合协议，然后把它作为集合视图拖动代表。

To begin with, open BugListViewController.swift and add the following to the bottom of the file:

首先，打开BugListViewController.swift，添加以下内容到文件的底部：

extension BugListViewController: UICollectionViewDragDelegate {
}

Here you’ve created an extension of BugListViewController that declares conformance to UICollectionViewDragDelegate. Using extensions in this way keeps your code uncluttered and well-organized.

在这里，你已经创造了BugListViewController声明符合UICollectionViewDragDelegate延伸。以这种方式使用的扩展使代码整洁有序。

Inside the extension, add the following method:

在扩展中，添加以下方法：

func collectionView(_ collectionView: UICollectionView,
  itemsForBeginning session: UIDragSession,
  at indexPath: IndexPath) -> [UIDragItem] {
// 1
  let item = UIDragItem(itemProvider: NSItemProvider())
  // 2
  return [item]
}

This is the only method that UICollectionViewDragDelegate requires you to implement. All others are optional. Inside the method you do the following two things:

这是UICollectionViewDragDelegate要求你实现的唯一方法。其他的都是可选的。在方法中，你做以下两件事：

• Initialize an instance of UIDragItem with an empty NSItemProvider. Internal drag and drop — that is, between views within the same app — doesn’t require the use of NSItemProvider, hence why you’re passing an empty instance here.

1.初始化一个空的NSItemProvider UIDragItem实例。内部拖放，视图之间的在同一应用程序不需要NSItemProvider使用，因此你可以传递一个空的实例在这里。

You can find out more about inter-app drag and drop, and the role NSItemProvider

plays in that, in Jeff Rames’ Advanced Drag and Drop chapter later in this book.

你可以找到关于跨应用的拖放，和角色NSItemProvider

在这本书中，以后在Jeff Rames关于Advanced Drag and Drop chapter。

• Return an array of type UIDragItem, which in this case contains just the drag itemyou initialized in the previous step.

返回UIDragItem类型的数组，在这种情况下，仅仅包含拖动项目

在前面的步骤中初始化了。

The final step to adopting dragging is to set the controller as the dragDelegate of the collection view.

通过拖动是设置控制器作为集合视图的dragdelegate最后一步。

Still in BugListViewController.swift, find viewDidLoad() and add the following statement to the very bottom:

接下来在BugListViewController.swift，找到viewDidLoad()和底部添加下面的语句：

collectionView.dragDelegate = self

That’s all there is to it! Build and run using the iPad Pro (10.5-inch) simulator, and

then tap-and-hold on any cell in any of the three collection views.

这就是它的全部！建立和运行使用iPad Pro（10.5英寸）模拟器，和然后点击并保存三个集合视图中的任何单元格。

You’ll find that the tapped cell, after a short delay, will raise up and allow you to drag it around at will. However, lifting your finger — or mouse button — to drop the cell doesn’t actually result in a drop at that location, but instead the collection view simply animates the cell back to its origin.

你会发现，点击cell一小段时间延迟之后，会提高，让你随意拖动它。然而，举起你的手指或鼠标按钮-下降的细胞实际上不在那个位置，下降的结果，而是集合视图简单动画的细胞回到它的起源。