iOS 11: Drag & Drop with Collection View (part 3)

Overview

Ở bài viết trước, tôi đã đề cập đến việc adopt tính năng drag và drop trên đối tượng Custom View, các bạn có thể tham khảo tạo đây: iOS 11: Drag & Drop with Custom View (part 2). Trong khuôn khổ của bài viết này tôi xin đề cập đến cách mà chúng ta có thể enable tính năng drag và drop trên đối tượng UICollectionView.

Getting Started

Để hỗ trợ tính năng drag trên collection view , chúng ta cần xây dựng một object mà trong đó implement các giao thức của UICollectionViewDragDelegate và sau đó gán nó vào thuộc tính dragDelegate của collection view. Để hỗ trợ tính năng drop, chúng ta xây dựng một object mà trong đó implement các giao thức của UICollectionViewDropDelegate và sau đó gán nó vào thuộc tính dropDelegate của collection view.

Enable tính năng Drag và Drop

Để có thể implement các phương thức cho phép drag hoặc drop (hoặc cả hai), bước đầu tiên chúng ta cần cài đặt delegate cho collection view trong ViewDidLoad: Đoạn code sau sẽ enable cả hai chức năng drag và drop:

override func viewDidLoad() {
    super.viewDidLoad()
    
    collectionView.dragDelegate = self
    collectionView.dropDelegate = self
}

Không giống như một custom View, đối tượng UICollectionView không có thuộc tính interactions giống như một Custom view để chúng ta gán các tương tác, thay vào đó nó dùng trực tiếp các phương thức drag và drop thông qua delegate.

Cung cấp dữ liệu cho một Drag Session

UICollectionView đã tự động quản lý hầu hết tất cả các tương tác liên quan đến hành động drag, nhưng chúng ta cần chỉ định đích danh các item cần drag. Khi thao tác drag được thực hiện, UICollectionView tạo ra một drag session và gọi đến phương thức collectionView(_:itemsForBeginning:at:) của dragDelegate. Nếu bạn trả lại một mảng không rỗng từ phương thức này đó, collection view sẽ bắt đầu cho phép drag các item mà bạn chỉ định. Trả lại một mảng rỗng khi bạn không cho phép người dùng kéo các item từ đường dẫn chỉ mục được chỉ định.

Sử dụng các phương thức khác của UICollectionViewDragDelegate để quản lý các tương tác khác liên quan đến hành động drag. Ví dụ: bạn có thể tùy chỉnh giao diện của các item đang được drag và cho phép người dùng thêm các item vào drag session hiện tại.

Trong phần implement phương thức collectionView (: itemsForBeginning: at