Swift UIKit Method iPhone App Development, Creating an Image Viewer

In this course, we will cover how to create a simple image viewer application using the Swift language and UIKit framework. This application will display the image selected by the user on the screen and include features to zoom in and out of the image. This course is aimed at those with basic knowledge of iOS application development.

Table of Contents

  1. Setting up the project
  2. Building the basic UI
  3. Implementing image selection functionality
  4. Implementing image viewer functionality
  5. Adding gesture recognition
  6. Finalization and deployment

1. Setting up the project

Open Xcode and create a new project. Select New > Project from the File menu. Click the iOS tab and select App. Next, enter the project name and organization name, select Swift as the language, and choose Storyboard as the user interface.

Project Settings

  • Product Name: ImageViewer
  • Team: Select the relevant team
  • Organization Name: Enter personal or organization name
  • Organization Identifier: com.yourname
  • Interface: Storyboard
  • Language: Swift

Once the project is created, Xcode will automatically generate a basic view controller. We will proceed based on this view controller.

2. Building the basic UI

The basic UI of the image viewer app consists of an image view and buttons. We will use Xcode’s Interface Builder to create the UI.

Adding UI Elements

  1. Open the Main.storyboard file and select the basic view controller.
  2. Find Image View in the Library in the upper right corner and add it to the view controller. This image view will be the area where the image is displayed.
  3. Again in the Library, add two Buttons to create the ‘Select Image’ button and the ‘Close’ button. Position each button appropriately.
  4. Set constraints for the image view and buttons to ensure they are well positioned on the screen.

Setting Up Auto Layout


imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
imageView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
imageView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
imageView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.8).isActive = true

selectButton.translatesAutoresizingMaskIntoConstraints = false
selectButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20).isActive = true
selectButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true

closeButton.translatesAutoresizingMaskIntoConstraints = false
closeButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20).isActive = true
closeButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true

3. Implementing Image Selection Functionality

We will implement the image selection functionality using UIImagePickerController so that users can choose an image. To do this, the view controller must adopt UIImagePickerControllerDelegate and UINavigationControllerDelegate.

Setting Up UIImagePickerController


class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func selectImage(_ sender: UIButton) {
        let imagePicker = UIImagePickerController()
        imagePicker.delegate = self
        imagePicker.sourceType = .photoLibrary
        present(imagePicker, animated: true, completion: nil)
    }

    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        if let selectedImage = info[.originalImage] as? UIImage {
            imageView.image = selectedImage
        }
        dismiss(animated: true, completion: nil)
    }
}

The code above includes functionality to open the image picker when the image selection button is pressed, and to display the selected image in the image view.

4. Implementing Image Viewer Functionality

After a user selects an image, they should be able to zoom in and out of that image and move it. We will change the structure to wrap the image view in a UIScrollView.

Adding UIScrollView


@IBOutlet weak var scrollView: UIScrollView!

override func viewDidLoad() {
    super.viewDidLoad()
    scrollView.delegate = self
    setupScrollView()
}

func setupScrollView() {
    let imageViewFrame = CGRect(x: 0, y: 0, width: imageView.image?.size.width ?? 0, height: imageView.image?.size.height ?? 0)
    imageView.frame = imageViewFrame
    scrollView.addSubview(imageView)
    scrollView.contentSize = imageView.frame.size
}

In the code above, we set the content size of the UIScrollView to the size of the image view, allowing users to zoom in and move the image.

5. Adding Gesture Recognition

We will add a UIPinchGestureRecognizer to allow users to zoom in and out on the image. 


override func viewDidLoad() {
    super.viewDidLoad()
    let pinchRecognizer = UIPinchGestureRecognizer(target: self, action: #selector(handlePinch(_:)))
    imageView.addGestureRecognizer(pinchRecognizer)
    imageView.isUserInteractionEnabled = true // Allow user interaction
}

@objc func handlePinch(_ sender: UIPinchGestureRecognizer) {
    if sender.state == .began || sender.state == .changed {
        imageView.transform = imageView.transform.scaledBy(x: sender.scale, y: sender.scale)
        sender.scale = 1.0
    }
}

Now users can pinch with two fingers to zoom in or out of the image, providing an intuitive image navigation experience.

6. Finalization and Deployment

The basic image viewer application is now complete. This app includes image selection, zooming, and moving functionalities, providing a basic user experience.

Preparing for Deployment

  • In Xcode, select Product > Archive to archive the app.
  • Once archiving is completed, you can select Distribute App in the Organizer window to proceed with App Store or Ad Hoc distribution.

Conclusion

In this course, we created a simple image viewer app using Swift and UIKit. In the future, challenge yourself to add more complex features or utilize other elements to enhance the app. The appeal of iOS development is limitless, so let your creativity shine!

Thank you.