iOS 11.0 chapter 6:Beginning Dray and Drop

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

Chapter 6:Beginning Drag and Drop

Snip20170904_75.png
Snip20170904_76.png
Snip20170904_77.png

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。

Snip20170904_78.png

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看起来像这样:

Snip20170904_79.png

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子类分别实现:

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

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

  1. 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 item
    you 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英寸)模拟器,和然后点击并保存三个集合视图中的任何单元格

Snip20170904_80.png

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容