Implementing Image Drag and Drop within a ScrollView using Swift and UIKit

In this article, we will explore how to implement the drag-and-drop functionality for images within a UIScrollView. We’ll create a custom CustomScrollView subclass that allows users to drag and drop an image from the bottom of the scroll view to any location within the scroll view. The original image will remain at the bottom, and a copy of the new image will be created as the user drags.

Understanding the Requirements

Our goal is to create a CustomScrollView subclass that supports image dragging and dropping without deleting the original image from the bottom. We’ll achieve this by utilizing touch events (begin, move, and end) on the scroll view.

Touch Events in SwiftUI and UIKit

In UIKit, touch events are triggered when the user interacts with the screen using their fingers or a pointer device. There are three types of touch events:

Touch Began: This event is triggered when the user touches the screen for the first time.
Touch Moved: This event is triggered whenever the user moves their finger from one point on the screen to another while still touching the screen.
Touch Ended: This event is triggered when the user releases their finger or pointer device after moving it around the screen.

Creating a CustomScrollView Subclass

To implement image dragging and dropping, we’ll create a custom CustomScrollView subclass that includes the following methods:

touchBegan: Triggered when the user touches the scroll view for the first time.
touchesMoved: Triggered whenever the user moves their finger from one point on the screen to another while still touching the screen.
touchesEnded: Triggered when the user releases their finger or pointer device after moving it around the screen.

Implementation

We’ll start by defining our custom CustomScrollView subclass and setting up its layout properties.

import UIKit

class CustomScrollView: UIScrollView {

    // Create an array to store the image views at the bottom of the scroll view.
    var images = [UIImageView]()

    override init(frame: CGRect) {
        super.init(frame: frame)

        // Set up the layout properties for the scroll view.
        self.contentSize = CGSize(width: 0, height: 200)
        self.bounces = false
        self pagingEnabled = true

        // Create a vertical stack view at the bottom of the scroll view.
        let bottomStackView = UIView()
        bottomStackView.translatesAutoresizingMaskIntoConstraints = false
        bottomStackView.backgroundColor = .gray
        self.addSubview(bottomStackView)

        // Add constraints to position the bottom stack view at the bottom of the scroll view.
        NSLayoutConstraint.activate([
            bottomStackView.topAnchor.constraint(equalTo: self.bottomAnchor),
            bottomStackView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 16),
            bottomStackView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -16)
        ])

        // Create an array to store the image views at the bottom of the scroll view.
        self.images = []

        // Add a tap gesture recognizer to the bottom stack view to handle touch events.
        let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(handleTap))
        bottomStackView.addGestureRecognizer(tapGestureRecognizer)

    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

Implementing Touch Events

Next, we’ll implement the touchBegan, touchesMoved, and touchesEnded methods to handle touch events.

@objc func handleTap(_ sender: UITapGestureRecognizer) {
    // Get the current image view at the bottom of the scroll view.
    let tappedImageView = self.images.last

    if tappedImageView != nil {
        // Create a new image view with the same properties as the original image view.
        let newImageView = UIImageView(image: tappedImageView!.image)
        newImageView.frame = tappedImageView!.frame
        newImageView.contentMode = tappedImageView!.contentMode

        // Add the new image view to the scroll view at the current touch location.
        self.addSubview(newImageView)

        // Set up the initial position of the new image view.
        let touchPoint = sender.location(in: self)
        newImageView.center = touchPoint

        // Update the position of the original image view.
        tappedImageView!.center.x = 0
    }
}

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    // Get the current touch point.
    let touchPoint = touches.first?.location(in: self)

    if touchPoint != nil {
        // Update the position of the new image view based on the current touch location.
        for view in self.subviews as [UIView] where view.isKind(of: UIImageView.classForCoder()) {
            if let imageView = view as? UIImageView, imageView.center == touchPoint {
                // Set the center of the new image view to the current touch location.
                imageView.center = touchPoint
            }
        }
    }
}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    // Get the current touch point.
    let touchPoint = touches.first?.location(in: self)

    if touchPoint != nil {
        // Update the position of the new image view based on the final touch location.
        for view in self.subviews as [UIView] where view.isKind(of: UIImageView.classForCoder()) {
            if let imageView = view as? UIImageView, imageView.center == touchPoint {
                // Set the center of the new image view to the final touch location.
                imageView.center = touchPoint
            }
        }

        // Update the position of the original image view based on the final touch location.
        for (index, value) in self.images.enumerated() {
            if let imageView = value as? UIImageView, imageView.center == touches.first!.location(in: self).x + 16 {
                self.images[index] = self.images.last
                self.images.removeLast()
            }
        }
    }
}

Testing the CustomScrollView

To test our custom CustomScrollView subclass, we’ll create a new Xcode project and replace the default content with our custom scroll view.

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Create an instance of the custom scroll view.
        let customScrollView = CustomScrollView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))

        // Add the custom scroll view to the view controller's view hierarchy.
        self.view.addSubview(customScrollView)

        // Set up the layout properties for the custom scroll view.
        customScrollView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            customScrollView.topAnchor.constraint(equalTo: self.view.topAnchor),
            customScrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            customScrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            customScrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
        ])

        // Create an array to store the image views at the bottom of the scroll view.
        var images = [UIImageView]()

        // Add a tap gesture recognizer to the custom scroll view to handle touch events.
        let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(handleTap))
        customScrollView.addGestureRecognizer(tapGestureRecognizer)

        // Create an array to store the image views at the bottom of the scroll view.
        for i in 0...9 {
            images.appendUIImageView(image: UIImage(named: "image\(i)")!))

            images.last?.center.x = CGFloat(i) * 16
            images.last?.center.y = 16

            customScrollView.addSubview(images.last!)
        }
    }

    @objc func handleTap(_ sender: UITapGestureRecognizer) {
        // Get the current image view at the bottom of the scroll view.
        let tappedImageView = self.images.last

        if tappedImageView != nil {
            // Create a new image view with the same properties as the original image view.
            let newImageView = UIImageView(image: tappedImageView!.image)
            newImageView.frame = tappedImageView!.frame
            newImageView.contentMode = tappedImageView!.contentMode

            // Add the new image view to the scroll view at the current touch location.
            self.addSubview(newImageView)

            // Set up the initial position of the new image view.
            let touchPoint = sender.location(in: self)
            newImageView.center = touchPoint
        }
    }
}

Conclusion

In this article, we explored how to implement the drag-and-drop functionality for images within a UIScrollView using Swift and UIKit. We created a custom CustomScrollView subclass that includes methods to handle touch events, allowing users to drag and drop an image from the bottom of the scroll view to any location within the scroll view without deleting the original image.

This implementation provides a foundation for creating more complex interactive user interfaces in iOS applications, such as pinch-to-zoom functionality or image galleries with panning and zooming capabilities.

Last modified on 2024-03-23