Adding Icon Selection Feature for iPhone App Development with UIKit in Swift

This article describes how to develop iOS applications using the Swift language, how to build user interfaces (UI) using the UIKit framework, and how to add an icon selection feature to the application.
Each step is explained with examples, structured to be intuitively followed.

1. Basic Understanding of Swift and UIKit

Swift is a programming language developed by Apple, widely used for developing applications for iOS, macOS, watchOS, and tvOS.
UIKit is a framework that provides user interface components for iOS applications, used to define all the elements that make up the screen.

1.1 Basic Structure of Swift

Swift is a safe and efficient language with a strong type system that helps in discovering errors at compile time.
The code below is an example of a simple Swift program. 

import UIKit

let greeting = "Hello, World!"
print(greeting)

1.2 Key Components of UIKit

UIKit consists of Views, View Controllers, event handling, and various UI elements (buttons, labels, images, etc.).
It creates an interface with the user through various UI components and their interactions.

2. Setting Up the Basic Structure of an iPhone Application

To start a new project, open Xcode and create a new project.
Select the ‘App’ template and make the following settings.

  • Product Name: IconSelectorApp
  • Interface: UIKit
  • Language: Swift

Once the project is created, a basic structure is set up.
The AppDelegate.swift and SceneDelegate.swift files manage the lifecycle of the app, while the ViewController.swift file configures the first screen.

3. Constructing the User Interface

The user interface can primarily be constructed visually through Storyboard, but can also be created directly through code.
Here, we will explain how to create a simple UI using Storyboard.

3.1 Building UI in Storyboard

Open the Main.storyboard file and add UILabel, UIButton, and UIImageView to the ViewController.
Each UI element will serve the following functions:

  • UILabel: Displays an instructional message to the user.
  • UIButton: Allows the user to click to activate icon selection mode.
  • UIImageView: Shows the selected icon.

3.2 Connecting Outlets and Actions

Connect outlets and actions for each UI element to ViewController.swift.
You can link code with the UI through IBOutlet and IBAction. 

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var iconImageView: UIImageView!
    @IBOutlet weak var promptLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        promptLabel.text = "Please select an icon."
    }

    @IBAction func selectIconButtonTapped(_ sender: UIButton) {
        // Call the method to select an icon
    }
}

4. Implementing the Icon Selection Feature

The icon selection feature allows users to choose their desired icon from a range of options.
Below, we will implement this functionality by allowing users to select images from the Photo Library using UIImagePickerController.

4.1 Using UIImagePickerController

UIImagePickerController provides an interface for the user to select photos.
When the button defined above is clicked, this controller will be presented.
Add a method to ViewController and adopt UIImagePickerControllerDelegate and UINavigationControllerDelegate. 

extension ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {

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

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

    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        picker.dismiss(animated: true, completion: nil)
    }
}

5. Testing and Debugging the App

Once all implementations are complete, you can test the app using the simulator in Xcode.
Click the icon selection button and ensure that the image appears in the UIImageView after selecting it from the photo library.
External bugs may arise during this stage, so it’s important to troubleshoot and resolve any issues through debugging.

6. Finalizing and Deploying

The icon selection feature has now been successfully added to your iPhone app.
You can use the Archive feature in Xcode to prepare the app for deployment.
Before submitting to the App Store, ensure that you have appropriate icons and screenshots ready.

Conclusion

In this post, we have detailed the process of developing an iPhone app using Swift and UIKit and adding an icon selection feature.
This process will serve as a solid starting point for understanding the basics of iOS app development, and based on this experience, you will be able to implement more complex features.

In the future, I will continue to share various insights for application development in the ever-evolving iOS ecosystem.
Thank you for reading.