作者：Arthur Knopper，原文鏈接，原文日期：2016-11-07
譯者：Crystal Sun；校對：星夜暮晨；定稿：CMB
iOS 的優勢在于可以觸摸和手勢交互。在本節教程中，我們會展示一些借助拖曳手勢識別器 (pan gesture recognizer) 來進行拖拽的自定義視圖 (views)，本節教程使用 Xcode 8 和 iOS 10。
打開 Xcode，創建一個 Single View Application。
點擊 Next，product name 一欄填寫 IOS10DraggingViewsTutorial，填寫好 Organization Name 和 Organization Identifier，Language 選擇 Swift，Devices 選擇 iPhone。
首先，先創建隨機出現在屏幕上的視圖，菜單欄選擇 File->New->File->iOS->Cocoa Touch Class，創建類文件，命名為 MyView，Subclass 選擇 UIView。
找到 MyView.swift 文件，添加下列屬性：
var lastLocation = CGPoint(x: 0, y: 0)
這個變量記錄用戶觸摸點的最后位置。接下來實現 init 方法。
override init(frame: CGRect) {
super.init(frame: frame)
// 初始化代碼
let panRecognizer = UIPanGestureRecognizer(target:self, action:#selector(MyView.detectPan(_:)))
self.gestureRecognizers = [panRecognizer]
// 視圖的顏色隨機顯示
let blueValue = CGFloat(Int(arc4random() % 255)) / 255.0
let greenValue = CGFloat(Int(arc4random() % 255)) / 255.0
let redValue = CGFloat(Int(arc4random() % 255)) / 255.0
self.backgroundColor = UIColor(red:redValue, green: greenValue, blue: blueValue, alpha: 1.0)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
首先給視圖添加一個拖曳手勢識別器 (pan gesture recognizer)，這樣就可以點擊選中并拖拽視圖到新的位置。接下來創建隨機顏色，以作為視圖的背景色。然后實現 detectPan 方法，這樣在每次識別到手勢后，都會調用 detectPan 方法。
func detectPan(_ recognizer:UIPanGestureRecognizer) {
let translation = recognizer.translation(in: self.superview)
self.center = CGPoint(x: lastLocation.x + translation.x, y: lastLocation.y + translation.y)
}
translation 變量檢測到新的坐標值之后，視圖的中心將根據改變后的坐標值做出相應調整。當用戶點擊視圖時，調用 touchesBegan:event 方法，下面就來實現此方法。
override func touchesBegan(_ touches: (Set<UITouch>!), with event: UIEvent!) {
// 把當前被選中的視圖放到前面
self.superview?.bringSubview(toFront: self)
// 記住原來的位置
lastLocation = self.center
}
選中某個視圖后，這個視圖會出現在其他視圖的前面，其中心位置的坐標值就是lastlocation 變量值。現在，自定義的視圖差不多完成了，移植到視圖控制器 (view controller) 上吧。在 ViewController.swift 文件中實現 viewDidLoad 方法
override func viewDidLoad() {
super.viewDidLoad()
let halfSizeOfView = 25.0
let maxViews = 25
let insetSize = self.view.bounds.insetBy(dx: CGFloat(Int(2 * halfSizeOfView)), dy: CGFloat(Int(2 * halfSizeOfView))).size
// 添加視圖
for _ in 0..<maxViews {
let pointX = CGFloat(UInt(arc4random() % UInt32(UInt(insetSize.width))))
let pointY = CGFloat(UInt(arc4random() % UInt32(UInt(insetSize.height))))
let newView = MyView(frame: CGRect(x: pointX, y: pointY, width: 50, height: 50))
self.view.addSubview(newView)
}
}
有 25 個 50x50 大小的視圖隨機地出現在主界面上，運行工程，點擊并拖動一個視圖，這個視圖會一直在其他視圖上面。
在 ioscreator 的 github 上可以下載到本節課程 IOS10DraggingViewsTutorial 的源代碼。
本文由 SwiftGG 翻譯組翻譯，已經獲得作者翻譯授權，最新文章請訪問 http://swift.gg。
