ZoomImageView

ZoomImageViewPackage is a SwiftUI component that provides an image view with zoom and pan functionality. It's built using UIScrollView and UIImageView as a UIViewRepresentable, allowing for easy integration into SwiftUI applications. Supports both remote (init with URL) & local (init with UIImages) images.
Compatible with iOS 15.0 and later

Overview

ZoomImageViewPackage is a SwiftUI component that provides an image view with zoom and pan functionality. It's built using UIScrollView and UIImageView as a UIViewRepresentable, allowing for easy integration into SwiftUI applications. Supports both remote (init with URL) & local (init with UIImages) images.

Installation

Swift Package Manager

You can use The Swift Package Manager to install ZoomImageView by adding the description to your Package.swift file:

dependencies: [
    .package(url: "https://github.com/ronaldo-avalos/ZoomImageView", from: "1.1.0")
}

---

Features

• Local & Remote Image Support: Display and zoom into images from your app's bundle (UIImage) or from any URL.
• Enhanced Double-Tap Zoom: Enjoy intuitive zoom-to-area functionality, just like in Apple Photos. Simply double-tap on the area you want to magnify.
• Immersive Fullscreen View: The image preview now opens in a dedicated fullscreen view, providing a more focused and immersive experience.
• Swipe to Dismiss: Easily dismiss the preview by swiping down, which also automatically resets the zoom level.
• Ready-to-Use Previews: The package includes SwiftUI previews demonstrating how to use the component with both local and remote images.

Usage

Below I show how to call the component for its use, it has default parameters but you can modify them.

Local Images

To display a local image in the view with zoom support, use the following code:

import SwiftUI
import ZoomImageView

struct ContentView: View {
    let imageName: String = "localImage" // Replace with your local image name
    
    var body: some View {
        if let image = UIImage(named: imageName) {
            ZoomImageView(image: image)
                .maximumZoomScale(5.0)
                .minimumZoomScale(0.5)
                .showsHorizontalScrollIndicator(true)
                .alwaysBounceVertical(true)
                .doubleTapZoomScale(2.0)
                .frame(width: 300, height: 200)
                .border(Color.gray) // Optional to see the component's bounds
        } else {
            Text("Failed to load image: \(imageName)")
        }
    }
}

Asynchronous Images (from URL)

To load an image from a URL asynchronously and display it with zoom support, use the following code:

import SwiftUI
import ZoomImageView

struct ContentView: View {
    let imageURL: URL = URL(string: "https://example.com/image.jpg")! // Replace with your image URL
    
    var body: some View {
        ImageLoadingView(imageURL: imageURL)
            .frame(width: 300, height: 200)
    }
}

Customizable Parameters

You can customize the behavior of ZoomImageView using the following modifiers:

• maximumZoomScale(_: CGFloat): Sets the maximum zoom scale allowed.
• minimumZoomScale(_: CGFloat): Sets the minimum zoom scale allowed.
• doubleTapZoomScale(_: CGFloat): Defines the zoom scale on a double tap.
• showsHorizontalScrollIndicator(_: Bool): Shows or hides the horizontal scroll indicator.
• showsVerticalScrollIndicator(_: Bool): Shows or hides the vertical scroll indicator.
• alwaysBounceVertical(_: Bool): Enables or disables vertical bouncing even if there's no content to scroll.
• alwaysBounceHorizontal(_: Bool): Enables or disables horizontal bouncing even if there's no content to scroll.
• contentMode(_: UIView.ContentMode): Sets the content mode of the image (e.g., .scaleAspectFit, .scaleAspectFill, etc.).

Contributions

Contributions are welcome. If you encounter any issues or have suggestions, please open an issue or submit a pull request.

Donate

Show your appreciation by donating me a coffee. Thank you very much!

Author

@Roandlo Avalos github.com/ronaldo-avalos

License

RenderMeThis is available under the MIT license. See the LICENSE file for more information.